square brackets [ ]
Here is an example of an array with multiple elements:
const myNewArray = [30, 40, true, 'Megan'];
Each element in an array has an
index beginning at . In our example above, the element 30 is at
myNewArray, 40 is at
length property returns the number of elements in an array. Let's call it on our array:
const myNewArray = [30, 40, true, 'Megan']; let arrayLength = myNewArray.length; console.log(arrayLength); // Output: 4
As you can see the syntax to access the
length property is yourArray.length. This property becomes very useful in things like for loops.
push method adds any number of items to the end of an array. It will return the new length of the array. This is considered a destructive method because it changes the original array. Let's see how it works with an example:
const animals = ['cat', 'dog', 'horse']; // add 'pig' to the array animals.push('pig'); console.log(animals); // Output: ['cat', 'dog', 'horse', 'pig']
Now we have our 'pig' added to the end of the original animals array!
pop method removes a single item from the end of an array. Let's say we want to remove the pig from our animals array above. We simply use the following syntax:
animals.pop(); console.log(animals); // Output: ['cat', 'dog', 'horse']
Our pig is gone. This method, like push, is destructive because it removes the element from our original array. It also returns the removed element.
shift method removes the first element of an array. Let's see how it works on our original animals array:
const animals = ['cat', 'dog', 'horse']; // Remove the first element from the array animals.shift(); console.log(animals); // Output: ['dog', 'horse']
The shift method is also destructive because it removes the element from the original array.
unshift method will add any number of items to the beginning of an array. Much like push, this method is destructive and makes changes to the original array. Let's try a new example using the unshift syntax:
const colors = ['blue', 'red', 'green']; // Add two new colors to the beginning of the array colors.unshift('purple', 'yellow'); // Output: ['purple', 'yellow', 'blue', 'red', 'green']
We've added our two new colors to the original array! As you can see they've been added in the original order that we passed them in.
You may be thinking to yourself that all of these destructive methods seem a little, well, destructive! There are array methods that are nondestructive and return a new array that is a copy or a section of the original.
Slice is one such method. When passed no arguments,
slice will return a new shallow copy of the original array.
const colors = ['blue', 'red', 'green']; // Make a copy const colorsCopy = colors.slice(); console.log(colorsCopy); // Output: ['blue', 'red', 'green']
This can be a very useful tool for when we don't want to change our original array.
Slice can be used to copy a portion of an array when passed additional arguments.
'Start' being the index of the element you want to start the 'copy' from, and 'end' being the index of the last element you want to include. If you do not provide an end, the selection will end at the index of the last array element. For example:
const iceCream = ['chocolate', 'vanilla', 'rocky road', 'mint']; // Slice only the elements we want to copy to our new array let newArray = iceCream.slice(1, 3); console.log(newArray); // Output: ['vanilla', 'rocky road'] // Remember, our original array will be untouched console.log(iceCream); // Output: ['chocolate', 'vanilla', 'rocky road', 'mint']
splice method is perhaps the most confusing on this list, but is super useful for adding, updating, or removing elements in an array. It is destructive and does modify the original array. It also returns a new array of the deleted elements (if you did so). Let's take a look at the syntax first:
splice(start, deleteCount, item1, item2...)
startis the index at which to start changing the array. If your start number is greater than the length of your array, no elements will be deleted. Instead it will add the elements you provide as arguments.
deleteCountis an optional parameter, and is an integer indicating the number of elements that should be removed.
item2, etc. are the elements you want added to the array, beginning from
start. If you don't add these elements,
splicewill only remove things from the array.
Although it seems like a lot of information, let's see it in action with our iceCream array:
const iceCream = ['chocolate', 'vanilla', 'rocky road', 'mint']; // Starting at array index 1 we are deleting one element and then adding a new element iceCream.splice(1, 1, 'coffee'); console.log(iceCream); // Output: ['chocolate', 'coffee', 'rocky road', 'mint']
What would happen if we don't delete any elements? We would have the following output!
iceCream.splice(1, 0, 'coffee'); console.log(iceCream); // Output: ['chocolate', 'coffee', 'vanilla', 'rocky road', 'mint']
As you can see nothing has been deleted, but 'coffee' has been inserted where our
MDN's Array Information
Let me know in the comments below if there are more array methods you'd like explained!