How to Add New Element to beginning of Array in JavaScript

There are 4 ways to easily add new element to beginning of Array in JavaScript where most of them are 1 liner code. 2 are non-mutating and 2 will mutate the original array. Let’s explore the methods.

Methods to Add New Element to beginning of Array in JavaScript

Here are the list of 4 methods where we can add element to beginning of array. Since each of them have their own properties and features, we can choose which to use depending on our needs.

• Array concat() Method
• Spread Operator(...) Method
• Array unshift() Method
• Array splice() Method

Let’s look into each details with illustration below.

Array concat() Method

concat() is part of original Array standard built-in object method in JavaScript.

Its features includes:

• Create a new array by merging 2 or more arrays
• No change to the original arrays

Below shows the example of merging 2 arrays. First, we create an array with the new elements we want to add. Then we merge both of them using concat().

const myArray = ['one', 'two', 'three'];
const addElements = ['four', 5];

const newArray = addElements.concat(myArray) ;

console.log(newArray);  // ["four", 5, "one", "two", "three"]

Spread Operator(...) Method

Spread Operator(...) is one of the expression in JavaScript that spread out any iterable objects. Its usage is to put 3 dots ... in front of the variable we want to spread.

Its features includes:

• Pass all the values in the array to the new list
• The spread ordering will be in the same order as original array
• No change to the original arrays

Below shows the example where we will create a new array. Subsequently, we place the new element and spread the original array inside the [].

const myArray = ['one', 'two', 'three'];
const newArray = ['four', 5, ...myArray];

console.log(newArray); // ["four", 5, "one", "two", "three"]

Array splice() Method

splice() is part of original Array standard built-in object method in JavaScript. It takes in the start index, delete count and a list of new elements as parameters

Its features includes:

• Support replacing, adding or removing of elements from array
• Updates the original array

Below shows the example where we are using splice() method. We will indicate 0 as the start index, 0 as the delete count and 'four', 5 as the value to insert.

const myArray = ['one', 'two', 'three'];

myArray.splice(0, 0, 'four', 5);
console.log(myArray); // ["four", 5, "one", "two", "three"]

Array unshift() Method

unshift() is part of original Array standard built-in object method in JavaScript.

Its features includes:

• Allow adding of one or more element to existing array
• Add element in the same order of input
• Return new length of array during the operation

Below shows the example of adding 2 elements to original array.

const myArray = ['one', 'two', 'three'];

const newArrayLength = myArray.unshift('four', 5);

console.log(newArrayLength);  // 5
console.log(myArray);         // ["four", 5, "one", "two", "three"]

Conclusion

We have look into 4 different methods to add new element to the beginning of array.

Array concat() and spread operator(...) are all simple enough to use. But since they are non-mutating methods, we need to create a placeholder for new created array.

For mutating method, array unshift() and array splice() is very easy to use in this context.