ProgramGuru

Map, Filter and Reduce

Ask three different questions about one marks list

A teacher has marks 40, 20 and 35. The report needs a bonus-adjusted list, a list of passing marks and a total. Each task uses the same collection but asks a different question.

JavaScript arrays provide map to transform each item, filter to select items and reduce to combine items into a result. Choosing by the question makes the code easier to explain.

  1. Choose an operation

    Distinguish transformation, selection and accumulation.

  2. Trace the callback

    Follow values through one array operation.

  3. Handle an empty list

    Supply a meaningful initial value when reducing.

Different questions produce different result shapes

  1. Transform every mark

    Add two to each mark.

    42, 22, 37

  2. Select passing marks

    Keep marks at least 25.

    40, 35

  3. Combine the marks

    Start from zero and add each mark.

    95
Read these stages alongside the complete example. They explain the relationship; they do not execute code.

The callback describes what happens to one item

map calls its callback for each existing array entry and collects the returned values into a new array. filter keeps an entry when the callback result is truthy. Neither method changes this original array by itself.

reduce passes an accumulator and the current item to its callback. The returned value becomes the next accumulator. With initial value zero, our totals progress 0 → 40 → 60 → 95.

Before starting, review passing functions as values. These examples use JavaScript; other languages can use different syntax and rules.

Build three report results from the marks

The arrow callbacks name one mark at a time. mark + 2 transforms; mark >= 25 tests inclusion; total + mark combines. join displays each array as comma-separated text.

The original marks are also displayed, showing that these numeric callbacks left the source array unchanged.

JavaScript · local teaching example

const marks = [40, 20, 35];
console.log(marks.map(mark => mark + 2).join(","));
console.log(marks.filter(mark => mark >= 25).join(","));
console.log(marks.reduce((total, mark) => total + mark, 0));
console.log(marks.join(","));

Expected output

42,22,37
40,35
95
40,20,35

Give an empty total a defined starting point

An empty marks list has total zero under this rule. Supplying the initial value lets reduce return zero without calling the callback.

Without an initial value, reduce uses the first entry when one exists and throws for an empty array. A starting value is therefore part of the calculation, not decoration.

JavaScript · local teaching example

const marks = [];
console.log(marks.reduce((total, mark) => total + mark, 0));

Expected output

0

Apply the rule to a small change

Keep only passing marks from 10, 25 and 40, then total those passing marks.

Worked answer

filter keeps the boundary mark 25 and mark 40. reduce starts from zero and adds them, so the passing total is 65. The failed mark 10 does not contribute.

JavaScript · local teaching example

const marks = [10, 25, 40];
const passing = marks.filter(mark => mark >= 25);
const total = passing.reduce((sum, mark) => sum + mark, 0);
console.log(passing.join(","));
console.log(total);

Expected output

25,40
65

Recognize mistakes and limits

Creating a new array does not guarantee that nested objects remain unchanged. A callback that changes student.mark mutates that shared object; use deliberate copies when changes should be isolated.

Return the result from a callback body with braces. mark => { mark + 2; } returns undefined because there is no return statement.

A clear loop can be better for complicated branching or several state updates. Do not force every task into a long chain just because these methods are available.

For the language or tool rules used here, see JavaScript array callbacks.

Check the core idea

Which method should keep only marks at least 25?
Choose one answer. You can try again.

Answer and explanation

filter

Correct. Its predicate decides which original entries to keep.

Apply the idea to a new situation

What does an empty array reduce to when the supplied initial total is zero?
Choose one answer. You can try again.

Answer and explanation

0

Correct. There are no marks to add to the starting value.

Match the operation to the report question

Use map for a transformed list, filter for a selected list and reduce for an accumulated result. Explain the callback and the starting value before combining operations.

Connect this idea with the equivalent loop mechanism and callbacks that leave inputs unchanged.

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: Small Anonymous Functions →