How to Add Elements to the Beginning of an Array in JavaScript (2026 Guide)

Adding elements to the beginning of an array, technically called prepending, is a fundamental operation in JavaScript programming. Unlike appending elements to the end using push(), prepending requires shifting all existing elements to higher indices, which has significant implications for performance and memory usage.

What Happens When You Prepend an Element?

When you add an element to the beginning of an array, the JavaScript engine must perform several operations internally. First, it allocates memory for the new array size. Then, it copies each existing element to an index position one higher than its current position. Finally, it inserts the new element at index zero. This process has O(n) time complexity, where n represents the number of elements in the array, meaning execution time grows linearly with array size.

According to the ECMAScript 2024 specification, arrays in JavaScript are exotic objects with special handling for integer-indexed properties. This implementation detail affects how different prepending methods perform across various JavaScript engines like V8 (Chrome, Node.js), SpiderMonkey (Firefox), and JavaScriptCore (Safari).

Why Method Selection Matters

Choosing the right prepending method impacts three critical factors: execution speed, memory consumption, and code maintainability. In enterprise applications built with frameworks like Sencha Ext JS, where data grids may contain thousands of records, the wrong method choice can cause noticeable interface lag. For smaller applications, developer productivity and code readability often outweigh marginal performance differences.

Method 1: Using Array.unshift()

What is Array.unshift()?

The unshift() method is a built-in JavaScript Framework that adds one or more elements to the beginning of an array and returns the new length of the array. This method mutates the original array, meaning it modifies the existing array rather than creating a new one.

Syntax and Basic Usage

    // Syntax
    array.unshift(element1, element2, ..., elementN)

    // Basic example: Adding a single element
    const fruits = ["apple", "banana", "cherry"];
    const newLength = fruits.unshift("mango");

    console.log(fruits);     // Output: ["mango", "apple", "banana", "cherry"]
    console.log(newLength);  // Output: 4

Adding Multiple Elements with unshift()

The unshift() method accepts multiple arguments, allowing you to prepend several elements in a single operation. The elements are inserted in the order they appear in the argument list.

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

    console.log(numbers);  // Output: [1, 2, 3, 4, 5, 6]

How unshift() Works Internally

Understanding the internal mechanics helps explain why unshift() has O(n) time complexity. When you call unshift(), the JavaScript engine executes these steps:

1. Calculate new length: Determine how many elements to add and compute the resulting array size
2. Shift existing elements:

Move each element from index i to index i + numberOfNewElements

3. Insert new elements: Place the new elements at indices 0 through numberOfNewElements – 1
4. Update length property:

Set the array’s length to reflect the new size

5. Return new length: Provide the updated element count to the caller

This shifting operation explains why unshift() becomes slower as array size increases. For an array with 10,000 elements, adding one element at the beginning requires moving all 10,000 existing elements.

When to Use unshift()

Best suited for:

• Arrays with fewer than 1,000 elements
• Situations where mutating the original array is acceptable
• Simple scripts where code brevity is prioritized
• Cases where you need the new array length returned

Avoid when:

• Working with large arrays (10,000+ elements)
• Immutability is required (React state, Redux stores)
• Frequent prepending operations occur in loops
• Memory efficiency is critical

Performance Characteristics

Benchmarks performed using Chrome 122 on an Intel i7-12700K processor with Node.js 20.11.0

Method 2: ES6 Spread Operator

What is the Spread Operator?

The spread operator, represented by three dots (…), is an ES6 feature that expands an iterable (like an array or string) into individual elements. When used with array literals, it provides an elegant way to create new arrays by combining existing arrays with new elements.

How to Prepend Using the Spread Operator

    // Basic syntax for prepending
    const newArray = [...newElements, ...existingArray];

    // Example: Adding elements to the beginning
    const originalArray = [3, 4, 5];
    const elementsToAdd = [1, 2];

    const combinedArray = [...elementsToAdd, ...originalArray];
    console.log(combinedArray);  // Output: [1, 2, 3, 4, 5]

    // Original array remains unchanged
    console.log(originalArray);  // Output: [3, 4, 5]

Adding a Single Element

