Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 2 · 10 / 12reduce
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2reduce
01 / 09Overview

reduce

You'll learn to read reduce, which walks a list and builds up one value, like a total.

Why it mattersYou'll meet reduce in other people's code for totals and counts, so you need to read it calmly.
about 60 min·needs: Arrays and map, filter and find, Loops
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Video
Learn JavaScript array reduce in 10 minutesYouTube · Web Dev Simplified · 8 min · English
MMamun's noteWatch 0:00–7:17, the basics and a second example. Skip "advanced reduce features" at the end.
ArticleOptional
Array methods: reducejavascript.info · 10 min · English
MMamun's noteRead the reduce part, and look closely at the table of steps. Skip reduceRight.
VideoOptional
Modern JavaScript in Bangla #13: array reduce()YouTube · Learn with Sumit · 6 min · Bangla
MMamun's noteIn Bangla, six minutes. A short, focused look at reduce.
DocsOptional
Array.prototype.reduce()MDN Web Docs · reference · English
MMamun's noteReference only. The first example is a sum, exactly like this topic. You can skip the rest.
03 / 09

Explanation

You want one answer from a whole list: the total of this month's expenses, or the total runs in an over. map gives a list back and filter gives a list back. reduce gives back one value.

Think of a running total on a calculator. You start at 0. For each expense, you add it to what you have so far. At the end, the screen shows the total.

const expenses = [120, 80, 300];
const total = expenses.reduce((sum, amount) => sum + amount, 0);
// 500

The callback gets two things: the total so far, called the accumulator (here sum), and the current item (amount). Whatever the callback returns becomes the new sum for the next item. The 0 at the end is the starting value: what sum is before the first item.

Step by step: sum is 0, add 120, so 120. Add 80, so 200. Add 300, so 500. reduce returns 500.

People often forget the starting value. On an empty list that gives an error, and with objects it gives strange results. Always pass one. With curly braces, people also forget return, and the total becomes undefined.

This topic is optional for a reason. You will read reduce more than you write it. A for...of loop with a let total = 0 does the same job and is often easier to read. When you meet reduce, find the starting value, then ask: what does each step add to the total?

Words to recognise
reduceaccumulatorstarting valuecallbacktotal
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1const expenses = [120, 80, 300];
2
const total = expenses.reduce((sum, amount) => {
Mentor note · line 3
reduce calls the callback once per item. sum is the total so far, amount is the current item.
return sum + amount;
}, 0);
6console.log(total); // 500
7
// sum: 0 + 120 -> 120
9// sum: 120 + 80 -> 200
10// sum: 200 + 300 -> 500
11
12let loopTotal = 0;
for (const amount of expenses) loopTotal = loopTotal + amount;
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const runs = [4, 6, 1];
2const total = runs.reduce((sum, r) => sum + r, 10);
3console.log(total);
What does this print?
DrillFind the bug2 / 2
totalMarks should add up all the marks, and give 0 for an empty list. Two things are missing. Fix it so all three checks pass.
1
2
3
4
5
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What does reduce give back?
  2. 2 / 3What is [5, 10].reduce((sum, n) => sum + n, 100)?
  3. 3 / 3In list.reduce((sum, n) => sum + n, 0), what is sum?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with reduce?

09 / 09

Done

You can now
Trace a reduce call step by step and say what it returns.
Next: Scope Back to Phase 2
On this page
  1. 01reduce
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2reduce
01 / 09Overview

reduce

You'll learn to read reduce, which walks a list and builds up one value, like a total.

Why it mattersYou'll meet reduce in other people's code for totals and counts, so you need to read it calmly.
about 60 min·needs: Arrays and map, filter and find, Loops
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Video
Learn JavaScript array reduce in 10 minutesYouTube · Web Dev Simplified · 8 min · English
MMamun's noteWatch 0:00–7:17, the basics and a second example. Skip "advanced reduce features" at the end.
ArticleOptional
Array methods: reducejavascript.info · 10 min · English
MMamun's noteRead the reduce part, and look closely at the table of steps. Skip reduceRight.
VideoOptional
Modern JavaScript in Bangla #13: array reduce()YouTube · Learn with Sumit · 6 min · Bangla
MMamun's noteIn Bangla, six minutes. A short, focused look at reduce.
DocsOptional
Array.prototype.reduce()MDN Web Docs · reference · English
MMamun's noteReference only. The first example is a sum, exactly like this topic. You can skip the rest.
03 / 09

Explanation

