Skip to main content

How to Remove the First Element from an Array in JavaScript

Removing the first element from an array is a common operation, often used in processing queues or simply manipulating lists of data. JavaScript provides several ways to achieve this, but it's critical to understand the difference between methods that mutate (modify) the original array and those that create a new array, leaving the original untouched.

This guide will demonstrate the best modern methods for removing the first element and the first N elements from an array, with a clear focus on the recommended non-mutating (immutable) approaches.

The Core Task: Mutating vs. Non-Mutating​

Before choosing a method, you must decide if you want to change the original array or create a new one.

  • Non-mutating (Immutable): Creates a new array with the desired changes. The original array is left untouched. This is the recommended best practice in modern JavaScript as it leads to more predictable and less error-prone code.
  • Mutating: Modifies the original array in place. This is more memory-efficient as it doesn't create a new array, but it can cause unintended side effects if other parts of your code rely on the original array.

Removing the First Element​

The Array.prototype.slice() method is the perfect tool for creating a new array without the first element. It extracts a section of an array and returns it as a new array without modifying the original.

Problem: you have an array and want a new array that contains all elements except the first one.

// Problem: Get a new array containing just ['b', 'c'].
let letters = ['a', 'b', 'c'];

Solution:

let letters = ['a', 'b', 'c'];

// slice(1) starts the new array from index 1 (the second element).
let newLetters = letters.slice(1);

console.log(newLetters); // Output: ['b', 'c']
console.log(letters);    // Output: ['a', 'b', 'c'] (The original is unchanged)

Output:

['b', 'c']
['a', 'b', 'c'] (The original is unchanged)

The Mutating Method: shift()​

The Array.prototype.shift() method removes the first element from an array and returns that removed element. This method modifies the original array.

Solution

let letters = ['a', 'b', 'c'];

let firstElement = letters.shift();

console.log(firstElement); // Output: a
console.log(letters);      // Output: ['b', 'c'] (The original is now changed)

Output:

a
['b', 'c']
note

shift() is useful when you are treating an array like a queue and need to both get and remove the first item in one step.

Removing the First N Elements​

The same principles apply when you need to remove multiple elements from the beginning of an array.

You can use slice() to remove any number of elements from the start of an array by simply adjusting the starting index.

Solution:

let numbers = [10, 20, 30, 40, 50];

// Remove the first 3 elements by starting the slice at index 3.
let newNumbers = numbers.slice(3);

console.log(newNumbers); // Output: [40, 50]
console.log(numbers);    // Output: [10, 20, 30, 40, 50] (Unchanged)

Output:

[40, 50]
[10, 20, 30, 40, 50]

The Mutating Method: splice()​

The Array.prototype.splice() method can remove elements from any position in an array, modifying it in place.

array.splice(startIndex, deleteCount)

Solution:

let numbers = [10, 20, 30, 40, 50];

// At index 0, remove 3 elements.
let removedElements = numbers.splice(0, 3);

console.log(removedElements); // Output: [10, 20, 30]
console.log(numbers);         // Output: [40, 50] (The original is now changed)

Output:

[10, 20, 30]
[40, 50]

Conclusion​

Removing elements from the beginning of an array is a simple task with clear, modern solutions that let you choose between mutating and non-mutating approaches.

  • To get a new array without the first element(s), the slice() method is the recommended best practice. It is non-mutating and aligns with modern functional programming patterns.
    • array.slice(1) for the first element.
    • array.slice(N) for the first N elements.
  • To modify the original array in place, use shift() to remove the first element or splice() to remove the first N elements. Use these methods with caution, as they can cause side effects.

Table of Contents