How to Add New Elements At the Beginning of the Array in JavaScript – Definitive Guide

Arrays allow you to store multiple elements in a single object.

You can add new elements at the beginning of the array in JavaScript using the array.unshift(‘new_element’) method.

Basic Example

While using the unshift() method,

  • The element is inserted at the beginning of the array
  • No elements are removed
  • The same array is mutated
var myArray = [1, 2, 3, 4, 5];

myArray.unshift(0);

console.log(myArray); // [0, 1, 2, 3, 4, 5]

This tutorial teaches you how to add new elements at the beginning of the array in JavaScript using different methods and when it is appropriate to use each method.

Using Unshift

The unshift() method inserts the element at the beginning of the array.

It returns the new length of the array.

  • Mutates the same array. Doesn’t create a copy of the array while inserting
  • No elements are removed. It pushes the existing elements to the next position and inserts the new elements at the beginning.

Use this method when you want to insert a new element at the beginning of the same array object and don’t want to remove any elements.

Code

var myArray = [1, 2, 3, 4, 5];

myArray.unshift(0);

console.log(myArray); // [0, 1, 2, 3, 4, 5]

Using Splice

The splice() method changes the content of the array by removing or replacing the existing items in the array.

The splice() method mutates the same array.

To insert a new element at the beginning of the array using the splice() method,

  • Use the 0 index to specify the beginning position
  • Use 0 to insert the element and move the existing items to the next position or use 1 to replace the item at the beginning and insert the new item
  • Pass the new item that needs to be inserted

Use this method when you want to insert a new item into the array by replacing the item at the first position instead of pushing elements to the next position.

Code

The following code replaces the first element 0 in the existing array with the new element 10.

var myArray = [1, 2, 3, 4, 5];

myArray.splice(0, 1, 10);

console.log(myArray); // [10, 2, 3, 4, 5]

Using Concat

The concat() method concatenates two or more arrays and creates a new array out of it.

To add an element at the beginning of the array using the concat() method,

  • Create a new array with the new element
  • Concatenate the other array objects from the existing array into the new array with the first element.

The concatenate method creates a deep copy of the elements while concatenating the array.

Use this method when you want to create a new array object with the element inserted at the first position. The copy of elements from the existing array should be a deep copy instead of a shallow copy(only a reference to the existing objects).

Code

var myArray = [1, 2, 3, 4, 5];

var firstElement = 0;

var updatedArray = [firstElement].concat(myArray);

console.log(updatedArray); // [0, 1, 2, 3, 4, 5]

Using Spread Operator

The spread operator […] expands the iterables when one or more objects are necessary. It is also known as destructuring.

To add a new element at the beginning of the array using the Spread operator,

  • Add a new element to an array
  • Expand the elements of the existing array using the spread operator.

Use this method when you want to add one or more elements at the beginning of the array and add a reference to the items(shallow copy) of the existing array in the new array.

Code

var myArray = [1, 2, 3, 4, 5];

var firstElement = 0;

var updatedArray = [firstElement, ...myArray]

console.log(updatedArray); // [0, 1, 2, 3, 4, 5]

Additional Resources

Leave a Comment