Array Methods Deep Dive

Beyond iteration, JavaScript arrays come with powerful methods for adding, removing, extracting, and restructuring data. Understanding which methods mutate the original array and which return a new array is crucial for bug-free code.

1. Stack and Queue Operations (Mutating)

These methods modify the array in place and return either the removed element or the new length.

push and pop (End of Array)

• push: Adds elements to the end and returns the new length.
• pop: Removes the last element and returns it.

const stack = [1, 2];
stack.push(3); // Returns 3, stack is now [1, 2, 3]
const removed = stack.pop(); // Returns 3, stack is now [1, 2]

unshift and shift (Beginning of Array)

• unshift: Adds elements to the beginning and returns the new length.
• shift: Removes the first element and returns it.

const queue = ['b', 'c'];
queue.unshift('a'); // Returns 3, queue is now ['a', 'b', 'c']
queue.shift(); // Returns 'a', queue is now ['b', 'c']

Note: shift and unshift are generally slower than push and pop because they require re-indexing all elements in the array.

2. Modifying Array Contents

splice() (Mutating)

splice changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. Syntax: array.splice(start, deleteCount, item1, item2, ...)

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb'); // Inserts at index 1
// ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May'); // Replaces 1 element at index 4
// ['Jan', 'Feb', 'March', 'April', 'May']

slice() (Non-Mutating)

slice returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
const sliced = animals.slice(2, 4);
// ['camel', 'duck']

3. Combining Arrays

concat() (Non-Mutating)

Used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
// ['a', 'b', 'c', 'd', 'e', 'f']

Note: Modern JavaScript often prefers the spread operator ([...array1, ...array2]) for concatenation.

4. Flattening Arrays

flat()

Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

const nested = [1, 2, [3, 4, [5, 6]]];
console.log(nested.flat()); // [1, 2, 3, 4, [5, 6]] (Default depth is 1)
console.log(nested.flat(2)); // [1, 2, 3, 4, 5, 6]

flatMap()

Returns a new array formed by applying a given callback function to each element of the array, and then flattening the result by one level. It is identical to a map() followed by a flat() of depth 1.

const sentences = ["Hello world", "Array methods are fun"];
const words = sentences.flatMap(s => s.split(' '));
// ["Hello", "world", "Array", "methods", "are", "fun"]

5. Accessing Elements

at()

Introduced in ES2022, at() takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item.

const array = ['apple', 'banana', 'pear'];

console.log(array.at(0)); // 'apple'
console.log(array.at(-1)); // 'pear' (Last element)