For prepending a single element, wrap it in an array or place it directly in the array literal:

    const colors = ["green", "blue"];

    // Method 1: Direct placement
    const withRed = ["red", ...colors];
    console.log(withRed);  // Output: ["red", "green", "blue"]

    // Method 2: Using a variable
    const newColor = "yellow";
    const withYellow = [newColor, ...colors];
    console.log(withYellow);  // Output: ["yellow", "green", "blue"]

Spread Operator vs unshift(): Key Differences

Advantages of the Spread Operator

Immutability: The spread operator creates a new array, leaving the original unchanged. This pattern is essential for React state management, Redux reducers, and functional programming paradigms.

    // React state update example
    const [items, setItems] = useState([2, 3, 4]);

    // Correct: Creates new array
    setItems([1, ...items]);

    // Incorrect: Mutates state directly (causes bugs)
    items.unshift(1);  // Never do this with React state

Readability: The spread syntax clearly communicates intent. Reading […newItems, …oldItems] immediately conveys that a new array is being created by combining two sources.

Flexibility: You can easily combine multiple arrays and individual elements in any order:

    const first = [1, 2];
    const middle = [3, 4];
    const last = [5, 6];

    const combined = [...first, ...middle, ...last];
    console.log(combined);  // Output: [1, 2, 3, 4, 5, 6]

    // Mix individual elements and arrays
    const mixed = [0, ...first, 2.5, ...middle];
    console.log(mixed);  // Output: [0, 1, 2, 2.5, 3, 4]

Browser and Environment Support

The spread operator is supported in all modern browsers and JavaScript environments:

• Chrome 46+ (September 2015)
• Firefox 16+ (October 2012)
• Safari 8+ (October 2014)
• Edge 12+ (July 2015)
• Node.js 5+ (October 2015)

For legacy browser support (Internet Explorer 11), transpilation with Babel is required.

Method 3: Array.concat() Method

What is Array.concat()?

The concat() method merges two or more arrays into a new array without modifying the original arrays. This method provides another immutable approach to prepending elements.

Syntax and Usage

    // Syntax
    const newArray = array1.concat(array2, array3, ..., arrayN);

    // Prepending elements using concat
    const original = [3, 4, 5];
    const toAdd = [1, 2];

    const result = toAdd.concat(original);
    console.log(result);    // Output: [1, 2, 3, 4, 5]
    console.log(original);  // Output: [3, 4, 5] (unchanged)

Prepending Single Elements

Unlike unshift(), concat() treats non-array arguments as elements to add:

    const numbers = [2, 3, 4];

    // Prepending a single value
    const withOne = [1].concat(numbers);
    console.log(withOne);  // Output: [1, 2, 3, 4]

    // Alternative: concat accepts mixed arguments
    const extended = [0].concat(1, numbers, 5);
    console.log(extended);  // Output: [0, 1, 2, 3, 4, 5]

concat() vs Spread Operator

Both methods create new arrays without mutation, but they differ in important ways:

    const arr1 = [1, 2];
    const arr2 = [3, 4];

    // These produce identical results
    const spreadResult = [...arr1, ...arr2];
    const concatResult = arr1.concat(arr2);

    // Handling nested arrays differs
    const nested = [[1, 2]];
    const spreadNested = [...nested];
    const concatNested = [].concat(nested);

    // Both create shallow copies
    nested[0].push(3);
    console.log(spreadNested);  // Output: [[1, 2, 3]]
    console.log(concatNested);  // Output: [[1, 2, 3]]

Performance Considerations

In most JavaScript engines, concat() and the spread operator perform similarly for arrays under 10,000 elements. For larger arrays, concat() may have a slight edge in some engines due to internal optimizations, but the difference is rarely significant enough to influence method choice.

    // Performance test setup
    const largeArray = Array.from({ length: 100000 }, (_, i) => i);
    const elementsToAdd = [1, 2, 3];

    // Testing concat
    console.time('concat');
    const concatResult = elementsToAdd.concat(largeArray);
    console.timeEnd('concat');  // ~2.1ms

    // Testing spread
    console.time('spread');
    const spreadResult = [...elementsToAdd, ...largeArray];
    console.timeEnd('spread');  // ~2.3ms

Method 4: Array.prototype.unshift() with Rest Parameters

Combining unshift() with Spread Syntax

