šŸš€ LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
šŸŽ“ COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEjavascript

javascript Documentation

LOADING ENGINE...

Array.unshift()

AI & DATA SCIENCE // unshift

unshift() adds one or more elements to the BEGINNING of an array and returns the new length.

Syntax

const len = array.unshift(element1, element2, ...);

Deep Dive Course

**unshift()** is the inverse of **shift()**. It inserts elements at the front (index 0) and shifts existing elements to higher indices. This is O(n) due to re-indexing. It returns the **new length**. For non-mutating prepend, use spread: `[newItem, ...arr]`.

1Understanding Array.unshift()

unshift() is the inverse of shift(). It inserts elements at the front (index 0) and shifts existing elements to higher indices. This is O(n) due to re-indexing. It returns the new length. For non-mutating prepend, use spread: [newItem, ...arr].

šŸ’”

unshift() is O(n) just like shift(). For large arrays with frequent prepends, prefer a data structure designed for it.

editor.html
const queue = ['b', 'c', 'd'];

queue.unshift('a');
console.log(queue); // ['a', 'b', 'c', 'd']

// Multiple items (maintains order)
queue.unshift('x', 'y', 'z');
console.log(queue); // ['x','y','z','a','b','c','d']
localhost:3000

2Practical Example

Here is a real-world application of Array.unshift() showing how it is used in production JavaScript code.

editor.html
// Non-mutating prepend
const original = [3, 4, 5];
const prepended = [1, 2, ...original];
console.log(original);  // [3, 4, 5] unchanged
console.log(prepended); // [1, 2, 3, 4, 5]
localhost:3000

3Best Practices

Follow these guidelines when working with Array.unshift():

1. Use [newItem, ...arr] for non-mutating prepend

2. Use unshift with multiple items: arr.unshift(a, b) vs two calls

3. Prefer spread or concat for functional programming style

āš ļø

Tip: unshift() is O(n) just like shift(). For large arrays with frequent prepends, prefer a data structure designed for it.

editor.html
const queue = ['b', 'c', 'd'];

queue.unshift('a');
console.log(queue); // ['a', 'b', 'c', 'd']

// Multiple items (maintains order)
queue.unshift('x', 'y', 'z');
console.log(queue); // ['x','y','z','a','b','c','d']
localhost:3000

Examples

Example 01Basic Usage
const queue = ['b', 'c', 'd'];

queue.unshift('a');
console.log(queue); // ['a', 'b', 'c', 'd']

// Multiple items (maintains order)
queue.unshift('x', 'y', 'z');
console.log(queue); // ['x','y','z','a','b','c','d']
Example 02Advanced Example
// Non-mutating prepend
const original = [3, 4, 5];
const prepended = [1, 2, ...original];
console.log(original);  // [3, 4, 5] unchanged
console.log(prepended); // [1, 2, 3, 4, 5]

Best Practices

  • Use [newItem, ...arr] for non-mutating prepend
  • Use unshift with multiple items: arr.unshift(a, b) vs two calls
  • Prefer spread or concat for functional programming style

Interview Question

What is the O(n) complexity consequence of using unshift() in a loop?ā–¼

Hint: n calls each O(n) = O(n²).

Each unshift() call is O(n) because it re-indexes all elements. Calling unshift() n times inside a loop makes the overall algorithm O(n²). Instead, push() all elements and reverse() once — O(n) total. Or collect in a new array and spread/concat.

Exercises

MediumPractice using Array.unshift() in a real scenario.
View Solution
const queue = ['b', 'c', 'd'];

queue.unshift('a');
console.log(queue); // ['a', 'b', 'c', 'd']

// Multiple items (maintains order)
queue.unshift('x', 'y', 'z');
console.log(queue); // ['x','y','z','a','b','c','d']

Frequently Asked Questions

What is the O(n) complexity consequence of using unshift() in a loop?ā–¼

Each unshift() call is O(n) because it re-indexes all elements. Calling unshift() n times inside a loop makes the overall algorithm O(n²). Instead, push() all elements and reverse() once — O(n) total. Or collect in a new array and spread/concat.

Related Functions

shiftpushpopArray-Methods