More arrays (these are called nested arrays)
Here are a few other pieces of array terminology that you should be aware of before proceeding:
If you're using strict terminology, every element within an array is called an item (although people will know what you mean if you say element)
The location of an item within an array is called its index
The number of items within an array is called the length of the array
After the = operator, you need to specify the array's items inside of square brackets. As an example, here is how you could create an array called integers that contains the first 4 non-zero integers:
const integers =[1,2,3,4];
As you can see, the syntax for creating an array is fairly simple. The items are separated by commas and all the items are wrapped in square brackets.
As mentioned, arrays do not need to specifically contain numbers. They can contain other data structures too.
const names =['Nick','McCullum'];
How to Access Items From Within an Array
Just as we used square brackets to create our arrays earlier, we can also use square brackets to access items within an array. To do this, we simply need to pass the variable name and the item's index into console.log().
const integers =[1,2,3,4];const names =['Nick','McCullum'];
console.log(integers);//Logs 1 to the console
console.log(names);//Logs 'McCullum' to the console
How to Determine the Length of an Array
The length of an array is equal to the number of items that the array contains.
The arrays that we have worked with so far have been small enough that we can easily determine their length using the eyeball test. It's obvious as first glance that integers contains 4 items and names contains 2 items:
When working with larger arrays, however, it's not so easy to determine their length.
What is the solution?
Here are two examples of how you could use this strategy to access the last item of our integers and names arrays:
Mutable array methods perform some sort of mutation to the array. Said differently, the array will be fundamentally different after the method is run.
Immutable array methods do not change the original array, but they do return a different array that has been modified in some way.
If this is not completely clear, do not worry - we will see many examples in the rest of this tutorial.
How to Add Items to an Array Using the push and unshift Methods
console.log(integers);//Logs [1, 2, 3, 4, 5] to the console
Since the purpose of the push method is to add items to the end of an existing array, then it goes without saying that push is a mutable array method.
The unshift method is a close contemporary of the push method but instead of adding the item to the end of the array, it adds it to the beginning of the array.
Here's how you could use the unshift method to add 0 to the start of our recently-modified integers array:
console.log(integers);//Logs [0, 1, 2, 3, 4, 5] to the console
As with push, since the purpose of the unshift method is to add items to the start of an existing array, then it goes without saying that unshift is a mutable array method.
Here is an example of how we could use the reverse method to reverse the order of the items with our names array:
const reversedNames = names.reverse()
If you log this new reversedNames variable to the console, here is what it prints:
Note that since the reverse method is a mutable array method, then the original names array has also been altered:
console.log(names);//Logs ["McCullum", "Nick"] to the console
begin: the first index of the new array
end: the last index of the new array. Note that the item at this index is not included in the new array.
To see the slice method in action, let's use our integers array from earlier in this tutorial.
Note that since the slice method is immutable, the original integers array remains unchanged.
The splice method is mutable - which means that it actually modifies the value of the array that it is performed on.
Instead of taking end as its second argument, it takes count - which is the number of items of the original array that you'd like to splice from the array.
The slice and splice methods are similar enough that splice does not require any further explanation.
Fair warning, though - the similarity of these methods is bound to introduce bugs in your code at some point, and being aware of how they're related is very useful for debugging purposes.
To see this in action, let's again consider our integers array:
const integers =[1,2,3,4];
Here's how you would add the item 2.5 between the item 2 and the item 3:
const integersAndDecimals =[...integers.slice(0,2),2.5,...integers.slice(2)];
console.log(integersAndDecimals);//Logs [1, 2, 2.5, 3, 4] to the console
Fortunately, we can again combine the spread operator with the slice method to build a workaround. Here's how we would remove the item 2.5 from the following array:
const halfSteps =[1,1.5,2,2.5,3,3.5];const halfSteps2 =[...halfSteps.slice(0,3),...halfSteps.slice(4)];
console.log(halfSteps2);//Logs [1, 1.5, 2, 3, 3.5] to the console
How to Prevent Mutable Array Methods From Mutating Your Arrays
There are certain situations in which you might want to use a mutable array method, but want to avoid having the mutation applied to your original array.
Fortunately, there is a workaround. To avoid the mtuation, you simply need to create a copy of the original array.
The easiest way to do this is by using the ... operator, often called the spread operator. Here's how we could use this operator to take a copy of the integers array and then apply the reverse method to the copied array:
const integers =[1,2,3,4];const integersCopy =[...integers];const integersCopyReverse = integersCopy.reverse();
console.log(integers);//Logs [1, 2, 3, 4] to the console
console.log(integersCopy);//Logs [4, 3, 2, 1] to the console
console.log(integersCopyReverse);//Logs [4, 3, 2, 1] to the console
Notice that while the integersCopy and integersCopyReverse variables have both been reversed, the original integers variable remains unchanged.
Note that this could also be done in one line, like this: