JavaScript Array Methods Guide

JavaScript arrays have powerful built-in methods. Here's how to use them effectively.

Transformation Methods#

// map - Transform each element
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

const users = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
];
const names = users.map(user => user.name);
// ['John', 'Jane']

// With index
const indexed = numbers.map((n, i) => `${i}: ${n}`);
// ['0: 1', '1: 2', '2: 3', '3: 4', '4: 5']

// filter - Keep elements that pass test
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4]

const adults = users.filter(user => user.age >= 18);

// Chaining map and filter
const adultNames = users
  .filter(user => user.age >= 18)
  .map(user => user.name);

// flatMap - Map and flatten
const sentences = ['Hello world', 'How are you'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'How', 'are', 'you']

// Useful for optional results
const results = [1, 2, 3].flatMap(n =>
  n > 1 ? [n, n * 2] : []
);
// [2, 4, 3, 6]

Reduce#

// Sum array
const sum = numbers.reduce((acc, n) => acc + n, 0);
// 15

// Find max
const max = numbers.reduce((a, b) => Math.max(a, b));
// 5

// Group by property
const items = [
  { category: 'fruit', name: 'apple' },
  { category: 'fruit', name: 'banana' },
  { category: 'vegetable', name: 'carrot' },
];

const grouped = items.reduce((acc, item) => {
  const key = item.category;
  acc[key] = acc[key] || [];
  acc[key].push(item);
  return acc;
}, {});
// { fruit: [...], vegetable: [...] }

// Count occurrences
const votes = ['yes', 'no', 'yes', 'yes', 'no'];
const counts = votes.reduce((acc, vote) => {
  acc[vote] = (acc[vote] || 0) + 1;
  return acc;
}, {});
// { yes: 3, no: 2 }

// Build object from array
const pairs = [['a', 1], ['b', 2], ['c', 3]];
const obj = pairs.reduce((acc, [key, value]) => {
  acc[key] = value;
  return acc;
}, {});
// { a: 1, b: 2, c: 3 }

// Alternative: Object.fromEntries(pairs)

// Pipe functions
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);

const add1 = x => x + 1;
const double = x => x * 2;
const square = x => x * x;

const compute = pipe(add1, double, square);
compute(2); // ((2 + 1) * 2) ^ 2 = 36

Finding Elements#

// find - First matching element
const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' },
];

const jane = users.find(u => u.name === 'Jane');
// { id: 2, name: 'Jane' }

const notFound = users.find(u => u.name === 'Alice');
// undefined

// findIndex - Index of first match
const janeIndex = users.findIndex(u => u.name === 'Jane');
// 1

// findLast / findLastIndex (ES2023)
const numbers = [1, 2, 3, 2, 1];
const lastTwo = numbers.findLast(n => n === 2);
// 2 (the second occurrence)

// includes - Check existence
const hasTwo = numbers.includes(2);
// true

// indexOf / lastIndexOf
const firstIndex = numbers.indexOf(2);
// 1
const lastIndex = numbers.lastIndexOf(2);
// 3

// some - At least one matches
const hasEven = numbers.some(n => n % 2 === 0);
// true

// every - All match
const allPositive = numbers.every(n => n > 0);
// true

Sorting#

// sort - Mutates original array!
const nums = [3, 1, 4, 1, 5, 9];
nums.sort((a, b) => a - b); // Ascending
// [1, 1, 3, 4, 5, 9]

nums.sort((a, b) => b - a); // Descending
// [9, 5, 4, 3, 1, 1]

// Sort strings
const names = ['Charlie', 'Alice', 'Bob'];
names.sort(); // Alphabetical
// ['Alice', 'Bob', 'Charlie']

names.sort((a, b) => a.localeCompare(b)); // Locale-aware

// Sort objects
const users = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Bob', age: 35 },
];

users.sort((a, b) => a.age - b.age);
// By age ascending

users.sort((a, b) => a.name.localeCompare(b.name));
// By name

// Non-mutating sort with toSorted (ES2023)
const sorted = nums.toSorted((a, b) => a - b);
// Original unchanged

// reverse - Mutates!
const reversed = [1, 2, 3].reverse();
// [3, 2, 1]

// toReversed (ES2023) - Non-mutating
const reversedCopy = [1, 2, 3].toReversed();

Adding and Removing#

// push - Add to end (mutates)
const arr = [1, 2, 3];
arr.push(4);
// [1, 2, 3, 4]

