Push to Front of Array in JavaScript

To push to the front of an array in JavaScript, you can use the Array.prototype.unshift() method. This method adds one or more elements to the beginning of an array and returns the new length of the array. Here is an example:

const numbers = [1, 2, 3, 4, 5];
numbers.unshift(0);

console.log(numbers); // [0, 1, 2, 3, 4, 5]
Code language: JavaScript (javascript)

In this code, we first define an array called numbers that contains the numbers 1 through 5. Then, we use the Array.prototype.unshift() method to add the number 0 to the beginning of the numbers array.

Finally, we log the updated numbers array to the console to see the result. The output shows that the unshift() method added the number 0 to the front of the array.

Using splice()

Another way to add an element to the front of an array in JavaScript is to use the Array.prototype.splice() method. This method can be used to add elements to an array at a specific index, as well as to remove elements from the array.

Here is an example of how you can use the splice() method to add an element to the front of an array:

const numbers = [1, 2, 3, 4, 5];
numbers.splice(0, 0, 0);

console.log(numbers); // [0, 1, 2, 3, 4, 5]
Code language: JavaScript (javascript)

The splice() method takes three arguments: the index at which to start adding elements, the number of elements to remove (in this case, 0 because we are not removing any elements), and the elements to add to the array (in this case, the number 0).

Immutable Approaches

If you don’t want to modify the original array, we have two approaches below you can use.

Using concat()

To add an element to the front of an array in a way that does not modify the original array, you can use the Array.prototype.concat() method.

This method creates a new array that consists of the elements in the original array followed by the elements in the arguments to the concat() method.

Here is an example of how you can use the concat() method to add an element to the front of an array in a immutable way:

const numbers = [1, 2, 3, 4, 5];
const newNumbers = [0].concat(numbers);

console.log(newNumbers); // [0, 1, 2, 3, 4, 5]
Code language: JavaScript (javascript)

In this code, we first define an array called numbers that contains the numbers 1 through 5. Then, we use the Array.prototype.concat() method to create a new array called newNumbers that consists of the number 0 followed by the elements in the numbers array.

Finally, we log the newNumbers array to the console to see the result. The output shows that the concat() method created a new array with the number 0 added to the front of the original numbers array.

Using the Spread Operator

Another way to add an element to the front of an array in a way that does not modify the original array is to use the spread operator (...).

This operator allows you to spread the elements of an array into a list of elements, which can then be used in places where a list of elements is expected.

Here is an example of how you can use the spread operator to add an element to the front of an array in a immutable way:

const numbers = [1, 2, 3, 4, 5];
const newNumbers = [0, ...numbers];

console.log(newNumbers); // [0, 1, 2, 3, 4, 5]
Code language: JavaScript (javascript)

In this code, we first define an array called numbers that contains the numbers 1 through 5. Then, we use the spread operator (...) to create a new array called newNumbers that consists of the number 0 followed by the elements in the numbers array.

Finally, we log the newNumbers array to the console to see the result. The output shows that the spread operator created a new array with the number 0 added to the front of the original numbers array.