# JavaScript Push to Front of Array

![JavaScript Push to Front of Array](https://raw.githubusercontent.com/mateenkiani/milddev-resources/main/images/1751265541183_happy-lee-Ep_NHbX2Ae8-unsplash.jpg)

## 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:

```js
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:

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

This approach is especially popular in React reducers:

```js
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:

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

You can insert multiple items too:

```js
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:

| Method       | Time (ms) | Mutates? |
|--------------|-----------|----------|
| unshift      | 5.8       | Yes      |
| splice       | 6.1       | Yes      |
| spread syntax| 8.3       | No       |

> **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:

```js
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.

```js
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.