array.map(fn)    // transform
array.filter(fn) // select
array.reduce(fn) // aggregate
array.find(fn)   // find first
array.some(fn)   // any match?
array.every(fn)  // all match?

Deep Dive Course

Array methods fall into categories: **transformation** (map, flatMap), **filtering** (filter, find, findIndex), **aggregation** (reduce, some, every, includes), **mutation** (sort, reverse, splice), and **copying** (slice, concat, spread). Prefer non-mutating methods to keep data flow predictable.

1Understanding Array Methods

Array methods fall into categories: transformation (map, flatMap), filtering (filter, find, findIndex), aggregation (reduce, some, every, includes), mutation (sort, reverse, splice), and copying (slice, concat, spread). Prefer non-mutating methods to keep data flow predictable.

💡

Chain methods: arr.filter(x => x > 0).map(x => x * 2) — but be aware each creates a new array. For performance-critical code, use a single reduce.

editor.html

const students = [
  { name: 'Alice', score: 92 },
  { name: 'Bob',   score: 74 },
  { name: 'Carol', score: 88 },
];

const passing = students
  .filter(s => s.score >= 80)
  .map(s => s.name);

console.log(passing); // ['Alice', 'Carol']

localhost:3000

2Practical Example

Here is a real-world application of Array Methods showing how it is used in production JavaScript code.

editor.html

// flat and flatMap
const nested = [[1, 2], [3, 4], [5, 6]];
console.log(nested.flat()); // [1,2,3,4,5,6]

const words = ['hello world', 'foo bar'];
console.log(words.flatMap(w => w.split(' ')));
// ['hello','world','foo','bar']

localhost:3000

3Best Practices

Follow these guidelines when working with Array Methods:

1. Prefer non-mutating methods (map, filter, slice)

2. Use find() instead of filter()[0]

3. Use includes() instead of indexOf() for boolean checks

⚠️

Tip: Chain methods: arr.filter(x => x > 0).map(x => x * 2) — but be aware each creates a new array. For performance-critical code, use a single reduce.

editor.html

const students = [
  { name: 'Alice', score: 92 },
  { name: 'Bob',   score: 74 },
  { name: 'Carol', score: 88 },
];

const passing = students
  .filter(s => s.score >= 80)
  .map(s => s.name);

console.log(passing); // ['Alice', 'Carol']

localhost:3000

Examples

Example 01Basic Usage

const students = [
  { name: 'Alice', score: 92 },
  { name: 'Bob',   score: 74 },
  { name: 'Carol', score: 88 },
];

const passing = students
  .filter(s => s.score >= 80)
  .map(s => s.name);

console.log(passing); // ['Alice', 'Carol']

Example 02Advanced Example

// flat and flatMap
const nested = [[1, 2], [3, 4], [5, 6]];
console.log(nested.flat()); // [1,2,3,4,5,6]

const words = ['hello world', 'foo bar'];
console.log(words.flatMap(w => w.split(' ')));
// ['hello','world','foo','bar']

Best Practices

Prefer non-mutating methods (map, filter, slice)
Use find() instead of filter()[0]
Use includes() instead of indexOf() for boolean checks

Interview Question

What is the difference between find() and filter()?▼

Hint: One returns a single element, one returns an array.

filter() returns a NEW ARRAY of all elements matching the predicate. find() returns the FIRST matching element (or undefined). Use find() when you expect exactly one match and want its value; use filter() when you need all matches.

Exercises

MediumPractice using Array Methods in a real scenario.

View Solution

const students = [
  { name: 'Alice', score: 92 },
  { name: 'Bob',   score: 74 },
  { name: 'Carol', score: 88 },
];

const passing = students
  .filter(s => s.score >= 80)
  .map(s => s.name);

console.log(passing); // ['Alice', 'Carol']

Frequently Asked Questions

What is the difference between find() and filter()?▼

Related Functions

mapfilterreduceforEachsort