Let’s say you have an array that already contains multiple elements. Now, you need to add an extra element to that array. Rather than creating a new array that includes the new element, the .push() method lets you add the extra element to the end of an existing array.
The .push() command then returns the array using the new length. It changes the size of the original array and returns a new array (with the new element added) as output.
You can use an array push to add one or multiple elements to an array.
Using an array push is helpful when you need to know how many data points are contained in an array or for adding up all the values of an array.
Here is an example of the array push syntax:
Here, array.push is the command. Meanwhile, the comma-separated list indicates the elements that you wish to add to an existing array.
Using Array Push to Add an Element to an Existing Array
In this initial example, the .push() is used to add an individual item to an array. It’s a simple exercise that demonstrates how the command works.
Let’s say we have an array that contains a list of pets. We want to add the item “chinchillas” to this array. Here is how the command would look:
The array here is “fruits” while bananas and oranges are the existing items. By running the above, you’ll get the following output:
["dogs", "cats", "chinchillas"]
All that’s happening here is the passing of the item (“chinchillas”) to the .push() method, which then appends it to the existing pets array.
Using Array Push to Add Multiple Elements to the End of an Array
The first example is very simple and useful enough. But the real value of .push() in a practical sense is the ability to add multiple elements to the end of an array.
Let’s continue with the pets array scenario. Say you want to add chinchillas, pigs, and birds to the existing array. Here is how the command would look:
The method and outcome are exactly the same. You’re simply adding apples, strawberries, and pears to an array that already contains dogs and cats. By adding multiple elements to the array, you’ll get the following output:
["dogs", "cats", "chinchillas", "pigs", "birds"]
Now you don’t have to create a brand new array just to add more items.
Using the Array Push to Add Elements of One Array to Another
So, what are some other scenarios where the array push can be useful? One particular use case is the ability to take elements from one array and append them to a completely different array.
We’ve got our pets array from the previous examples. But what if we also wanted to add in reptiles that are already contained in their own array?
Here are our two existing arrays:
let pets = ["dogs", "cats", "chinchillas", "pigs", "birds"]
let reptiles = ["lizards", "snakes", "chameleons"];
Now let’s use .push() combined with a loop to add reptiles to pets. The loop will iterate the elements of the reptiles array and then the array push will add them to the end of the pets array. The command looks as follows:
So, what will the output look like in this case?
["dogs", "cats", "chinchillas", "pigs", "birds","lizards", "snakes", "chameleons"]
This is a simple and straightforward way to combine two arrays.
More Efficient Ways to Use Array Push
The tips above are pretty useful. However, when you’re dealing with large amounts of data, there are some tricks you can use to cut out repetitive steps.
It’s essentially a copy-and-paste feature that saves you from having to pass items individually as part of your .push() command.
Let’s take the following example where we’ll pass an array and then use the spread feature (...) to append one array to another:
Just like the more manual and repetitive method of individually passing the vegetable items, you’ll get the following output:
["dogs", "cats", "lizards", "snakes", "chameleons"]
It’s clear how useful features like spread can be when dealing with large, complex arrays.