Array Mutation Methods: push, pop, splice, sort

Easy

Mutating methods modify the original array in place. Understanding which methods mutate (vs return new arrays) is crucial for preventing bugs. This concept covers push, pop, shift, unshift, splice, sort, reverse, and fill - all of which change the array they operate on.

Interactive Visualization

mutation Methods

1
2
3

Key Points

  • Mutating methods change the original array
  • push/pop work at end, shift/unshift work at beginning
  • splice can add, remove, or replace elements at any position
  • sort and reverse rearrange elements in place
  • Return values vary: push returns new length, pop returns removed element
  • Know time complexity: push/pop O(1), shift/unshift/splice O(n)

Code Examples

push and pop (End Operations)

const arr = [1, 2, 3];

// push - adds to end, returns new length
const newLength = arr.push(4, 5);
console.log(arr);        // [1, 2, 3, 4, 5]
console.log(newLength);  // 5

// pop - removes from end, returns removed element
const last = arr.pop();
console.log(last);       // 5
console.log(arr);        // [1, 2, 3, 4]

// O(1) time - very fast

push and pop work at the end of array. O(1) time complexity.

shift and unshift (Beginning Operations)

const arr = [2, 3, 4];

// unshift - adds to beginning, returns new length
const newLength = arr.unshift(1);
console.log(arr);        // [1, 2, 3, 4]
console.log(newLength);  // 4

// shift - removes from beginning, returns removed element
const first = arr.shift();
console.log(first);      // 1
console.log(arr);        // [2, 3, 4]

// O(n) time - must reindex all elements!

shift and unshift work at the beginning. O(n) time - slower for large arrays.

splice - Swiss Army Knife

const arr = ['a', 'b', 'c', 'd', 'e'];

// Remove elements
// splice(startIndex, deleteCount)
const removed = arr.splice(1, 2);  // Remove 2 elements starting at index 1
console.log(arr);      // ['a', 'd', 'e']
console.log(removed);  // ['b', 'c']

// Insert elements
arr.splice(1, 0, 'x', 'y');  // Insert at index 1, remove 0
console.log(arr);      // ['a', 'x', 'y', 'd', 'e']

// Replace elements
arr.splice(2, 1, 'z');  // Remove 1 at index 2, insert 'z'
console.log(arr);      // ['a', 'x', 'z', 'd', 'e']

splice can remove, insert, or replace elements at any position. Returns removed elements.

sort and reverse

const nums = [3, 1, 4, 1, 5];

// sort - sorts in place (converts to strings!)
nums.sort();
console.log(nums);  // [1, 1, 3, 4, 5] (lucky!)

// But wait...
const numbers = [10, 2, 30];
numbers.sort();
console.log(numbers);  // [10, 2, 30] - wrong! (sorted as strings)

// Correct numeric sort
numbers.sort((a, b) => a - b);
console.log(numbers);  // [2, 10, 30] - correct!

// reverse
nums.reverse();
console.log(nums);  // [5, 4, 3, 1, 1]

sort() and reverse() mutate the array. sort() needs comparator for numbers.

Common Mistakes

  • Not realizing sort() converts to strings by default
  • Using shift/unshift in performance-critical code (O(n))
  • Forgetting that splice changes the original array
  • Expecting sort() to return a new array

Interview Tips

  • Know which methods mutate vs return new arrays
  • Understand O(1) vs O(n) performance implications
  • Remember sort() default string comparison
  • Know how to properly sort numbers