How to Remove the First Item From an Array in JavaScript

Remove the First Item From an Array in JavaScript

In this tutorial, we’ll go through different methods to remove the first item from an array, with detailed examples and explanation.

Method 1: Using shift()

The shift() method removes the first element from an array and returns it. It modifies (mutates) the original array. This method is best used when you want to update the existing array directly.

const fruits = ["apple", "banana", "cherry"];

const removedItem = fruits.shift();
console.log("Updated array:", fruits);
console.log("Removed item:", removedItem);
Updated array: ["banana", "cherry"]
Removed item: apple

Method 2: Using slice() (Immutable Approach)

If you want to remove the first item without changing the original array — ideal in functional programming or frameworks like React — the slice() method works great. Use slice(1) to return a new array excluding the first item.

const fruits = ["apple", "banana", "cherry"];

const trimmedFruits = fruits.slice(1);
console.log("Original array:", fruits);
console.log("Trimmed array:", trimmedFruits);
Original array: ["apple", "banana", "cherry"]
Trimmed array: ["banana", "cherry"]

Method 3: Using Array Destructuring with Rest Syntax

You can also use modern JavaScript destructuring to separate the first element from the rest. This is clean, expressive, and non-mutating — perfect when you're writing modern or declarative code.

const fruits = ["apple", "banana", "cherry"];

const [first, ...rest] = fruits;
console.log("Removed first item:", first);
console.log("Remaining items:", rest);
Removed first item: apple
Remaining items: ["banana", "cherry"]

When Should You Use Each Method?

  • shift(): Use this when you want to modify the original array directly — for example, in simple scripts or queue operations.
  • slice(): Ideal for preserving the original data while returning a modified copy — great for React and Redux logic.
  • Destructuring: Use this for clean syntax, especially when you want to extract the first value and use it separately from the rest.

Comments

💬 Please keep your comment relevant and respectful. Avoid spamming, offensive language, or posting promotional/backlink content.
All comments are subject to moderation before being published.


Loading comments...