How to Add New Elements to Beginning of Array in JavaScript

Web developers often need to manipulate JavaScript arrays by adding elements to their beginning or end. There are several ways to easily prepend elements at the start of an array. In this article, we will learn how to add new elements to beginning of array in JavaScript.

How to Add New Elements to Beginning of Array in JavaScript

Here are the different ways to add one or more elements to the beginning of JavaScript array.

1. Using Unshift

Every JavaScript array supports unshift() function that allows to prepend an item to the beginning of the array. It will overwrite the original array. It returns the new length of the array. Here is its syntax.

array.unshift(item1, item2, ...)

You can call unshift() function directly on any array. In this function, you need to list at least 1 item to be added to the beginning of the array.

Here is an example to illustrate it.

var data = [1, 2, 3];
data.unshift(0);
console.log(data); // output is [0, 1, 2, 3]

This approach modifies the original array without creating a new one.

You can also use this function to add multiple items to the array. Here is an example to add 2 items to the beginning of an array. You will see that they are added in the same order as they are listed in unshift() function.

var data = [1, 2, 3];
data.unshift(0, 4);
console.log(data); // output is [ 0, 4, 1, 2, 3 ]

2. Using Splice

Splice function is generally used to add or remove one or more items from a JavaScript array. But it can also be used to prepend an item to an array. Here is its syntax.

array.splice(index, count, item1, ..., itemN)

In the above function, the first argument is the index where you want to add/remove items. Next, you need to specify the number of items to be added/removed. Next, you need to list the actual items to be added or removed.

Here is an example

var data = [1, 2, 3];
data.splice(0,0,4);
console.log(data); // output is [4, 1, 2, 3]

Splice function is available for every JavaScript array, by default. In the above code, we specify the first argument of splice function as the index to insert the new item. Since we want to add an item to the beginning of array, we set it to 0. The second argument is the number of items to be removed. Since we are not removing but adding item, we set it to 0. The last argument is the item to be inserted/removed.

In other words, we configure splice() function to insert item 4 at the beginning of array.

This approach also mutates (modifies) the original array, without creating a new array.

You can also use this method to add multiple items to the beginning of array. Here is an example to add 2 items to the beginning of array.

var data = [1, 2, 3];
data.splice(0,0,4, 5);
console.log(data); // output is [4, 5, 1, 2, 3]

3. Using Spread Operator

JavaScript also provides spread operator ‘…’ which is generally used to unpack items of an array. You can use it by simply prefixing the array name with ‘…’. It can also be used to prepend an item to an array. Here is an example.

var data = [1, 2, 3];
var data2 = [0, ...data];
console.log(data2); // output is [0, 1, 2, 3]
console.log(data); // output is [1, 2, 3]

In the above code, we have mentioned the new item to be appended along with the original array, inside an array constructor [ ]. While doing so, we have prefixed the original array with spread operator.

Please note, this method will create a new array that contains new item added to the beginning of old array. The original array remains unchanged.

If you want to modify the original array, then you need to assign the result of concatenation to the original array, as shown.

var data = [1, 2, 3];
var data = [0, ...data];

console.log(data); // output is [0, 1, 2, 3]

You can also use this method to add multiple items to an array. Here is an example to add items 0 and 4 to the original array.

var data = [1, 2, 3];
var data = [0, 4, ...data];
console.log(data); // output is [0, 4, 1, 2, 3]

4. Using concat

JavaScript also provides concat() function that is available for both strings as well as arrays. When called from a string variable, it is used to concatenate strings. When it is called from array, it is used to concatenate arrays. It can also be used to prepend an item to an array.

var data = [1, 2, 3];
var data2 = [0].concat(data);

console.log(data2); // output is [0, 1, 2, 3];
console.log(data); // output is [1, 2, 3];

In the above code, we encapsulate the new item in a empty array [ ], and call concatenate function on it. In the function, we pass the original array as argument. This will result in a new array, where the new item is added at the beginning, followed by items of original array.

Please note, this method will return a new array and not modify the original array. If you want to modify the original array, then you will have to assign the result of concat() function to the original array as shown.

var data = [1, 2, 3];
var data = [0].concat(data);

console.log(data); // output is [0, 1, 2, 3];

You can also add multiple items to the beginning of an array using this method. Just list them one after the other within a new array [], and call concat() function on this array.

var data = [1, 2, 3];
var data = [0, 4].concat(data);

console.log(data); // output is [0, 4, 1, 2, 3];

In the above example, we have included the two items 0 and 4 in a new array. We have called concat() function on this array to concatenate with original array data.

Conclusion

In this article, we have learnt several different ways to add a new item to the beginning of a JavaScript array. Some of these methods modify the original array while others return a new array with the result. You can use any of these solutions as per your requirement. If you want the original array to be modified, then use unshift() or splice() function. If you want to store the result in a new array, then use spread operator or concat() function.

Also read:

How to Get Unique Values in JavaScript Array
How to Copy Array in JavaScript
How to Empty Array in JavaScript