The rest parameter syntax allows you to represent an indefinite number of arguments as an array. When combined with unshift(), it enables prepending elements from another array:

    const target = [4, 5, 6];
    const source = [1, 2, 3];

    // Using spread to pass array elements as individual arguments
    target.unshift(...source);
    console.log(target);  // Output: [1, 2, 3, 4, 5, 6]

How This Differs from Direct unshift()

Without the spread operator, passing an array to unshift() inserts the entire array as a single element:

    const numbers = [3, 4];
    const toAdd = [1, 2];

    // Without spread: Adds array as single nested element
    numbers.unshift(toAdd);
    console.log(numbers);  // Output: [[1, 2], 3, 4]

    // Reset and use spread: Adds array elements individually
    const numbers2 = [3, 4];
    numbers2.unshift(...toAdd);
    console.log(numbers2);  // Output: [1, 2, 3, 4]

Use Cases for This Pattern

This combination is useful when you have a dynamically generated array of elements to prepend and you want to mutate the original array:

    function prependItems(targetArray, ...items) {
        targetArray.unshift(...items);
        return targetArray;
    }

    const myArray = [4, 5, 6];
    prependItems(myArray, 1, 2, 3);
    console.log(myArray);  // Output: [1, 2, 3, 4, 5, 6]

Limitations

JavaScript engines impose a maximum argument limit for function calls. Using spread with extremely large arrays can cause a “Maximum call stack size exceeded” error:

    const hugeArray = Array.from({ length: 500000 }, (_, i) => i);
    const target = [];

    // This may throw an error in some environments
    try {
        target.unshift(...hugeArray);
    } catch (error) {
        console.log('Error:', error.message);
        // "Maximum call stack size exceeded"
    }

    // Solution: Use concat or loop for very large arrays 

Method 5: Immutable Approach with slice()

Creating New Arrays with slice()

The slice() method returns a shallow copy of a portion of an array. Combined with other methods, it enables immutable prepending patterns:

    const original = [3, 4, 5];
    const newElement = 1;

    // Create new array with prepended element
    const newArray = [newElement].concat(original.slice());
    console.log(newArray);   // Output: [1, 3, 4, 5]
    console.log(original);   // Output: [3, 4, 5] (unchanged)

Why Use slice() for Immutability?

While the spread operator and concat() already create new arrays, slice() provides additional control:

    // Prepend while also removing elements from the end
    const numbers = [3, 4, 5, 6, 7];
    const toPrepend = [1, 2];

    // Add to beginning, remove last 2 elements
    const modified = [...toPrepend, ...numbers.slice(0, -2)];
    console.log(modified);  // Output: [1, 2, 3, 4, 5]

    // Prepend and take only first 3 of original
    const partial = [...toPrepend, ...numbers.slice(0, 3)];
    console.log(partial);  // Output: [1, 2, 3, 4, 5]

Functional Programming Patterns

In functional programming, pure functions don’t modify their inputs. Here’s a pure function for prepending:

    // Pure function: Returns new array, never modifies input
    function prepend(array, ...elements) {
        return [...elements, ...array];
    }

    const original = [3, 4, 5];
    const result = prepend(original, 1, 2);

    console.log(result);    // Output: [1, 2, 3, 4, 5]
    console.log(original);  // Output: [3, 4, 5]
    console.log(result === original);  // false (different references)

Benefits of Immutable Operations

Immutable array operations provide several advantages in modern JavaScript development:

Predictable state management: When arrays aren’t modified in place, tracking changes becomes straightforward. Each transformation produces a new array, creating a clear history of modifications.

Easier debugging: Immutable operations eliminate side effects. If a function receives an array and returns a new one, you can be confident the input remains unchanged regardless of what the function does.

Concurrent safety: Although JavaScript is single-threaded, asynchronous operations can still cause race conditions with mutable data. Immutable patterns prevent one async operation from unexpectedly modifying data another operation depends on.

Framework compatibility: React, Vue, and other frameworks detect changes through reference comparison. Immutable operations create new references, ensuring the framework recognizes updates:

    // React example: Component re-renders correctly with immutable update
    function TodoList() {
        const [todos, setTodos] = useState(['Task 2', 'Task 3']);
        
        const addUrgentTodo = () => {
            // Correct: Creates new array reference
            setTodos(['Task 1 (Urgent)', ...todos]);
        };
        
        return (
            <div>
                <button onClick={addUrgentTodo}>Add Urgent</button>
                <ul>{todos.map(todo => <li key={todo}>{todo}</li>)}</ul>
            </div>
        );
    }

