Level: Intermediate | Player: 10_Arrow function

Learning Objectives

Use forEach, map, filter, reduce, find, some, and every separately.
Know the callback parameters (element, index, array).
Create a data pipeline using method chaining.
Prefer a functional style that does not change the original.
Use reduce safely with appropriate initial values.

1. forEach and map

forEach is used for side effects (logging, DOM manipulation, etc.) and has no return value. map returns a new array.

[1, 2, 3].forEach((x) => console.log(x));
const doubled = [1, 2, 3].map((x) => x * 2); // [2,4,6]

2. filter, find, some, every

Selects elements that satisfy the conditions.

[1,2,3,4].filter((x) => x % 2 === 0); // [2,4]
[1,2,3].find((x) => x > 1);            //2 (first match)
[1,2,3].some((x) => x > 2);            // true
[1,2,3].every((x) => x > 0);           // true

3. reduce

Collapse an array into one value. Get into the habit of specifying initial values.

const sum = [1,2,3,4].reduce((acc, x) => acc + x, 0);
const byLen = ["a","bb","ccc"].reduce((g, w) => {
  (g[w.length] ??= []).push(w);
  return g;
}, {});

4. Chaining

Functional pipelines are highly readable.

const users = [
  { name: "A", age: 17 },
  { name: "B", age: 22 },
  { name: "C", age: 30 },
];
const result = users
  .filter((u) => u.age >= 18)
  .map((u) => u.name)
  .join(", ");

Core example

file	Contents covered
`01_map.js`	Convert to map
`02_filter.js`	filter / find
`03_reduce.js`	Total, grouping
`04_chain.js`	filter → map → reduce chain

⚠️ Common Mistakes

reduce was called without an initial value and a TypeError occurred with an empty array.
In map, use only side effects and discard the return value (forEach is suitable).
filter forgets to also pass truthy/falsy, not boolean.
If the chaining becomes long, worry about performance → Usually, readability comes first.
Create undefined array due to missing return in callback.

❓ Frequently Asked Questions (FAQ)

Q1. Performance difference with for loop? A. Most of the time, the difference is negligible. Readability comes first.

Q2. What about flat, flatMap? A. Unfold nested arrays, transform and flatten at once.

Q3. Asynchronous operation with map? A. Since the result is a Promise array, use the Promise.all(arr.map(...)) pattern.

Example files

The runnable files used in this lesson. Copy them into your own project and experiment.

src/01_map.jsJavaScript

/**
 *map: transform
 */
"use strict";

const nums = [1, 2, 3, 4];
const squares = nums.map((x) => x * x);
console.log(squares);

const users = [
  { name: "A", age: 20 },
  { name: "B", age: 25 },
];
console.log(users.map((u) => u.name));

src/02_filter.jsJavaScript

/**
 * filter, find
 */
"use strict";

const nums = [1, 2, 3, 4, 5, 6];
console.log("evens =", nums.filter((x) => x % 2 === 0));

const users = [
  { id: 1, active: false },
  { id: 2, active: true },
  { id: 3, active: true },
];
console.log("first active =", users.find((u) => u.active));
console.log("actives =", users.filter((u) => u.active));

src/03_reduce.jsJavaScript

/**
 *reduce: sum, group
 */
"use strict";

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, x) => acc + x, 0);
console.log("sum =", sum);

const words = ["js", "go", "rust", "py", "c"];
const byLen = words.reduce((g, w) => {
  (g[w.length] ??= []).push(w);
  return g;
}, {});
console.log("byLen =", byLen);

src/04_chain.jsJavaScript

/**
 *chaining
 */
"use strict";

const users = [
  { name: "A", age: 17, score: 80 },
  { name: "B", age: 22, score: 95 },
  { name: "C", age: 30, score: 60 },
  { name: "D", age: 25, score: 88 },
];

const avgAdultScore = users
  .filter((u) => u.age >= 18)
  .map((u) => u.score)
  .reduce((acc, s, _i, arr) => acc + s / arr.length, 0);

console.log("avg adult score =", avgAdultScore);

Assignment

homework_01.js

Find the average score of the student array using reduce.

[ { name:"A", score:80 }, { name:"B", score:90 }, { name:"C", score:70 } ]

homework_02.js

Return the total amount by category from a product array as an object.

[ { name:"Apple", category:"Fruit", price:1000 },
{ name:"Banana", category:"Fruit", price:1500 },
{ name:"Milk", category:"Dairy Products", price:2500 } ]
→ { Fruit: 2500, Dairy Products: 2500 }

Show the reference solution

Try the assignment yourself first — comparing your attempt with a working solution is where most of the learning happens.

homework_01.jsJavaScript

/**
 *Task 1: Average Score
 */
"use strict";

const students = [
  { name: "A", score: 80 },
  { name: "B", score: 90 },
  { name: "C", score: 70 },
];

const avg = students.reduce((acc, s, _i, arr) => acc + s.score / arr.length, 0);
console.log("avg =", avg); // 80

homework_02.jsJavaScript

/**
 *Task 2: Total amount by category
 */
"use strict";

const products = [
  { name: "apple", category: "fruit", price: 1000 },
  { name: "banana", category: "fruit", price: 1500 },
  { name: "milk", category: "dairy products", price: 2500 },
];

const totals = products.reduce((g, p) => {
  g[p.category] = (g[p.category] ?? 0) + p.price;
  return g;
}, {});

console.log(totals); //{ Fruit: 2500, Dairy: 2500 }

Array Higher-Order Functions