Chapter 6 · Lesson 1

Array Methods

Arrays are ordered collections of values, and JavaScript provides a rich set of built-in methods to transform, filter, and aggregate them. Understanding these methods is essential for writing clean, functional-style JavaScript.

forEach

forEach iterates over every element in an array and runs a callback for each one. It always returns undefined — its purpose is side effects only (logging, updating DOM, etc.).

const nums = [1, 2, 3];
nums.forEach((n) => console.log(n)); // 1, 2, 3

map

map creates a new array by transforming each element with a callback. The original array is never modified.

const doubled = [1, 2, 3].map((n) => n * 2); // [2, 4, 6]

filter

filter creates a new array containing only the elements for which the callback returns a truthy value.

const evens = [1, 2, 3, 4].filter((n) => n % 2 === 0); // [2, 4]

reduce

reduce collapses an array into a single value. It takes a callback and an optional initial accumulator value.

const sum = [1, 2, 3, 4].reduce((acc, n) => acc + n, 0); // 10

The callback receives (accumulator, currentValue, index, array). The accumulator carries the running result across each iteration.

Chaining Methods

Because map and filter both return new arrays, you can chain them:

const result = [1, 2, 3, 4, 5]
  .filter((n) => n % 2 !== 0)   // [1, 3, 5]
  .map((n) => n * n);            // [1, 9, 25]

Chaining keeps your transformations readable and composable. Keep chains short — if a chain grows beyond 3–4 steps, consider breaking it into named variables.

find & findIndex

find returns the first matching element (or undefined); findIndex returns its index (or -1).

some & every

some returns true if at least one element passes the test; every returns true only if all elements pass.

flat & flatMap

flat(depth) flattens nested arrays. flatMap combines map then flat(1) in one step — useful when each mapped element produces an array.

Code Examples

map, filter, reducejavascript

const prices = [10, 25, 8, 42, 15];

// map: add 10% tax to each price
const withTax = prices.map((p) => parseFloat((p * 1.1).toFixed(2)));
console.log("With tax:", withTax);

// filter: only prices over $15
const expensive = prices.filter((p) => p > 15);
console.log("Expensive:", expensive);

// reduce: total cost
const total = prices.reduce((sum, p) => sum + p, 0);
console.log("Total:", total);

map transforms each element into a new value, filter keeps only elements that pass a test, and reduce collapses the array into a single accumulated result.

Chaining Array Methodsjavascript

const students = [
  { name: "Alice", grade: 88 },
  { name: "Bob",   grade: 52 },
  { name: "Carol", grade: 95 },
  { name: "Dave",  grade: 47 },
  { name: "Eve",   grade: 73 },
];

// Chain: filter passing students, map to names, sort alphabetically
const passingNames = students
  .filter((s) => s.grade >= 60)
  .map((s) => s.name)
  .sort();

console.log("Passing students:", passingNames);

// Average grade of passing students
const avgGrade = students
  .filter((s) => s.grade >= 60)
  .reduce((sum, s, _, arr) => sum + s.grade / arr.length, 0);

console.log("Average passing grade:", avgGrade.toFixed(1));

Chaining filter, map, and sort in sequence produces clean, readable pipelines. Using the fourth reduce parameter (array) to compute the average avoids a separate variable for the length.

some, every, find, flatMapjavascript

const scores = [72, 85, 91, 60, 78];

console.log("Any perfect score?", scores.some((s) => s === 100));
console.log("All passing?",       scores.every((s) => s >= 60));
console.log("First above 80:",    scores.find((s) => s > 80));
console.log("Index above 80:",    scores.findIndex((s) => s > 80));

// flatMap: each student can have multiple tags
const tags = ["js,css", "node,js", "react,css"];
const allTags = tags.flatMap((t) => t.split(","));
console.log("All tags:", allTags);

const uniqueTags = [...new Set(allTags)];
console.log("Unique tags:", uniqueTags);

some/every test conditions across the whole array. find/findIndex locate the first match. flatMap is ideal when each element produces an array — it maps then flattens one level automatically.

Quick Quiz

1. What does Array.prototype.map() return?

2. Which method would you use to sum all numbers in an array?

3. What value does forEach return?

4. Given [1,2,3,4].filter(n => n > 2).map(n => n * 10), what is the result?

Was this lesson helpful?