The Basics of Arrays in Javascript
In Javascript arrays and objects are similar. In fact, arrays are objects. Learning how to use both is fundamental to Javascript. While both are extremely important arrays are a little bit easier to understand and use. Learning arrays first will also make the objects easier to understand as they share some concepts.
First and foremost is recognizing an array. An array will be enclosed in a set of square brackets [] and can be declared empty.
const array = [] // an empty arrayArrays allow you to store multiple pieces of data together. Arrays store individual pieces of data in a single location. Each piece of data will be separated by commas.
const arrayNumbers = [1, 2, 3]const arrayString = ["Joe, "Mary", "Lily and Bob"]
Accessing the information
The pieces of data inside of an array are assigned index numbers which allow us to access them by location. We do this by calling the name of our array and then putting the index number inside of [] brackets. The index numbers in an array start from 0 and not 1. So if we have 3 pieces of data inside of an array our index numbers would be 0, 1, and 2.
const arrayString = ["Joe", "Sue", "Steve and Jane"]arrayString[0] // would return "Joe"
arrayString[1] // would return "Sue"
arrayString[2] // would return "Steve and Jane"const arrayNumbers = [1, 2, 3]arrayNumbers[0] // would return 1
arrayNumbers[1] // would return 2
arrayNumbers[2] // would return 3
Arrays can be nested into other arrays. You can access a nested array the same way you would a single value.
const nestedArray = ["outer", "outer', "outer", ["nested array"]]nestedArray[2] // would return ["nested array"]
This will return the entire array. If you want a single piece of data from the inner array you simply add another set of [] brackets to your call. The index in the second bracket will be relative to its index location inside of the nested array and thus the count starts from 0.
const array = [1, 2, [3, 4], 5, 6]array[2][0] // would return 3
array[3] // would return 5
Modifying Arrays
An important thing to know is that even if you declare an array using const they array can still be modified later using Javascript’s built in tools known as methods. An easy method to understand is .push which will add a value onto the end of the array. The syntax for .push is to put the name of the target, a period, the word push, and then a set of () containing the data you want to add.
const arrayNumbers = [1, 2, 3]arrayNumbers.push(4)arrayNumbers // would now = [1, 2, 3, 4]
const arrayString = ["Joe", "Sue", "Lucy"]arrayString.push("Sam")arrayString // would now = ["Joe", "Sue", "Lucy", "Sam"]
You can also use .unshift to add elements to the beginning of an array. The syntax for .unshift is that same as .push.
const array = [2, 3, 4]array.unshift(1)array // would now = [1, 2, 3, 4]
The push and unshift methods are destructive methods. They change the existing array into something new. If you want to modify an array non-destructively you can use the spread operator. The spread operator creates a copy of an array. The syntax for spread is three periods followed by the name of the target array.
const array = [1, 2, 3]const newArray = [...array]newArray // would = [1, 2, 3]
We can then simply add more data along side of our spread to create a new array with new data in it as well as the old.
const array = [1, 2, 3]const newArray = [...array, 4, 5]newArray // would equal [1, 2, 3, 4, 5]
There are many other methods built into Javascript that allow you to manipulate arrays. A helpful list can be found here on w3schools website. The best way to learn these methods is to try them out for yourself and experiment to see what happens.
