4 Different Ways We Can Add an Item to an Array in JavaScript

In JavaScript, there are multiple ways to add an Item to an Array. It allows you to store and manipulate collections of data. One of the common tasks you perform often is adding a new element to an array.

Whether you are a beginner or an experienced developer, understanding how to add an element to an array is crucial. In this article, we will understand various ways you can use to add an Item to an Array in JavaScript with simple and easy-to-understand code examples.

1. Using the push() Method

The most common method of adding an element to an array is using the push  method. It adds the new item at the end of an array and modifies the array’s length. Check the code example below –

Here, we have a simple array with four elements. We are adding a new element  – “Bentley” at the end of the array. If you console the array luxCars now you will see the array now has five elements ending with “Bentley”.

We can also add multiple arguments to the push methods. In this case, all the arguments get added at the end of the array in the exact same order they are mentioned in the method. Let’s modify the above example –

In the code above, multiple arguments are specified in the push method. They get added at the end of luxCars in the exact same order as the mentioned in the method.

Note that it is a mutating method. It means that it modifies the original array instead of creating a new array.

2. Using the unshift() Method

The unshift  method works similarly to the push method but has a little difference. It also returns an array with a new length but here the new elements gets added at the beginning.

Here the item “Bentley” is added at the beginning of the luxCars array.

Similar to push , we can add multiple arguments to unshift method. All arguments get added at the beginning of the array in the exact order they are mentioned in the unshift  method. Modifying the code above –

Here, we mentioned multiple arguments “Bentley”, “Lincoln” and “Corvette” in the unshift  method. They get added in the exact same order at the beginning of the luxCars array.

3. Using the concat() Method

The concat  method is a bit different as compared to the other two methods we have discussed above. As the name suggests, this method is used when we have to join multiple arrays without changing the original array. However, you can also use this method to add a single element to the array.

The concat  method merges two or more arrays and returns a new array without modifying the original arrays. It can also be used to add a single element to an array.

In this example, a new array allPlayers  is created by adding “team2” and “team3” to the “team1”. Note that while “team2” is an array, “team3” is a string. This makes concat a powerful method which can be used to add any arbitrary element to an array.

4. Using the splice() Method

The splice  method is a versatile tool for manipulating arrays in JavaScript. It allows adding, removing, or replacing elements at a specific index. This way you can modify your array from any place.

Here is an example where we have an array of favFruits.

Now, let’s say we want to add “Papaya” and “Kiwi” to this array at index 2. Here’s how we can achieve this using the splice  method.

Let’s break and understand the example:

1. 2 is the index where the insertion begins.
2. 0 indicates that no elements should be removed from the array.

After executing the above code, the  favFruits  array looks like this:

Notice how “Papaya” and “Kiwi” are inserted at index 2 and 3 respectively, and the original elements starting from index 2 are shifted to the right.

Key Points to Remember-

1. It changes the original array as new elements force the other elements to change their place.
2. You can add any number of elements at any position in the array.

Conclusion

JavaScript provides multiple ways to add items to an array. Each with its use cases that you can consider depending upon your needs. push() and unshift() are the most common methods that are used to add elements to an array. On the other hand, methods like concat() are useful when you want to merge multiple arrays or add an arbitrary element to an array. If you found this guide helpful you may also want to learn How to Check if a Key Exists in an Object in JavaScript?

So try to understand each method with practical examples so that you can understand how to use the right method in the right case. Understanding these methods will help you choose the right approach based on your specific needs. Moreover, you will understand how to write more effective JavaScript code.