Array Iteration: forEach, map, filter, find

Med

Array iteration methods provide powerful, declarative ways to process arrays without manual loops. Each method has a specific purpose: forEach for side effects, map for transformation, filter for selection, find for searching, some/every for testing. Understanding when to use each is essential for writing clean, functional JavaScript.

Interactive Visualization

mutation Methods

1
2
3

Key Points

  • forEach - executes function for each element, returns undefined
  • map - transforms each element, returns new array
  • filter - keeps elements passing test, returns new array
  • find - returns first element passing test, or undefined
  • findIndex - returns index of first match, or -1
  • some - returns true if ANY element passes test
  • every - returns true if ALL elements pass test

Code Examples

forEach vs map

const nums = [1, 2, 3];

// forEach - side effects, returns undefined
nums.forEach(n => console.log(n * 2));
// Logs: 2, 4, 6
// Returns: undefined

// map - transforms, returns new array
const doubled = nums.map(n => n * 2);
console.log(doubled);  // [2, 4, 6]
console.log(nums);     // [1, 2, 3] (unchanged)

// Rule: Use map when you need a new array, forEach for side effects

forEach for side effects (logs, external vars). map for transforming to new array.

filter - Selection

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 17 },
  { name: 'Carol', age: 30 }
];

// Get adults
const adults = users.filter(user => user.age >= 18);
console.log(adults);
// [{ name: 'Alice', age: 25 }, { name: 'Carol', age: 30 }]

// Chaining: adults over 25
const over25 = users
  .filter(u => u.age >= 18)
  .filter(u => u.age > 25);

// Or with single filter
const over25b = users.filter(u => u.age >= 18 && u.age > 25);

filter keeps elements where callback returns truthy. Returns new array.

find and findIndex

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carol' }
];

// find - returns first match, or undefined
const bob = users.find(u => u.name === 'Bob');
console.log(bob);  // { id: 2, name: 'Bob' }

const dave = users.find(u => u.name === 'Dave');
console.log(dave);  // undefined

// findIndex - returns index, or -1
const bobIndex = users.findIndex(u => u.name === 'Bob');
console.log(bobIndex);  // 1

// Use case: find then update (if found)
const user = users.find(u => u.id === 2);
if (user) {
  user.name = 'Bobby';  // Mutates original!
}

find returns the element, findIndex returns the index. Both stop at first match.

some and every

const scores = [85, 92, 78, 95];

// some - true if ANY pass
const hasHighScore = scores.some(s => s >= 90);
console.log(hasHighScore);  // true

// every - true if ALL pass
const allPassed = scores.every(s => s >= 70);
console.log(allPassed);  // true

// Practical: validation
const users = [
  { name: 'Alice', email: 'alice@test.com' },
  { name: 'Bob', email: null }
];

const allHaveEmail = users.every(u => u.email);
const anyMissingEmail = users.some(u => !u.email);

some returns true if any element passes. every returns true if all pass.

Common Mistakes

  • Using forEach when map/filter would be cleaner
  • Forgetting that find returns undefined if not found
  • Using map when forEach is intended (creates unused array)
  • Trying to break out of forEach (cannot break)

Interview Tips

  • Know when to use each method
  • Understand map vs forEach distinction
  • Know that find returns undefined, not null
  • Be comfortable chaining methods