On this page

Array methods

12 min read TextCh. 2 — Data and structures

Non-mutating (immutable) methods

These methods return a new array or value without modifying the original. They are the most commonly used in modern JavaScript:

map()

Transforms each element of the array by applying a function. Returns a new array of the same size:

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.13);
// [11.3, 22.6, 33.9]

filter()

Returns a new array containing only the elements that meet the condition:

const adults = [12, 25, 8, 30, 15].filter(age => age >= 18);
// [25, 30]

reduce()

Accumulates all elements into a single value. It is the most versatile method:

const cart = [{ price: 10 }, { price: 20 }, { price: 30 }];
const total = cart.reduce((acc, item) => acc + item.price, 0);
// 60

The second argument of reduce is the initial value of the accumulator. Always provide it to avoid errors with empty arrays.

find() and findIndex()

  • find() returns the first element that meets the condition, or undefined
  • findIndex() returns the index of the first element, or -1

some() and every()

  • some() returns true if at least one element meets the condition
  • every() returns true if all elements meet it

Method chaining

The real power appears when combining multiple methods in a chain:

const result = data
  .filter(d => d.active)
  .map(d => d.name.toUpperCase())
  .sort();

Each step transforms the data declaratively, making the code easy to read and maintain.

Modern methods (ES2022+)

Method Description Mutates?
at(index) Access with negative indices No
toSorted() Sort without mutating No
toReversed() Reverse without mutating No
toSpliced() Splice without mutating No
findLast() Search from the end No
groupBy() Group by key No

flat() and flatMap()

flat() flattens nested arrays. flatMap() combines map + flat(1) in a single operation, useful when your mapping function returns arrays.

Array.from()

Creates an array from any iterable or from an object with length:

const range = Array.from({ length: 5 }, (_, i) => i + 1);
// [1, 2, 3, 4, 5]

Practice

  1. Chain filter, map, and reduce: Given an array of products [{ name, price, category }], filter those with category 'tech', extract their prices with map, and calculate the total with reduce.
  2. Search with find and verify with some/every: Create an array of numbers. Use find to get the first number greater than 50, some to check if there are negatives, and every to verify all are less than 1000.
  3. Sort without mutating: Given an array of strings, create a sorted copy using [...array].sort() and verify that the original array was not modified.

In the next lesson we will learn about string manipulation and regular expressions.

Chaining methods
You can chain filter, map, and reduce to create expressive transformation pipelines. Each method returns a new array (except reduce, which returns a single value).
sort() mutates the original
Unlike map and filter, sort() modifies the original array. Use [...array].sort() or array.toSorted() (ES2023) to sort without mutating.
javascript
const products = [
  { name: 'Laptop', price: 999, category: 'tech' },
  { name: 'Book', price: 25, category: 'education' },
  { name: 'Monitor', price: 450, category: 'tech' },
  { name: 'Course', price: 50, category: 'education' },
  { name: 'Keyboard', price: 80, category: 'tech' },
];

// filter - keeps elements that match the condition
const tech = products.filter(p => p.category === 'tech');
// [{Laptop}, {Monitor}, {Keyboard}]

// map - transforms each element
const names = products.map(p => p.name);
// ['Laptop', 'Book', 'Monitor', 'Course', 'Keyboard']

// reduce - accumulates into a single value
const total = products.reduce((sum, p) => sum + p.price, 0);
// 1604

// find / findIndex
const expensive = products.find(p => p.price > 500);
// {name: 'Laptop', ...}
const expensiveIndex = products.findIndex(p => p.price > 500);
// 0

// some / every
const hasExpensive = products.some(p => p.price > 900);    // true
const allCheap = products.every(p => p.price < 100); // false

// Chaining
const totalTech = products
  .filter(p => p.category === 'tech')
  .reduce((sum, p) => sum + p.price, 0);
// 1529
javascript
const numbers = [3, 1, 4, 1, 5, 9, 2, 6];

// sort (mutates the original array - be careful!)
const sorted = [...numbers].sort((a, b) => a - b);
// [1, 1, 2, 3, 4, 5, 6, 9]

// flat - flattens nested arrays
const nested = [[1, 2], [3, [4, 5]]];
const flat = nested.flat(Infinity);
// [1, 2, 3, 4, 5]

// flatMap - map + flat in one
const phrases = ['hello world', 'good morning'];
const words = phrases.flatMap(p => p.split(' '));
// ['hello', 'world', 'good', 'morning']

// includes
console.log(numbers.includes(5)); // true

// Array.from - create arrays from iterables
const letters = Array.from('Hello');
// ['H', 'e', 'l', 'l', 'o']

// structuredClone - deep copy (ES2022)
const original = [{ a: 1 }, { b: 2 }];
const copy = structuredClone(original);
copy[0].a = 99;
console.log(original[0].a); // 1 (not affected)