Performance Benchmarks and Comparisons

Methodology

Performance testing was conducted using the following configuration:

Hardware: Intel Core i7-12700K, 32GB DDR5 RAM
Software: Chrome 122, Node.js 20.11.0, V8 engine 12.2
Testing approach: Each method executed 1,000 times with averaged results
Array contents: Integer values to eliminate object reference overhead

Benchmark Results

Small Arrays (100 elements)

Recommendation: For small arrays, all methods perform essentially identically. Choose based on readability and mutability requirements.

Medium Arrays (10,000 elements)

Recommendation: Differences remain negligible for typical applications. Immutable methods consume roughly double the memory due to creating new arrays.

Large Arrays (100,000 elements)

Recommendation: For large arrays, unshift() shows a measurable advantage if mutation is acceptable. Consider memory constraints when choosing immutable methods.

Very Large Arrays (1,000,000 elements)

*The spread operator in function calls may exceed maximum argument limits with very large arrays.

Recommendation: For arrays exceeding 100,000 elements, consider alternative data structures like linked lists or typed arrays if frequent prepending is required.

Visual Performance Comparison

    Execution Time by Array Size (logarithmic scale)

    Array Size    | unshift() | spread  | concat()
    --------------+-----------+---------+---------
    100           | ▏         | ▏       | ▏
    1,000         | ▎         | ▎       | ▎
    10,000        | █         | █▎      | █▏
    100,000       | ████      | █████▌  | █████
    1,000,000     | ██████████| Too slow for practical use

    Legend: Each █ = ~5ms

Engine-Specific Variations

Performance varies across JavaScript engines:

V8 (Chrome, Node.js, Edge): Excellent optimization for all methods. Spread operator performance improved significantly in V8 version 7.0+.

SpiderMonkey (Firefox): Slightly faster concat() implementation compared to spread for arrays over 50,000 elements.

JavaScriptCore (Safari): Competitive performance across all methods with notable optimization for unshift() in Safari 15+.

Framework-Specific Implementations

React Applications

In React, state immutability is mandatory. Direct mutation doesn’t trigger re-renders:

    import React, { useState } from 'react';

    function NotificationList() {
        const [notifications, setNotifications] = useState([
            { id: 2, text: 'Welcome message' },
            { id: 3, text: 'Profile updated' }
        ]);

        const addUrgentNotification = () => {
            const newNotification = {
                id: Date.now(),
                text: 'Urgent: System maintenance scheduled'
            };
            
            // Correct: Prepend with spread operator
            setNotifications([newNotification, ...notifications]);
        };

        return (
            <div>
                <button onClick={addUrgentNotification}>
                    Add Urgent Notification
                </button>
                <ul>
                    {notifications.map(n => (
                        <li key={n.id}>{n.text}</li>
                    ))}
                </ul>
            </div>
        );
    }

Vue.js Applications

Vue 3’s reactivity system tracks array mutations but recommends immutable patterns for complex state:

    import { ref } from 'vue';

    export default {
        setup() {
            const messages = ref(['Hello', 'World']);

            const prependMessage = (text) => {
                // Option 1: Mutative (Vue detects this)
                messages.value.unshift(text);

                // Option 2: Immutable (preferred for complex state)
                messages.value = [text, ...messages.value];
            };

            return { messages, prependMessage };
        }
    };

Angular Applications

Angular applications typically use services for state management:

    import { Injectable } from '@angular/core';
    import { BehaviorSubject } from 'rxjs';

    @Injectable({ providedIn: 'root' })
    export class TodoService {
        private todosSubject = new BehaviorSubject(['Task 2', 'Task 3']);
        todos$ = this.todosSubject.asObservable();

        prependTodo(task: string): void {
            const currentTodos = this.todosSubject.getValue();
            // Immutable prepend for predictable state
            this.todosSubject.next([task, ...currentTodos]);
        }
    }

Sencha Ext JS Applications

