How do you add, remove, and update elements in an array?

TL;DR

For in-place changes, use push() / unshift() to add, pop() / shift() to remove at the ends, splice() for arbitrary ranges, and index assignment to update. These mutate the original array. When callers rely on immutable updates, create a new array with spread, slice(), filter(), map(), toSpliced(), or with() instead. Choose based on ownership, not a universal performance rule.

let arr = [1, 2, 3];

// Add elements
arr.push(4); // [1, 2, 3, 4]
arr.unshift(0); // [0, 1, 2, 3, 4]
arr.splice(2, 0, 1.5); // [0, 1, 1.5, 2, 3, 4]

// Remove elements
arr.pop(); // [0, 1, 1.5, 2, 3]
arr.shift(); // [1, 1.5, 2, 3]
arr.splice(1, 1); // [1, 2, 3]

// Update elements
arr[1] = 5; // [1, 5, 3]
console.log(arr); // Final state: [1, 5, 3]

Note: If you try to console.log(arr) after each operation in some environments (like Chrome DevTools), you may only see the final state of arr. This happens because the console sometimes keeps a live reference to the array instead of logging its state at the exact moment. To see intermediate states properly, store snapshots using console.log([...arr]) or print values immediately after each operation.

Adding elements to an array

Using push

The push method adds one or more elements to the end of an array and returns the new length of the array.

let arr = [1, 2, 3];
console.log(arr.push(4)); // Output: 4 (new length of array)
console.log(arr); // [1, 2, 3, 4]

Using unshift

The unshift method adds one or more elements to the beginning of an array and returns the new length of the array.

let arr = [1, 2, 3];
console.log(arr.unshift(0)); // Output: 4 (new length of array)
console.log(arr); // [0, 1, 2, 3]

Using splice

The splice method can add elements at any position in the array. The first parameter specifies the index at which to start changing the array, the second parameter specifies the number of elements to remove, and the rest are the elements to add.

let arr = [1, 2, 3];
arr.splice(1, 0, 1.5); // Removes no element, but adds 1.5
console.log(arr); // [1, 1.5, 2, 3]

Removing elements from an array

Using pop

The pop method removes the last element from an array and returns that element.

let arr = [1, 2, 3];
console.log(arr.pop()); // Output: 3
console.log(arr); // [1, 2]

Using shift

The shift method removes the first element from an array and returns that element.

let arr = [1, 2, 3];
console.log(arr.shift()); // Output: 1
console.log(arr); // [2, 3]

Using splice

The splice method can also remove elements from any position in the array. The first parameter specifies the index at which to start changing the array, and the second parameter specifies the number of elements to remove.

let arr = [1, 2, 3, 4];
console.log(arr.splice(1, 2)); // Output: [2, 3]
console.log(arr); // [1, 4]

Updating elements in an array

Direct assignment

You can update elements in an array by directly accessing the index and assigning a new value.

let arr = [1, 2, 3];
arr[1] = 5;
console.log(arr); // [1, 5, 3]

Non-mutating alternatives

const original = ['a', 'b', 'c'];

const appended = [...original, 'd'];
const removed = original.filter((_, index) => index !== 1);
const updated = original.with(1, 'B');
const inserted = original.toSpliced(1, 0, 'new');

console.log(original); // ['a', 'b', 'c']
console.log(appended); // ['a', 'b', 'c', 'd']
console.log(removed); // ['a', 'c']
console.log(updated); // ['a', 'B', 'c']
console.log(inserted); // ['a', 'new', 'b', 'c']

Spread and these copying methods are shallow: nested objects remain shared unless they are copied separately. Also remember that splice() returns the removed elements, while toSpliced() returns the new array.

Further reading

• MDN Web Docs: Array.prototype.push
• MDN Web Docs: Array.prototype.unshift
• MDN Web Docs: Array.prototype.splice
• MDN Web Docs: Array.prototype.pop
• MDN Web Docs: Array.prototype.shift
• MDN Web Docs: Array.prototype.with
• MDN Web Docs: Array.prototype.toSpliced

Exercises

const values = [1, 2, 3];
const removed = values.splice(1, 1, 8, 9);
values.push(10);

console.log(values.join(','), removed.join(','));