Array Methods

JavaScript arrays have many built-in methods for manipulation, both as static methods on the Array class and as instance methods on array objects.

Mutating Methods

Some array methods modify the original array directly:

const numbers = [1, 2, 3];
console.log(numbers);  // [1, 2, 3]

// Adding and removing elements
numbers.push(4);       // Adds 4 to end
console.log(numbers);  // [1, 2, 3, 4]

const last = numbers.pop();    // Removes and returns last element
console.log(last);            // 4
console.log(numbers);         // [1, 2, 3]

numbers.unshift(0);    // Adds 0 to start
console.log(numbers);  // [0, 1, 2, 3]

const first = numbers.shift(); // Removes and returns first element
console.log(first);           // 0
console.log(numbers);         // [1, 2, 3]

Somewhat surprisingly, common methods that reorder elements also modify the array in place.

const numbers = [3, 1, 2];
console.log(numbers);  // [3, 1, 2]

numbers.reverse();
console.log(numbers);  // [2, 1, 3]

numbers.sort();
console.log(numbers);  // [1, 2, 3]

💡 Modern JavaScript (ES2023) introduced toReversed() and toSorted() which return new arrays instead of modifying the original. While these methods are available in newer browsers and through Vite's transpilation, the traditional mutating methods are still commonly used.

Non-mutating Methods

These methods return a new array instead of modifying the original:

const numbers = [1, 2, 3, 4, 5];

// map: transform each element
const doubled = numbers.map(x => x * 2);      // [2, 4, 6, 8, 10]

// filter: keep elements that pass a test
const evens = numbers.filter(x => x % 2 === 0);  // [2, 4]

// slice: extract a portion
const middle = numbers.slice(1, 4);           // [2, 3, 4]

// reduce: combine all elements into a single value
const sum = numbers.reduce((acc, x) => acc + x, 0);  // 15

console.log(numbers);  // Still [1, 2, 3, 4, 5]

Finding Elements

Methods for searching arrays:

const numbers = [1, 2, 3, 4, 5];

// Simple search
console.log(numbers.indexOf(3));      // 2
console.log(numbers.includes(6));     // false

// Find with condition
const firstEven = numbers.find(x => x % 2 === 0);  // 2
const allEvens = numbers.filter(x => x % 2 === 0); // [2, 4]

Chaining

These methods can be chained together since each returns a new array:

const numbers = [1, 2, 3, 4, 5, 6];

const result = numbers
    .filter(x => x % 2 === 0)    // [2, 4, 6]
    .map(x => x * 2)             // [4, 8, 12]
    .slice(0, 2);                // [4, 8]

console.log(result);   // [4, 8]
console.log(numbers);  // Still [1, 2, 3, 4, 5, 6]

Mutating methods like sort and reverse return a reference to the array they modify. While this means you can use them in a chain, they mutate the original array, which can lead to unexpected behavior.

To safely use mutating methods in a chain, first create a copy using slice without any arguments:

const numbers = [1, 2, 3, 4, 5, 6];

const result = numbers
    .slice()                     // Make a copy
    .filter(x => x > 2)          // [3, 4, 5, 6]
    .sort((a, b) => b - a);      // [6, 5, 4, 3]

console.log(result);   // [6, 5, 4, 3]
console.log(numbers);  // Still [1, 2, 3, 4, 5, 6]

Static Methods

The Array class provides several useful static methods:

// Create array from array-like objects
const arrayFromString = Array.from("hello");  // ["h", "e", "l", "l", "o"]

// Check if something is an array
console.log(Array.isArray([]));        // true
console.log(Array.isArray("hello"));   // false

// Create array with all elements same value
const zeros = Array(3).fill(0);        // [0, 0, 0]

External Resources

• 📚 MDN: Array ↗️
• 📚 MDN: Array Methods ↗️