Sencha Ext JS provides built-in store management with array prepending capabilities:

    // Creating a store with initial data
    const store = Ext.create('Ext.data.Store', {
        fields: ['id', 'name', 'priority'],
        data: [
            { id: 2, name: 'Review code', priority: 'medium' },
            { id: 3, name: 'Write tests', priority: 'low' }
        ]
    });

    // Prepending a record using insert at index 0
    store.insert(0, {
        id: 1,
        name: 'Critical bug fix',
        priority: 'high'
    });

    // For grid panels, the UI updates automatically
    const grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            { text: 'ID', dataIndex: 'id' },
            { text: 'Task', dataIndex: 'name', flex: 1 },
            { text: 'Priority', dataIndex: 'priority' }
        ],
        renderTo: Ext.getBody()
    });

    // Prepending triggers grid refresh
    store.insert(0, { id: 0, name: 'Emergency task', priority: 'critical' });

Node.js Backend Applications

Server-side JavaScript often handles large datasets:

    // Efficient prepending for logging systems
    class LogBuffer {
        constructor(maxSize = 1000) {
            this.logs = [];
            this.maxSize = maxSize;
        }

        addLog(entry) {
            // Prepend new log entry
            this.logs.unshift({
                timestamp: Date.now(),
                ...entry
            });

            // Maintain buffer size
            if (this.logs.length > this.maxSize) {
                this.logs.pop();
            }
        }

        getRecentLogs(count = 10) {
            return this.logs.slice(0, count);
        }
    }

    const logger = new LogBuffer();
    logger.addLog({ level: 'info', message: 'Server started' });
    logger.addLog({ level: 'warn', message: 'High memory usage' });

Common Mistakes and How to Avoid Them

Mistake 1: Using push() Instead of unshift()

One of the most common errors is confusing push() (adds to end) with unshift() (adds to beginning):

    const tasks = ['Task 2', 'Task 3'];

    // Wrong: Adds to end, not beginning
    tasks.push('Task 1');
    console.log(tasks);  // ['Task 2', 'Task 3', 'Task 1']

    // Correct: Adds to beginning
    const tasks2 = ['Task 2', 'Task 3'];
    tasks2.unshift('Task 1');
    console.log(tasks2);  // ['Task 1', 'Task 2', 'Task 3']

How to remember: “Unshift” removes the shift, placing the element at the unshifted (first) position. “Push” pushes to the end, like pushing something away.

Mistake 2: Mutating State in React

Direct mutation doesn’t trigger React re-renders:

    // Wrong: Mutates state directly
    const [items, setItems] = useState([2, 3, 4]);

    const addItem = () => {
        items.unshift(1);  // Mutates existing array
        setItems(items);   // Same reference, no re-render
    };

    // Correct: Create new array
    const addItemCorrect = () => {
        setItems([1, ...items]);  // New array reference
    };

Mistake 3: Forgetting unshift() Returns Length, Not Array

The return value of unshift() is the new array length, not the modified array:

    const numbers = [2, 3, 4];

    // Wrong: Expecting array
    const result = numbers.unshift(1);
    console.log(result);  // 4 (length, not array)

    // Correct: Use the original array reference
    numbers.unshift(1);
    console.log(numbers);  // [1, 2, 3, 4]

    // Or chain using comma operator (not recommended for readability)
    const arr = [2, 3, 4];
    console.log((arr.unshift(1), arr));  // [1, 2, 3, 4]

Mistake 4: Inserting Array as Single Element

Passing an array to unshift() without spread creates nested arrays:

    const main = [3, 4, 5];
    const toAdd = [1, 2];

    // Wrong: Creates nested array
    main.unshift(toAdd);
    console.log(main);  // [[1, 2], 3, 4, 5]

    // Correct: Spread the array
    const main2 = [3, 4, 5];
    main2.unshift(...toAdd);
    console.log(main2);  // [1, 2, 3, 4, 5]

Mistake 5: Ignoring Performance with Large Arrays

Prepending to large arrays in loops creates severe performance issues:

    // Wrong: O(n²) complexity
    const result = [];
    for (let i = 0; i < 10000; i++) {
        result.unshift(i);  // Shifts all elements each iteration
    }

    // Correct: Build forward, then reverse
    const result2 = [];
    for (let i = 0; i < 10000; i++) {
        result2.push(i);
    }
    result2.reverse();

    // Or: Use unshift with batched inserts
    const result3 = [];
    const batch = [];
    for (let i = 0; i < 10000; i++) {
        batch.push(i);
    }
    result3.unshift(...batch);

