Reduce method in Javascript - Step-by-Step Execution

Concept Flow - Reduce method

Start with initial accumulator

↓

Take next array element

↓

Apply reducer function(accumulator, element)

↓

Update accumulator with result

↓

More elements?

Yes→Take next array element

No↓

Return accumulator

The reduce method starts with an initial value and processes each array element to update an accumulator, returning the final accumulated result.

Execution Sample

Javascript

const numbers = [1, 2, 3];
const sum = numbers.reduce((acc, val) => acc + val, 0);
console.log(sum);

This code sums all numbers in the array using reduce, starting from 0.

Execution Table

Step	Accumulator (acc)	Current Value (val)	Operation	New Accumulator
1	0	1	0 + 1	1
2	1	2	1 + 2	3
3	3	3	3 + 3	6
Exit	6	-	No more elements	Return 6

💡 All elements processed, reduce returns final accumulator 6

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
accumulator	0	1	3	6	6
currentValue	-	1	2	3	-

Key Moments - 3 Insights

Why does the accumulator start at 0 and not the first array element?

Because we provided 0 as the initial value in reduce (see execution_table step 1), so accumulator starts at 0 before processing elements.

What happens if we omit the initial value in reduce?

If omitted, reduce uses the first array element as the initial accumulator and starts from the second element, changing how steps proceed.

Why does the accumulator update after each operation?

Because reduce applies the reducer function to combine accumulator and current value, then stores the result as the new accumulator for next step (see execution_table).

Visual Quiz - 3 Questions

Look at the execution table, what is the accumulator value after step 2?

A 1

B 6

C 3

D 0

💡 Hint

Check the 'New Accumulator' column at step 2 in the execution_table.

At which step does the reduce method finish processing all elements?

A Step 2

B Exit

C Step 3

D Step 1

💡 Hint

Look for the row labeled 'Exit' in the execution_table.

If the initial accumulator was 10 instead of 0, what would be the final accumulator?

A 16

B 6

C 10

D 13

💡 Hint

Add 10 to the final accumulator 6 shown in variable_tracker final value.

Concept Snapshot

Array.reduce(callback, initialValue)
- Processes array elements one by one
- callback(accumulator, currentValue) returns new accumulator
- Starts with initialValue as accumulator
- Returns final accumulator after all elements
- Useful for sums, products, or combining values

Full Transcript

The reduce method in JavaScript takes a function and an initial value. It starts with the initial value as the accumulator. Then for each element in the array, it applies the function to the accumulator and the current element. The function returns a new accumulator value. This repeats until all elements are processed. Finally, reduce returns the accumulated result. For example, summing [1, 2, 3] with initial 0 results in 6. The execution table shows each step's accumulator and current value, how they combine, and the updated accumulator. Beginners often wonder why the initial value matters and how the accumulator updates. The visual quiz tests understanding of accumulator values at different steps and effects of changing the initial value.