Every up-and-coming programmer needs to know how to work with arrays in JavaScript. This is especially true for those looking to work with large amounts of data.
Within JavaScript, the array is used to store multiple elements under a single variable. But creating arrays and manually entering elements quickly becomes impossibly time-consuming and complicated. That’s where the JavaScript array push method comes in.
In this post, you’ll learn the ins and outs of the JavaScript array push method. Let’s dive in.
What Is a JavaScript Array Push?
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.
How to Create a JavaScript Array Push
You can apply the .push() command to any list of items using one or more parameters. The JavaScript array push can be used for arrays containing strings, variables, or functions. You can also use .push() to append elements from one array to another.
Here is an example of the array push syntax:
array.push("element1,element2,element3,.....,elementN,");
Here, array.push is the command. Meanwhile, the comma-separated list indicates the elements that you wish to add to an existing array.
JavaScript Array Push in Action
The best way to understand how to use a JavaScript array push is to get familiar with examples of its use in various circumstances. Here are some common use cases for the array push.
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.
When the ES6 standard of JavaScript came out, it included some new methods for writing code in a shorter, more efficient way. One such method is the Spread Operator. This feature allows iterable objects (such as arrays) to expand into other elements so you can write JavaScript efficiently.
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.
Using Arrays in JavaScript
When it comes to expanding your JavaScript knowledge, understanding how to write code as quickly and efficiently as possible is imperative. Features such as an array push enable you to cut out tons of manual coding and repetitive entries, especially when dealing with large amounts of data.