You want one answer from a whole list: the total of this month's expenses, or the total runs in an over. map gives a list back and filter gives a list back. reduce gives back one value.

Think of a running total on a calculator. You start at 0. For each expense, you add it to what you have so far. At the end, the screen shows the total.

const expenses = [120, 80, 300];
const total = expenses.reduce((sum, amount) => sum + amount, 0);
// 500

The callback gets two things: the total so far, called the accumulator (here sum), and the current item (amount). Whatever the callback returns becomes the new sum for the next item. The 0 at the end is the starting value: what sum is before the first item.

Step by step: sum is 0, add 120, so 120. Add 80, so 200. Add 300, so 500. reduce returns 500.

People often forget the starting value. On an empty list that gives an error, and with objects it gives strange results. Always pass one. With curly braces, people also forget return, and the total becomes undefined.

This topic is optional for a reason. You will read reduce more than you write it. A for...of loop with a let total = 0 does the same job and is often easier to read. When you meet reduce, find the starting value, then ask: what does each step add to the total?

Words to recognise
reduceaccumulatorstarting valuecallbacktotal
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1const expenses = [120, 80, 300];
2
const total = expenses.reduce((sum, amount) => {
Mentor note · line 3
reduce calls the callback once per item. sum is the total so far, amount is the current item.
return sum + amount;
}, 0);
6console.log(total); // 500
7
// sum: 0 + 120 -> 120
9// sum: 120 + 80 -> 200
10// sum: 200 + 300 -> 500
11
12let loopTotal = 0;
for (const amount of expenses) loopTotal = loopTotal + amount;
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const runs = [4, 6, 1];
2const total = runs.reduce((sum, r) => sum + r, 10);
3console.log(total);
What does this print?
DrillFind the bug2 / 2
totalMarks should add up all the marks, and give 0 for an empty list. Two things are missing. Fix it so all three checks pass.
1
2
3
4
5
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What does reduce give back?
  2. 2 / 3What is [5, 10].reduce((sum, n) => sum + n, 100)?
  3. 3 / 3In list.reduce((sum, n) => sum + n, 0), what is sum?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with reduce?

09 / 09

Done

You can now
Trace a reduce call step by step and say what it returns.
Next: Scope Back to Phase 2
On this page
  1. 01reduce
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You want one answer from a whole list: the total of this month's expenses, or the total runs in an over. map gives a list back and filter gives a list back. reduce gives back one value.

Think of a running total on a calculator. You start at 0. For each expense, you add it to what you have so far. At the end, the screen shows the total.

const expenses = [120, 80, 300];
const total = expenses.reduce((sum, amount) => sum + amount, 0);
// 500

The callback gets two things: the total so far, called the accumulator (here sum), and the current item (amount). Whatever the callback returns becomes the new sum for the next item. The 0 at the end is the starting value: what sum is before the first item.

Step by step: sum is 0, add 120, so 120. Add 80, so 200. Add 300, so 500. reduce returns 500.

People often forget the starting value. On an empty list that gives an error, and with objects it gives strange results. Always pass one. With curly braces, people also forget return, and the total becomes undefined.

This topic is optional for a reason. You will read reduce more than you write it. A for...of loop with a let total = 0 does the same job and is often easier to read. When you meet reduce, find the starting value, then ask: what does each step add to the total?

Words to recognise
reduceaccumulatorstarting valuecallbacktotal

You want one answer from a whole list: the total of this month's expenses, or the total runs in an over. map gives a list back and filter gives a list back. reduce gives back one value.

Think of a running total on a calculator. You start at 0. For each expense, you add it to what you have so far. At the end, the screen shows the total.

const expenses = [120, 80, 300];
const total = expenses.reduce((sum, amount) => sum + amount, 0);
// 500

The callback gets two things: the total so far, called the accumulator (here sum), and the current item (amount). Whatever the callback returns becomes the new sum for the next item. The 0 at the end is the starting value: what sum is before the first item.

Step by step: sum is 0, add 120, so 120. Add 80, so 200. Add 300, so 500. reduce returns 500.

People often forget the starting value. On an empty list that gives an error, and with objects it gives strange results. Always pass one. With curly braces, people also forget return, and the total becomes undefined.

This topic is optional for a reason. You will read reduce more than you write it. A for...of loop with a let total = 0 does the same job and is often easier to read. When you meet reduce, find the starting value, then ask: what does each step add to the total?

Words to recognise
reduceaccumulatorstarting valuecallbacktotal