// pop - Remove from end (mutates)
const last = arr.pop();
// 4, arr is [1, 2, 3]

// unshift - Add to beginning (mutates)
arr.unshift(0);
// [0, 1, 2, 3]

// shift - Remove from beginning (mutates)
const first = arr.shift();
// 0, arr is [1, 2, 3]

// splice - Insert/remove at index (mutates)
arr.splice(1, 1); // Remove 1 element at index 1
// arr is [1, 3]

arr.splice(1, 0, 2); // Insert 2 at index 1
// arr is [1, 2, 3]

arr.splice(1, 1, 'a', 'b'); // Replace 1 element with 2
// arr is [1, 'a', 'b', 3]

// toSpliced (ES2023) - Non-mutating
const newArr = arr.toSpliced(1, 1, 'x');

// concat - Combine arrays (non-mutating)
const combined = [1, 2].concat([3, 4], [5]);
// [1, 2, 3, 4, 5]

// Spread operator (preferred)
const combined2 = [...[1, 2], ...[3, 4]];

// slice - Extract portion (non-mutating)
const arr2 = [1, 2, 3, 4, 5];
const middle = arr2.slice(1, 4);
// [2, 3, 4]

const lastTwo = arr2.slice(-2);
// [4, 5]

const copy = arr2.slice(); // Shallow copy

Flattening#

// flat - Flatten nested arrays
const nested = [1, [2, [3, [4]]]];

nested.flat();
// [1, 2, [3, [4]]]

nested.flat(2);
// [1, 2, 3, [4]]

nested.flat(Infinity);
// [1, 2, 3, 4]

// flatMap - Map then flatten one level
const data = [
  { items: [1, 2] },
  { items: [3, 4] },
];

const allItems = data.flatMap(d => d.items);
// [1, 2, 3, 4]

Iteration#

// forEach - No return value
const arr = [1, 2, 3];
arr.forEach((item, index) => {
  console.log(`${index}: ${item}`);
});

// for...of - Iterable
for (const item of arr) {
  console.log(item);
}

// With index
for (const [index, item] of arr.entries()) {
  console.log(`${index}: ${item}`);
}

// keys and values
for (const key of arr.keys()) {
  console.log(key); // 0, 1, 2
}

for (const value of arr.values()) {
  console.log(value); // 1, 2, 3
}

Creating Arrays#

// Array.from - Create from iterable
const set = new Set([1, 2, 3]);
const fromSet = Array.from(set);

// With map function
const squares = Array.from([1, 2, 3], x => x * x);
// [1, 4, 9]

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

// Array.of - Create from arguments
const arr = Array.of(1, 2, 3);
// [1, 2, 3]

// fill - Fill with value
const filled = new Array(5).fill(0);
// [0, 0, 0, 0, 0]

// Be careful with objects!
const bad = new Array(3).fill([]);
bad[0].push(1);
// [[1], [1], [1]] - Same reference!

const good = Array.from({ length: 3 }, () => []);
good[0].push(1);
// [[1], [], []]

Practical Examples#

// Remove duplicates
const unique = [...new Set([1, 2, 2, 3, 3, 3])];
// [1, 2, 3]

// Chunk array
function chunk(arr, size) {
  return Array.from(
    { length: Math.ceil(arr.length / size) },
    (_, i) => arr.slice(i * size, i * size + size)
  );
}
chunk([1, 2, 3, 4, 5], 2);
// [[1, 2], [3, 4], [5]]

// Shuffle array
function shuffle(arr) {
  const copy = [...arr];
  for (let i = copy.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [copy[i], copy[j]] = [copy[j], copy[i]];
  }
  return copy;
}

// Intersection
const intersection = (a, b) => a.filter(x => b.includes(x));

// Difference
const difference = (a, b) => a.filter(x => !b.includes(x));

// Union
const union = (a, b) => [...new Set([...a, ...b])];

Best Practices#

Immutability:
✓ Prefer non-mutating methods
✓ Use spread or toSorted/toSpliced
✓ Create copies when needed
✓ Avoid modifying in forEach

Performance:
✓ Avoid multiple iterations
✓ Chain methods efficiently
✓ Use for loop for performance-critical code
✓ Consider early returns with find/some

Readability:
✓ Use descriptive callback names
✓ Break long chains into variables
✓ Choose the right method for the task
✓ Keep callbacks simple

JavaScript array methods enable functional, expressive code. Use map for transformations, filter for selection, reduce for aggregation, and find for searching. Prefer non-mutating methods and chain operations for clean, readable code.