JavaScript Array Methods Deep Dive

Array methods are essential for data transformation. Here's a comprehensive guide.

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]

// With index and array
const indexed = numbers.map((num, index, arr) => ({
  value: num,
  index,
  isLast: index === arr.length - 1,
}));

// Transform objects
const users = [
  { firstName: 'Alice', lastName: 'Smith' },
  { firstName: 'Bob', lastName: 'Jones' },
];

const fullNames = users.map(u => `${u.firstName} ${u.lastName}`);
// ['Alice Smith', 'Bob Jones']

// 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 filtering while mapping
const results = [1, 2, 3].flatMap(n =>
  n % 2 === 0 ? [n * 2] : []
);
// [4] - only even numbers, doubled

Filtering Methods#

// filter - keep elements matching condition
const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4, 6]

// Filter objects
const users = [
  { name: 'Alice', age: 30, active: true },
  { name: 'Bob', age: 25, active: false },
  { name: 'Charlie', age: 35, active: true },
];

const activeUsers = users.filter(u => u.active);
const adults = users.filter(u => u.age >= 30);

// Multiple conditions
const activeAdults = users.filter(u => u.active && u.age >= 30);

// Remove falsy values
const mixed = [0, 1, '', 'hello', null, undefined, false, true];
const truthy = mixed.filter(Boolean);
// [1, 'hello', true]

// Remove duplicates (simple)
const nums = [1, 2, 2, 3, 3, 3];
const unique = nums.filter((n, i, arr) => arr.indexOf(n) === i);
// [1, 2, 3]

Reduction Methods#

// reduce - accumulate to single value
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, n) => acc + n, 0);
// 15

// With objects
const items = [
  { name: 'Apple', price: 1.5, quantity: 3 },
  { name: 'Banana', price: 0.75, quantity: 5 },
];

const total = items.reduce(
  (acc, item) => acc + item.price * item.quantity,
  0
);
// 8.25

// 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 }

// Group by property
const people = [
  { name: 'Alice', dept: 'Engineering' },
  { name: 'Bob', dept: 'Sales' },
  { name: 'Charlie', dept: 'Engineering' },
];

const byDept = people.reduce((acc, person) => {
  const dept = person.dept;
  acc[dept] = acc[dept] || [];
  acc[dept].push(person);
  return acc;
}, {});

// Count occurrences
const letters = ['a', 'b', 'a', 'c', 'b', 'a'];
const counts = letters.reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

// reduceRight - reduce from right
const nested = [[1, 2], [3, 4], [5, 6]];
const flattened = nested.reduceRight((acc, arr) => [...arr, ...acc], []);
// [1, 2, 3, 4, 5, 6]

Search Methods#

// find - first matching element
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

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

const missing = users.find(u => u.name === 'David');
// undefined

// findIndex - index of first match
const index = users.findIndex(u => u.id === 2);
// 1

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

// includes - check existence
const fruits = ['apple', 'banana', 'orange'];
fruits.includes('banana'); // true
fruits.includes('grape');  // false

// indexOf / lastIndexOf
const nums = [1, 2, 3, 2, 1];
nums.indexOf(2);      // 1
nums.lastIndexOf(2);  // 3
nums.indexOf(99);     // -1

Testing Methods#

// every - all elements match
const numbers = [2, 4, 6, 8];
const allEven = numbers.every(n => n % 2 === 0);
// true

const hasOdd = [2, 4, 5, 8].every(n => n % 2 === 0);
// false

// some - at least one matches
const users = [
  { name: 'Alice', admin: false },
  { name: 'Bob', admin: true },
];

const hasAdmin = users.some(u => u.admin);
// true

// Empty array behavior
[].every(x => false); // true (vacuous truth)
[].some(x => true);   // false

Sorting Methods#

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

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

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

// Case-insensitive
const mixed = ['banana', 'Apple', 'cherry'];
mixed.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));

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

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

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

// Multiple criteria
users.sort((a, b) => {
  if (a.age !== b.age) return a.age - b.age;
  return a.name.localeCompare(b.name);
});

// toSorted (ES2023) - doesn't mutate
const sorted = numbers.toSorted((a, b) => a - b);
// Original array unchanged

Mutation Methods#

// push / pop - end of array
const arr = [1, 2, 3];
arr.push(4);      // Returns 4 (new length)
arr.pop();        // Returns 4

// unshift / shift - beginning of array
arr.unshift(0);   // Returns 4 (new length)
arr.shift();      // Returns 0

// splice - add/remove at index
const items = ['a', 'b', 'c', 'd'];
items.splice(2, 1);        // Remove 1 at index 2, returns ['c']
items.splice(2, 0, 'x');   // Insert 'x' at index 2
items.splice(1, 2, 'y', 'z'); // Replace 2 items starting at 1

// toSpliced (ES2023) - doesn't mutate
const newItems = items.toSpliced(1, 1, 'new');

// reverse - mutates
const nums = [1, 2, 3];
nums.reverse(); // [3, 2, 1]

// toReversed (ES2023) - doesn't mutate
const reversed = [1, 2, 3].toReversed();

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

// copyWithin - copy within array
const arr2 = [1, 2, 3, 4, 5];
arr2.copyWithin(0, 3); // [4, 5, 3, 4, 5]

Iteration Methods#

// forEach - side effects
const numbers = [1, 2, 3];
numbers.forEach((n, i) => {
  console.log(`Index ${i}: ${n}`);
});

// Can't break out of forEach
// Use for...of or find/some instead

// entries / keys / values
for (const [index, value] of numbers.entries()) {
  console.log(index, value);
}

for (const key of numbers.keys()) {
  console.log(key);
}

for (const value of numbers.values()) {
  console.log(value);
}

Combining Methods#

// Chain methods
const users = [
  { name: 'Alice', age: 30, active: true },
  { name: 'Bob', age: 25, active: false },
  { name: 'Charlie', age: 35, active: true },
  { name: 'Diana', age: 28, active: true },
];

const result = users
  .filter(u => u.active)
  .map(u => ({ ...u, category: u.age >= 30 ? 'senior' : 'junior' }))
  .sort((a, b) => b.age - a.age)
  .map(u => u.name);
// ['Charlie', 'Alice', 'Diana']

// Transform and aggregate
const orders = [
  { product: 'A', quantity: 2, price: 10 },
  { product: 'B', quantity: 1, price: 20 },
  { product: 'A', quantity: 3, price: 10 },
];

const totalByProduct = orders.reduce((acc, order) => {
  const key = order.product;
  acc[key] = (acc[key] || 0) + order.quantity * order.price;
  return acc;
}, {});
// { A: 50, B: 20 }

Best Practices#

Immutability:
✓ Prefer map, filter, reduce over mutations
✓ Use toSorted, toReversed, toSpliced
✓ Spread for shallow copies
✓ Consider structuredClone for deep copies

Performance:
✓ Avoid unnecessary iterations
✓ Use appropriate methods
✓ Consider early termination
✓ Profile large datasets

Readability:
✓ Use meaningful variable names
✓ Break complex chains
✓ Document reduce accumulators
✓ Prefer specialized methods

Common Patterns:
✓ filter then map
✓ reduce for grouping
✓ some/every for validation
✓ find for single item lookup

JavaScript array methods enable powerful data transformations. Master map, filter, and reduce for most use cases. Use immutable methods (ES2023) when available, chain methods for complex transformations, and choose the right method for each task.