How to Add Element at Beginning of an Array in JavaScript

In this tutorial, we’ll learn different ways of adding new elements at the beginning of an Array in JavaScript.

Using Array.unshift()

The easiest way to add elements at the beginning of an array is to use unshift() method.

var fruits = ["Apple", "Banana", "Mango"];

fruits.unshift("Orange");
console.log(fruits);
// Prints ["Orange", "Apple", "Banana", "Mango"]

fruits.unshift("Guava", "Papaya");
console.log(fruits);
// Prints ["Guava", "Papaya", "Orange", "Apple", "Banana", "Mango"]

unshift() returns the new length of the array, and it mutates the original array in place — every existing element has to be shifted up by one index to make room, which matters for performance on large arrays (more on that below).

Sometimes you don’t want to alter the original array, and would rather assign the result to a new variable instead. In JavaScript, you can do this in multiple ways in a single statement.

Using Spread Operator (…)

We can use spread operator ... to make a copy of an array. It’s short syntax is very handy.

var fruits = ["Apple", "Banana", "Mango"];

var moreFruits = ["Orange", ...fruits];
console.log(moreFruits);
// Prints ["Orange", "Apple", "Banana", "Mango"]

var someoMoreFruits = ["Guava", "Papaya", ...moreFruits];
console.log(someoMoreFruits);
// Prints ["Guava", "Papaya", "Orange", "Apple", "Banana", "Mango"]

console.log(fruits);
// Prints ["Apple", "Banana", "Mango"]

New elements are added at the beginning followed by copy of the original Array (using ...) and assigned to a new variable.

We see that our original array remains the same.

Using Array.concat()

We can also user concat() method to join two (or more) arrays at the beginning.

var fruits = ["Apple", "Banana", "Mango"];
var moreFruits = ["Orange"];
var someoMoreFruits = ["Guava", "Papaya"];

var allFruits = someoMoreFruits.concat(moreFruits, fruits);
console.log(allFruits);
// Prints ["Guava", "Papaya", "Orange", "Apple", "Banana", "Mango"]

Like the spread operator, concat() doesn’t mutate any of the arrays passed to it — it always returns a brand-new array.

Using Array.splice()

splice() can also insert at the front, and unlike spread/concat it mutates the original array (same as unshift()). Its signature is splice(startIndex, deleteCount, ...itemsToInsert) — passing 0 for both the start index and the delete count means “insert here, remove nothing”:

var fruits = ["Apple", "Banana", "Mango"];

var removed = fruits.splice(0, 0, "Orange", "Kiwi");

console.log(fruits);
// [ 'Orange', 'Kiwi', 'Apple', 'Banana', 'Mango' ]
console.log(removed);
// [] — splice() returns the removed elements, and none were removed here

splice() is really a general-purpose “remove and/or insert at any position” tool rather than a beginning-of-array specialist, so reach for unshift() when you specifically mean “add to the front” — it says what it does.

Performance: unshift() vs. push()

Because unshift() (and splice() at index 0) has to re-index every existing element to open up a slot at the front, it runs in 𝘖(n) time — the more elements already in the array, the more work each call does. push(), which appends to the end, doesn’t need to move anything else and runs in amortized 𝘖(1).

The difference is easy to see by timing 100,000 insertions of each kind into a growing array:

const N = 100000;

const arr1 = [];
console.time('push');
for (let i = 0; i < N; i++) {
  arr1.push(i);
}
console.timeEnd('push');

const arr2 = [];
console.time('unshift');
for (let i = 0; i < N; i++) {
  arr2.unshift(i);
}
console.timeEnd('unshift');

Output
push: 3.979ms
unshift: 774.099ms

(Timings measured with Node.js 22 — exact numbers vary by machine and JS engine version, but the gap between the two is consistently two to three orders of magnitude, since push does a constant amount of work per call while unshift does more work as the array grows.)

If you’re repeatedly adding elements to the front of a large array in a hot loop, this cost adds up fast. Common ways to avoid it:

• Build the array in reverse and push(), then reverse once at the end (or push() in order and simply read it back-to-front) — trades N shifts for a single 𝘖(n) reverse.
• Use a different data structure, such as a linked list or a deque-like structure, if front-insertion is a frequent operation rather than a one-off.

For a handful of insertions, or in a script that isn’t performance-sensitive, unshift() is perfectly fine — reach for these alternatives only once profiling shows front-insertion is actually a bottleneck.