Introduction

Working with arrays is at the heart of JavaScript development, whether you're managing UI state in React or handling data on the server. Yet many developers focus on appending items to the end of an array and overlook the importance of efficiently adding elements to the front. Why does inserting an item at index 0 matter, and how can you do it cleanly and performantly?

The simplest answer is to use methods like unshift or the modern spread syntax. Understanding these techniques not only prevents unintended side effects but also helps you choose the right approach for your use case—keeping your code readable and your app snappy.

Using unshift

JavaScript’s built-in Array.prototype.unshift() method is the traditional way to add one or more elements to the start of an array. It mutates the original array and returns the new length:

const fruits = ['apple', 'banana'];
const newLength = fruits.unshift('orange');
console.log(fruits);    // ['orange', 'apple', 'banana']
console.log(newLength); // 3

Tip: Because unshift modifies the existing array, avoid this in contexts where immutability matters (for example, React state updates).

When to use:

• Quick scripts or utility functions where mutation is acceptable
• Performance-critical loops (in some engines, unshift can be very fast)

“Mutating the original array is fine, but if you need a copy with the new element, consider immutable patterns.”

Spread syntax for immutability

Modern JavaScript lets you use the spread syntax (...) to create a new array with the element in front, leaving the original untouched:

const todos = ['task2', 'task3'];
const newTodos = ['task1', ...todos];
console.log(newTodos); // ['task1', 'task2', 'task3']

This approach is especially popular in React reducers:

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [action.payload, ...state];
    default:
      return state;
  }
}

Pros:

• Keeps the original array intact
• Works well with pure functions and state management

Cons:

• Can be slightly slower for very large arrays, as it allocates a new one

Using splice for fine control

Array.prototype.splice() is a flexible method that can add or remove elements at any position. To insert at the front:

const numbers = [2, 3, 4];
numbers.splice(0, 0, 1);
console.log(numbers); // [1, 2, 3, 4]

You can insert multiple items too:

numbers.splice(0, 0, -1, 0);
console.log(numbers); // [-1, 0, 1, 2, 3, 4]

Use splice when you need more control (e.g., removing or replacing at the same time). But remember, it mutates the original array.

Performance comparison

When you’re working with large arrays or tight loops, performance matters. Below is a rough benchmark comparing unshift, spread syntax, and splice for inserting a single element at the front of a 100k-element array:

Tip: Microbenchmarks vary by browser/engine. Always test in your target environment.

Choose unshift or splice if you need raw speed and don’t mind mutation. Go with spread syntax when immutability and clarity are top priorities.

Immutable patterns and libraries

If you’re working in an environment where immutability is critical (like Redux or functional programming), you might lean on helper libraries:

• Immer: Write mutative code under the hood but keep state immutable.
• Lodash: Use methods like _.concat or _.clone + push

Example with Immer:

import produce from 'immer';

const newState = produce(oldState, draft => {
  draft.items.unshift(newItem);
});

This feels like mutation but guarantees immutability for you.

Real-world use cases

1. Event queues: Enqueue new events at the front if they have higher priority.
2. Undo stacks: Push the latest change to the front so it’s the first to be undone.
3. Chat applications: Display the most recent messages first by pushing them front.

function enqueueHighPriority(queue, item) {
  return [item, ...queue];
}

By picking the right method, you keep your data flow predictable and performant.

Conclusion

Adding elements to the front of a JavaScript array is simple but comes with choices: mutation vs. immutability, raw speed vs. clarity. Use unshift or splice for performance-critical, in-place updates. Opt for spread syntax or libraries like Immer when maintaining immutable state is more important.

Understanding these options helps you write cleaner code and avoid bugs in state management. Next time you need to push to the front of an array, you’ll know exactly which tool fits your scenario.