Mistake 6: Assuming Shallow Copy Creates Deep Copy

Both spread and concat() create shallow copies:

    const original = [{ id: 1 }, { id: 2 }];
    const newItem = { id: 0 };

    const combined = [newItem, ...original];

    // Modifying nested object affects both arrays
    original[0].id = 999;
    console.log(combined[1].id);  // 999 (same reference)

    // Solution: Deep clone when needed
    const deepCombined = [
        newItem,
        ...original.map(item => ({ ...item }))
    ];

Real-World Application Scenarios

Scenario 1: Activity Feed with Priority Items

Social media applications often display feeds where new or promoted content appears at the top:

    class ActivityFeed {
        constructor() {
            this.activities = [];
        }

        // Standard posts go to top
        addActivity(activity) {
            this.activities = [{
                ...activity,
                id: Date.now(),
                timestamp: new Date().toISOString()
            }, ...this.activities];
            
            this.trimToLimit(100);
        }

        // Sponsored content goes to very top
        addSponsored(activity) {
            this.activities = [{
                ...activity,
                id: Date.now(),
                sponsored: true,
                timestamp: new Date().toISOString()
            }, ...this.activities];
        }

        // Maintain feed size
        trimToLimit(max) {
            if (this.activities.length > max) {
                this.activities = this.activities.slice(0, max);
            }
        }
    }

    const feed = new ActivityFeed();
    feed.addActivity({ user: 'alice', text: 'Hello world!' });
    feed.addSponsored({ advertiser: 'TechCorp', text: 'Check out our product!' });
    feed.addActivity({ user: 'bob', text: 'Great weather today' });

Scenario 2: Undo/Redo History Stack

Applications with undo functionality maintain action history:

    class UndoManager {
        constructor() {
            this.history = [];
            this.redoStack = [];
            this.maxHistory = 50;
        }

        execute(action) {
            // Save current state for undo
            this.history = [action, ...this.history].slice(0, this.maxHistory);
            // Clear redo stack on new action
            this.redoStack = [];
            
            action.execute();
        }

        undo() {
            if (this.history.length === 0) return;

            const [lastAction, ...rest] = this.history;
            this.history = rest;
            this.redoStack = [lastAction, ...this.redoStack];
            
            lastAction.undo();
        }

        redo() {
            if (this.redoStack.length === 0) return;

            const [action, ...rest] = this.redoStack;
            this.redoStack = rest;
            this.history = [action, ...this.history];
            
            action.execute();
        }
    }

Scenario 3: Real-Time Notification System

Notifications typically appear newest-first:

    import { useState, useCallback } from 'react';

    function useNotifications(maxVisible = 5) {
        const [notifications, setNotifications] = useState([]);

        const addNotification = useCallback((notification) => {
            const newNotification = {
                id: Date.now(),
                createdAt: new Date(),
                read: false,
                ...notification
            };

            setNotifications(prev => 
                [newNotification, ...prev].slice(0, maxVisible)
            );

            // Auto-dismiss after delay if specified
            if (notification.autoDismiss) {
                setTimeout(() => {
                    dismissNotification(newNotification.id);
                }, notification.autoDismiss);
            }
        }, [maxVisible]);

        const dismissNotification = useCallback((id) => {
            setNotifications(prev => 
                prev.filter(n => n.id !== id)
            );
        }, []);

        return { notifications, addNotification, dismissNotification };
    }

Scenario 4: Live Data Grid Updates

Enterprise applications often prepend new records to data grids:

    // Sencha Ext JS implementation
    Ext.define('App.store.LiveOrders', {
        extend: 'Ext.data.Store',
        alias: 'store.liveorders',

        model: 'App.model.Order',

        // WebSocket connection for real-time updates
        initWebSocket() {
            this.socket = new WebSocket('wss://api.example.com/orders');

            this.socket.onmessage = (event) => {
                const newOrder = JSON.parse(event.data);
                
                // Prepend new order to store (appears at top of grid)
                this.insert(0, newOrder);

                // Maintain maximum records
                if (this.getCount() > 1000) {
                    this.removeAt(this.getCount() - 1);
                }
            };
        }
    });

