X

Push vs Unshift vs Others – Javascript ‘Add to Array’ Functions

As we already know that there are various methods for adding newer elements to a certain Javascript array.

However, which one of them is the best?

Push, Unshift, Splice, Index Notation and Concat are the most widely used way for adding new elements to an array.

Each of these commands has specific usage, mostly differentiating in terms of positions. Though, which one should you use?

Push vs Unshift vs Others - Javascript 'Add to Array' Functions
Push vs Unshift vs Others – Javascript ‘Add to Array’ Functions

Let us discuss the execution of these commands, in brief, to figure out which one of them is the most efficient one.

push()

The push() command will add an element to the end of an array. It has a twin function pop() that will remove an element from the end of an array.

Let us say we have an array: var list = [“gun”, “bar”];

The user wants to add a new element “car” in the array. What would they do?

Bingo, use the push() function: list.push(“car”);

The result would be: [“gun”, “bar”, “car”]

The whole process would look like this:

1
2
3
var list= ["gun", "bar"];
list.push("car");
["gun", "bar", "car"] //result

You can see that the car element has been added at the end of the array now. What more? You can also add multiple elements to an array using the push() command.

Say you want to add “car” and “jar” to the array. You simply need to use this command: list.push(“car”, “jar”);

The result would be: [“gun”, “bar”, “car”, “jar”]

The whole process would look like this:

1
2
3
var list= ["gun", "bar"];
list.push("car", "jar");
["gun", "bar", "car", "jar"] //result

As easy it gets! push() command is definitely the easiest and the simplest option for adding elements to the end of an array.

unshift()

Now, what if you want to add an element to the beginning of an array? You cannot ask push() to help you out here. However, you can rely on the unshift() command to take care of your job.

Like push(), unshift() also has a twin function, shift() in this case. It removes the beginning one element of the array.

This is how things would look like while using unshift():

1
2
3
var list= ["gun", "bar"];
list.unshift("car");
["car", "gun", "bar"] //result

As you can see here that “car” element now appears at the beginning of the array, your job is done! Like push(), you can also add multiple elements to the start of an array.

The whole thing would look like this:

1
2
3
var list= ["gun", "bar"];
list.unshift("car", "jar");
["car", "jar", gun", "bar"] //result

As easy it gets! unshift() command is definitely the easiest and the simplest option for adding elements to the beginning of an array.

splice()

This method is quite more complex compared to the previous two ones. The splice() command can modify the content of an array by either removing existing elements or by adding new elements.

The proper syntax for splice() command is:

array.splice(start,deleteCount [, n1 [, n2[,...] ] ] )

If you aim to add an element at a certain position within an array, you need to use the splice() command.

The whole process would look like this:

1
2
3
var list = ["gun", "bar"];
list.splice(1, 0, "car"); //Index Position = 1, Delete Count = 0 and Add "car" to the particular position
["gun", "car", "bar"]; //result

Similarly, for adding multiple elements, you can try this:

1
2
3
var list = ["gun", "bar"];
list.splice(1, 0, "car", "jar"); //Index Position = 1, Delete Count = 0 and Add "car" and "jar" to the particular position
["gun", "car", "jar", "bar"]; //result

The splice() command is more complex than the push() and unshift() command. Thus, it is recommended that you initially practice the use of push() and unshift() commands before using the splice() command.

concat()

The concat() method is quite different than the previous three mentioned methods. In this case, you’ll get a new combined array in return comprised of the existing defined array joined with the array from its argument.

The whole thing would look like this:

1
2
3
var list = ["gun", "bar"];
var list2 = list.concat( ["car", "jar"] );
["gun", "bar", "car", "jar"] //list2 array result

What more? You can also add non-array elements using concat() by following these commands:

1
2
3
var list = ["gun", "bar"];
var list2 = list.concat( "car", "jar" );
["gun", "bar", "car", "jar"] //list2 array result

The concat() method provides you an easy solution for combining arrays together without disturbing your code for loops.

Index Notation

Users can also manipulate the elements of an array without using any of the previously mentioned methods by simply referring the elements to the desired index position within an array.

1
2
3
4
var list = ["gun", "bar"];
list[2] = "car"; //adding element "car" to #2 position
list[3] = "jar"; //adding element "car" to #3 position
["gun", "car", "jar", "bar"] //result

Here you can clearly see that we added two elements at our desired positions with ease.

The Index Notation method is widely used for placing the elements exactly where the user wants them to.

Ending Statement

Adding any number of elements to an array in a certain JavaScript is not as much hard as much you thought. As per our knowledge, no method mentioned in the context is the best method to use for modifying array elements. The need for the use of these commands varies as per the requirements of the user.

If you have any queries regarding the use of these commands, shoot your questions in the comments section. We’ll get back to you as soon as possible!

Leave a Reply

Your email address will not be published. Required fields are marked *