Adding and Removing Items

Adding and Removing from the Front

You already know that push() and pop() modify the end of an array. But what if you want to modify the beginning?

The shift() method removes the first element from an array and returns it, shifting all other elements down by one index. The unshift() method adds one or more elements to the beginning of an array and returns the new length.

const arr = [10, 20, 30];
console.log(arr.shift());
console.log(arr[0]);

10
20

const nums = [2, 3];
console.log(nums.unshift(1));
console.log(nums[0]);

3
1

A Note on Performance

While push and pop are very fast (O(1)), shift and unshift are much slower (O(N)) because every single item in the array must have its index updated. For small arrays, you won’t notice a difference. But for very large arrays (e.g., 100,000 items), using shift inside a loop can severely impact performance.

Here’s a diagram showing why shift requires renumbering:

Mutating the Middle: splice

The splice() method lets you add, remove, or replace elements anywhere in the array. It modifies the array in place and returns an array containing the deleted items.

The syntax is: array.splice(startIndex, deleteCount, item1, item2, ...).

const letters = ['a', 'b', 'c', 'd'];
// Start at index 1, remove 2 items, and insert 'z'
const removed = letters.splice(1, 2, 'z');
console.log("Array is now:", letters.join(','));
console.log("Removed items:", removed.join(','));

Array is now: a,z,d
Removed items: b,c

Copying a Section: slice

The slice() method looks similarly named to splice(), but it behaves very differently. It returns a shallow copy of a portion of an array into a new array object. It does not modify the original array!

The syntax is: array.slice(startIndex, endIndex). Note that the endIndex is exclusive (it extracts up to, but not including, the endIndex).

const colors = ['red', 'green', 'blue', 'yellow'];
// Start at index 1, stop BEFORE index 3
const subColors = colors.slice(1, 3);
console.log("Extracted:", subColors.join(','));
console.log("Original:", colors.join(','));

Extracted: green,blue
Original: red,green,blue,yellow

The slice vs splice Quiz

Because these two methods have such similar names, they are constantly confused by beginners. Remember this golden rule: splice mutates, slice copies.

Can you predict what these two arrays will contain after the following operations?

const arr1 = [1, 2, 3, 4];
arr1.slice(1, 3);

const arr2 = [1, 2, 3, 4];
arr2.splice(1, 2);

console.log(arr1.join(','));
console.log(arr2.join(','));

1,2,3,4
1,4

If you got that wrong, don’t worry—almost everyone does the first time! arr1 remains completely unchanged because slice just created a new array and we didn’t save it anywhere. arr2 was mutated by splice, so the middle elements were destroyed.

const arr = [1, 2, 3];
const copy = arr.slice();
arr.splice(1, 1);