Browser Compatibility Reference

Array.unshift() Support

The unshift() method has universal support across all browsers and JavaScript environments:

Spread Operator Support

The spread operator requires ES6 support:

Array.concat() Support

Like unshift(), concat() has universal support:

Legacy Browser Support Strategy

For projects requiring Internet Explorer 11 support, use Babel to transpile spread operator syntax:

    // Before transpilation (ES6+)
    const combined = [...newItems, ...existingItems];

    // After Babel transpilation (ES5)
    var combined = [].concat(newItems, existingItems);

Configure Babel with @babel/preset-env to automatically handle these transformations based on your browser targets.

Frequently Asked Questions

What is the fastest way to add an element to the beginning of a JavaScript array?

For arrays with fewer than 10,000 elements, unshift() provides the fastest performance when mutation is acceptable. For immutable operations, the spread operator offers the best combination of performance and readability. For very large arrays (100,000+ elements), consider using concat() or building a new array with a loop.

Does unshift() modify the original array?

Yes, unshift() modifies the original array in place. It adds elements to the beginning and shifts existing elements to higher indices. If you need to preserve the original array, use the spread operator or concat() to create a new array instead.

How do I add multiple elements to the beginning of an array at once?

You can add multiple elements using any of these methods:

    const arr = [4, 5, 6];
    
    // Method 1: unshift with multiple arguments
    arr.unshift(1, 2, 3);
    
    // Method 2: Spread operator
    const newArr = [1, 2, 3, ...arr];
    
    // Method 3: concat
    const newArr2 = [1, 2, 3].concat(arr);

What is the difference between push() and unshift()?

push() adds elements to the end of an array, while unshift() adds elements to the beginning. Both methods mutate the original array and return the new length.

How do I prepend to an array in React without mutation?

Always create a new array using the spread operator:

setItems([newItem, ...items]);

Never use unshift() directly on React state, as it won’t trigger re-renders correctly.

What is the time complexity of unshift()?

unshift() has O(n) time complexity, where n is the number of elements in the array. This is because all existing elements must be shifted to make room for new elements at the beginning.

Can I use unshift() with TypeScript?

Yes, unshift() is fully compatible with TypeScript. TypeScript infers element types from your array declaration:

    const numbers: number[] = [2, 3, 4];
    numbers.unshift(1);  // Valid
    numbers.unshift("one");  // Error: Argument of type 'string' is not assignable

How do I add an element to the beginning of an array without using unshift()?

Use the spread operator or concat():

    const arr = [2, 3, 4];
    const newArr = [1, ...arr];  // Spread operator
    // or
    const newArr2 = [1].concat(arr);  // concat

What happens if I call unshift() on an empty array?

Calling unshift() on an empty array simply adds the elements, returning the new length:

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

Is there a limit to how many elements I can prepend?

JavaScript doesn’t impose a hard limit on array size, but practical limits exist. Arrays can contain up to 2^32 – 1 elements (approximately 4.29 billion). However, memory constraints typically limit practical array sizes long before reaching this theoretical maximum. When using spread syntax in function calls (arr.unshift(…largeArray)), you may encounter call stack limits with arrays exceeding 100,000-500,000 elements.

Conclusion

Adding elements to the beginning of a JavaScript array is a fundamental operation with multiple implementation options. The optimal choice depends on your specific requirements around mutation, performance, and code style.

For small arrays and simple scripts, unshift() provides a straightforward solution with minimal overhead. When immutability matters—particularly in React, Vue, or functional programming contexts—the spread operator offers an elegant syntax that clearly communicates intent.

For enterprise applications handling large datasets, understanding the O(n) time complexity of prepending operations helps you make informed architectural decisions. Consider alternative data structures when frequent prepending to large collections is a core requirement.

Frameworks like Sencha Ext JS provide built-in abstractions that handle array manipulation efficiently within their data stores, often eliminating the need for manual array operations while ensuring optimal performance and proper UI updates.

By matching your method choice to your specific use case—considering factors like array size, mutation requirements, and framework conventions—you can write JavaScript code that is both performant and maintainable.

For more JavaScript best practices and enterprise UI development resources, explore the Sencha Resource Center or try Ext JS free to build high-performance web applications.