javascript remove first element from array: practical guide

Master removing the first element from a JavaScript array with mutating and immutable methods. Compare shift, splice, slice, and destructuring, with practical examples.

JavaScripting Team

March 29, 2026·5 min read

JavaScript Tutorials Learn JavaScript Arrays Frontend

Quick AnswerDefinition

javascript remove first element from array is commonly done with shift() or by creating a new array without the first item. If you need to mutate the original array, use shift() or splice(0,1). For immutability, prefer slice(1) or the destructuring form. This guide compares options with practical examples.

javascript remove first element from array — overview and motivation

Removing the first item from an array is a frequent operation in frontend and Node.js logic. Your choice depends on whether you want to mutate the original data or produce a new array. In many practical apps, mutating the array is fine for short-lived state, but immutable patterns reduce bugs in complex UI state. The classic approaches are: shift() (mutates) and slice(1) (immutable). The following examples illustrate the core techniques in JavaScript.

JavaScript

// Mutating approach: removes and returns the first element
let numbers = [10, 20, 30];
let removed = numbers.shift();
console.log(numbers); // [20, 30]
console.log(removed); // 10

JavaScript

// Immutable approach: creates a new array without the first item
const items = [1, 2, 3, 4];
const withoutFirst = items.slice(1);
console.log(items); // [1, 2, 3, 4]
console.log(withoutFirst); // [2, 3, 4]

The shift() method mutates the original array and returns the removed element.
The slice(1) method returns a new array starting from index 1, leaving the original intact.

Variations: you can also use destructuring: const [first, ...rest] = arr; to isolate the rest without mutating the source.

Mutating vs non-mutating approaches

Mutating removal with shift() is concise and efficient for small arrays or when you truly want to update the original collection. In contrast, splice(0, 1) also mutates, but it’s more flexible if you want to remove multiple items at once or insert new ones in their place. For safety in functional code, immutable patterns are preferred.

JavaScript

// Mutating with splice (remove exactly one item at index 0)
let arr1 = [9, 8, 7];
let spliced = arr1.splice(0, 1);
console.log(arr1); // [8, 7]
console.log(spliced); // [9]

JavaScript

// Immutable alternatives
const original = [5, 6, 7];
const afterSlice = original.slice(1); // [6, 7]
const afterSpread = [...original].slice(1); // [6, 7]

Use slice or spread syntax when you must preserve the original array.
Use splice when you need to mutate in place and possibly insert more elements.

Immutable patterns: create a new array without the first element

Immutable patterns help keep data flow predictable in functions and components. The simplest approach is slice(1) which creates a new array. Destructuring also provides a clean, readable pattern: [first, ...rest] = arr.

JavaScript

const original = [10, 20, 30, 40];
const [first, ...rest] = original;
console.log(first); // 10
console.log(rest); // [20, 30, 40]

JavaScript

// Alternative immutable approach with explicit copy
const newArr = original.slice(1);

Destructuring is great for readability when you need both the first element and the remainder.
The spread operator can be used to clone and then slice or reassemble arrays as needed.

Edge cases and guardrails

Always consider edge cases when removing from arrays. Empty arrays should be handled gracefully. When validating input, ensure you’re operating on an actual array to avoid runtime errors. Example guards:

JavaScript

function removeFirstImmutable(arr) {
  if (!Array.isArray(arr)) throw new TypeError('Expected an array');
  return arr.slice(1);
}

JavaScript

function removeFirstMutating(arr) {
  if (!Array.isArray(arr)) throw new TypeError('Expected an array');
  if (arr.length === 0) return arr; // nothing to remove
  arr.shift();
  return arr;
}

If the array has a single element, both slice(1) and destructuring will yield an empty array or an empty remainder, which is often desirable behavior.

Performance considerations and best practices

In real-world applications, the performance difference between mutating and immutable approaches becomes noticeable with large arrays or in tight loops. Shifting or splicing at the start requires reindexing, which can be O(n) in the length of the array. Immutable patterns copy elements, so they may incur allocation overhead. Choose based on the context: small, frequently updated arrays may favor mutating methods, while stateful UIs benefit from immutability and predictability.

JavaScript

// Benchmark-like illustration (conceptual, not a real benchmark)
const large = Array.from({length: 10000}, (_, i) => i);
console.time('shift'); large.shift(); console.timeEnd('shift');

const large2 = Array.from({length: 10000}, (_, i) => i);
console.time('slice'); const rest = large2.slice(1); console.timeEnd('slice');

