How to Add Elements to the Beginning of an Array in JavaScript

By the end of this page, you will understand how to add elements to the beginning of a JavaScript array, when to use unshift(), how it compares with alternatives like spread syntax and concat(), and why prepending to arrays usually remains an O(n) operation.

In JavaScript, arrays have built-in methods for adding and removing elements. When you want to place a new value at the start of an array, the standard built-in method is unshift().

const arr = [23, 45, 12, 67];
arr.unshift(34);
console.log(arr); // [34, 23, 45, 12, 67]

This matters because adding to the beginning of an array is a very common operation in real applications:

• showing newest notifications first
• adding recent messages to a feed
• maintaining a list of latest results
• inserting priority items at the front

However, there is an important performance idea behind this: JavaScript arrays are index-based. If you insert an item at index 0, the existing items usually need to shift one position to the right.

For example:

• 23 moves from index 0 to 1
• 45 moves from index 1 to 2
• 12 moves from index to

Think of a JavaScript array like a row of numbered lockers:

• locker 0 contains 23
• locker 1 contains 45
• locker 2 contains 12
• locker 3 contains 67

If you want to put 34 into locker 0, the current contents cannot stay where they are. Every existing item must move one locker to the right.

So prepending is like inserting a new person at the front of a line: everyone already in line has to step back one position.

That is why adding at the beginning is more work than adding at the end. Appending with push() is usually easier because no existing elements need to move.

The most direct built-in method is unshift().

array.unshift(element1, element2, ...)

It adds one or more elements to the beginning of an array and returns the new length.

Basic example

const numbers = [23, 45, 12, 67];
const newLength = numbers.unshift(34);

console.log(numbers);   // [34, 23, 45, 12, 67]
console.log(newLength); // 5

Explanation:

• unshift(34) inserts 34 at the start
• the original array is modified
• the method returns the array's new length

Add multiple elements

const numbers = [23, 45, 12, 67];
numbers.unshift(1, , );

.(numbers); 

Consider this example:

const arr = [23, 45, 12, 67];
arr.unshift(34);
console.log(arr);

Here is what happens step by step:

Step 1: Create the array

const arr = [23, 45, 12, 67];

Memory conceptually looks like this:

Step 2: Call unshift(34)

Prepending values to arrays appears in many common situations.

Activity feeds

A new notification arrives and should appear first:

const notifications = ["Older alert", "Yesterday's alert"];
notifications.unshift("New alert");

Chat applications

If messages are displayed with newest first, a newly received message may be inserted at the front:

const messages = ["How are you?", "Hello"];
messages.unshift("Latest message");

Search history

Recent searches are often shown first:

const searches = ["javascript map", "css grid"];
searches.unshift("array unshift");

Logging and monitoring dashboards

Incoming events may be added to the start of a list so the most recent issue is visible immediately.

Data processing scripts

You may prepend a header row or a high-priority item before processing a list.

 tasks = [, ];
tasks.();

In real projects, developers choose between mutating and non-mutating approaches depending on the situation.

1. Direct mutation with unshift()

Common in simple scripts or local state where changing the original array is fine.

queue.unshift(newItem);

Use this when:

• you own the array
• mutation is acceptable
• you want the simplest built-in method

2. Immutable update with spread syntax

Very common in React, Redux, and other state-management patterns.

const updatedItems = [newItem, ...items];

Use this when:

• you should not mutate existing state
• change detection depends on a new array reference
• you want predictable state updates

3. Guard clauses before prepending

Developers often validate data first.

if (response == null) {
  return;
}

items.unshift(response);

This prevents invalid values from being inserted.

4. Keeping arrays limited in size

A common pattern is prepend, then trim.

Here are common beginner mistakes when adding elements to the beginning of an array.

Mistake 1: Expecting unshift() to return the array

Broken code:

const arr = [23, 45];
const result = arr.unshift(34);

console.log(result); // 3, not [34, 23, 45]

Why it happens:

• unshift() returns the new length
• it does not return the updated array

Correct version:

const arr = [23, 45];
arr.unshift(34);
console.log(arr); // [34, 23, 45]

Mistake 2: Mutating an array when you wanted a new one

Broken code:

const original = [23, 45];
const alias = original;
alias.unshift();

.(original); 

Here is how the main options compare.

unshift() vs push()

// Mutating prepend
arr.unshift(value);

// Mutating prepend of multiple values
arr.unshift(v1, v2, v3);

// Non-mutating prepend with spread
const updated = [value, ...arr];

// Non-mutating prepend with concat
const updated = [value].concat(arr);

Key rules

• unshift() adds elements to the start of an array
• unshift() mutates the array
• unshift() returns the new length
• push() adds to the end, not the beginning
• Prepending to a normal array is usually O(n)

Quick examples

const a = [2, 3];
a.unshift(1);
console.log(a); // [1, 2, 3]

const a = [2, 3];
 b = [, ...a];
.(a); 
.(b); 

Is there a built-in JavaScript method to add an item to the beginning of an array?

Yes. Use array.unshift(value).

Does unshift() change the original array?

Yes. unshift() mutates the existing array.

What does unshift() return in JavaScript?

It returns the new length of the array, not the array itself.

How do I prepend without modifying the original array?

Use spread syntax or concat():

const updated = [value, ...original];

Is prepending to a JavaScript array O(1)?

Usually no. It is generally O(n) because existing elements need to shift or be copied.

Can I add multiple elements to the beginning at once?

Yes.

arr.unshift(1, 2, 3);

Should I use unshift() in React state updates?

• push() — adds elements to the end of an array, the opposite of unshift().
• shift() — removes the first element, which is closely related to prepending.
• pop() — removes the last element and helps compare front vs back operations.
• spread syntax — useful for creating a new array with a prepended value.
• concat() — combines arrays without mutating the original.
• array mutation — important for understanding when methods change the original array.
• immutable updates — common in modern frontend development when arrays should not be modified directly.
• time complexity — explains why prepending to arrays is typically O(n).