When developing library code, document the chosen approach clearly to avoid surprises for consumers.
Consider using immutable patterns in stateful components (e.g., React) to simplify debugging and time-travel features.

Common pitfalls and quick fixes

Pitfall: assuming shift() on an empty array throws an error. It returns undefined. Fix: check length before mutating.

JavaScript

let data = [];
const removed = data.length ? data.shift() : undefined;
console.log(removed); // undefined

Pitfall: mutating an array passed as a function argument without returning it. Fix: return the mutated array for chaining or preserve the original.

JavaScript

function trimFirst(arr) {
  if (!Array.isArray(arr)) throw new TypeError('Expected an array');
  arr.shift();
  return arr;
}

Pitfall: confusing the removed value with the remaining array. Remember: shift() returns the removed value, not the array.

Practical recipes for real-world usage

A typical pattern is to prefer immutable transformations in functional code, especially when dealing with stateful UI. Here are concise recipes you can copy:

JavaScript

// Recipe A: Immutable removal with slice
const originalA = [100, 200, 300];
const withoutFirstA = originalA.slice(1);

// Recipe B: Destructure for clarity
const [head, ...tail] = originalA;

If you must mutate in place (e.g., in a tight loop), keep a clear contract and test thoroughly to avoid subtle bugs.

Always document which method you chose and why, to help teammates follow the data flow.

Steps

Estimated time: 20-40 minutes

1
Choose approach (mutating vs immutable)
Assess whether you need to mutate the original array or preserve it. For UI state, immutability is preferred; for simple scripts, mutation can be acceptable.
Tip: Document your intent to avoid confusion later.
2
Implement mutating removal
If mutation is desired, implement with `shift()` or `splice(0, 1)` and log results to verify.
Tip: Prefer `shift()` for a single element removal.
3
Implement immutable removal
Produce a new array without the first element using `slice(1)` or destructuring.
Tip: Destructuring improves readability.
4
Guard against edge cases
Handle empty arrays and non-array inputs with guards to avoid runtime errors.
Tip: Validate inputs early.
5
Benchmark and choose
Run small benchmarks if performance matters; document the chosen approach.
Tip: Prefer immutability in stateful apps.

Pro Tip: Prefer immutable patterns in functional code to avoid side effects.

Warning: Shifting elements on very large arrays can be costly due to reindexing.

Note: Shift() returns the removed element, not the array.

Pro Tip: Use destructuring for readability when you need the rest of the items.

Prerequisites

Required

Node.js 18+ or modern browser environment↗
Required
Fundamental knowledge of JavaScript arrays and destructuring
Required

Optional

Code editor or IDE↗
Optional
Command-line experience (optional but helpful)
Optional

Keyboard Shortcuts

Action	Shortcut
CopyIn editor or terminal	`Ctrl`+`C`
PasteIn editor or terminal	`Ctrl`+`V`
Comment selectionIn most editors	`Ctrl`+`/`
Format documentIn code editor	`⇧`+`Alt`+`F`

Questions & Answers

How do I remove the first element without mutating the original array?

Use slice(1) to produce a new array without the first item, or apply destructuring to obtain the rest. These patterns keep the original array intact and are common in functional styles.

What does Array.prototype.shift() return?

Shift returns the removed element and mutates the array. For an empty array, it returns undefined.

Is splice(0,1) mutating?

Yes, splice mutates the original array and returns an array containing the removed element(s).

How can I remove the first element from a nested array?

Apply the same removal to the inner array, e.g., outer[0].shift() for mutation or outer[0].slice(1) for immutability.

What about performance considerations for large arrays?

Mutating at the start can cost reindexing work; prefer immutable patterns when performance matters and you rely on frequent reads.

What to Remember

Shift mutates and returns the removed value
Slice(1) creates a new array without the first element
Destructuring isolates the rest of the elements
Choose immutability for safer, more predictable code

← More in JavaScript Arrays

javascript remove first element from array — overview and motivation

Mutating vs non-mutating approaches

Immutable patterns: create a new array without the first element

Edge cases and guardrails

Performance considerations and best practices

Common pitfalls and quick fixes

Practical recipes for real-world usage

Steps

Choose approach (mutating vs immutable)

Implement mutating removal

Implement immutable removal

Guard against edge cases

Benchmark and choose

Prerequisites

Keyboard Shortcuts

Questions & Answers

What to Remember

Related Articles