Reduce method in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the reduce method do in JavaScript?

The reduce method processes an array and combines all its elements into a single value by applying a function repeatedly.

beginner

What are the two main arguments of the reduce method callback function?

The callback function takes two main arguments: accumulator (the combined value so far) and currentValue (the current element being processed).

intermediate

What is the purpose of the initial value in the reduce method?

The initial value sets the starting point for the accumulator. If not provided, the first array element is used as the initial accumulator value.

beginner

How would you use reduce to sum all numbers in an array?

You pass a callback that adds the accumulator and current value, and set the initial value to 0. Example: [1,2,3].reduce((acc, val) => acc + val, 0) returns 6.

intermediate

Can reduce be used to transform an array into an object? How?

Yes! By using the accumulator as an object and adding properties inside the callback, you can build an object from array elements.

What does the accumulator represent in the reduce method?

A The combined result so far

B The current element in the array

C The index of the current element

D The original array

The accumulator holds the combined value returned by the callback after processing each element.

What happens if you do not provide an initial value to reduce?

A The first element of the array is used as the initial accumulator

B The method throws an error

C The accumulator starts as undefined

D The method returns the original array

If no initial value is given, reduce uses the first array element as the accumulator and starts from the second element.

Which of these is a valid use of reduce?

A Creating a new array with map

B Filtering elements from an array

C Sorting an array

D Summing numbers in an array

Reduce is commonly used to combine array elements, such as summing numbers.

How many arguments does the callback function of reduce receive?

A 2

B 3

C 4

D 1

The callback receives 4 arguments: accumulator, currentValue, currentIndex, and the original array.

Which of these is NOT a typical use case for reduce?

A Flattening an array of arrays

B Replacing elements in an array

C Calculating a product of numbers

D Counting occurrences of items

Replacing elements is better done with map or forEach, not reduce.

Explain how the reduce method works in JavaScript and give a simple example.

Think about how you combine items one by one into a single result.

Describe a real-life situation where using reduce would be helpful.

Imagine you want to add up prices or count items in a list.

Practice

1. What does the reduce method do in JavaScript?

easy

A. It combines all array elements into a single value.

B. It creates a new array with filtered elements.

C. It sorts the elements of an array.

D. It adds a new element to the end of an array.

Solution

1. Step 1: Understand the purpose of reduce

   The reduce method processes each element of an array to produce one combined result.

2. Step 2: Compare with other array methods

   Unlike filter or sort, reduce returns a single value, not a new array or sorted array.

3. Final Answer:

   It combines all array elements into a single value. -> Option A

4. Quick Check:

   Reduce = combine into one value [OK]

Hint: Reduce combines array items into one value quickly [OK]

Common Mistakes:

• Confusing reduce with filter or map
• Thinking reduce returns an array
• Assuming reduce sorts elements

2. Which of the following is the correct syntax to use reduce on an array arr to sum its elements (safe for empty arrays)?

easy

A. arr.reduce((acc, val) => acc + val, 0);

B. arr.reduce((acc, val) => acc + val);

C. arr.reduce(acc, val => acc + val);

D. arr.reduce((val, acc) => val + acc);

Solution

1. Step 1: Check the callback function parameters

   The callback must have (accumulator, currentValue) in that order.

2. Step 2: Verify initial value usage

   Providing 0 as the initial value ensures correct sum starting point.

3. Final Answer:

   arr.reduce((acc, val) => acc + val, 0); -> Option A

4. Quick Check:

   Correct syntax with initial value = arr.reduce((acc, val) => acc + val, 0); [OK]

Hint: Use (acc, val) and initial value for sum [OK]

Common Mistakes:

• Swapping accumulator and current value parameters
• Omitting initial value causing errors on empty arrays
• Incorrect arrow function syntax

3. What is the output of the following code?

const numbers = [1, 2, 3, 4];
const result = numbers.reduce((acc, val) => acc * val, 1);
console.log(result);

medium

A. 10

B. 24

C. 1234

D. Error

Solution

1. Step 1: Understand the reduce operation

   The reduce multiplies all elements starting with initial value 1.

2. Step 2: Calculate the product step-by-step

   1 * 1 = 1, 1 * 2 = 2, 2 * 3 = 6, 6 * 4 = 24.

3. Final Answer:

   24 -> Option B

4. Quick Check:

   Product of array = 24 [OK]

Hint: Multiply stepwise with initial 1 for product [OK]

Common Mistakes:

• Adding instead of multiplying
• Forgetting initial value 1
• Concatenating numbers as strings

4. Find the error in this code snippet:

const arr = [2, 4, 6];
const sum = arr.reduce((acc, val) => acc + val);
console.log(sum);

medium

A. Accumulator and current value are swapped.

B. Arrow function syntax is incorrect.

C. Missing initial value causes error on empty array.

D. Reduce method cannot sum numbers.

Solution

1. Step 1: Check for initial value in reduce

   The reduce call lacks an initial value, which is risky if array is empty.

2. Step 2: Understand consequences

   Without initial value, reduce uses first element as accumulator, which works here but fails on empty arrays.

3. Final Answer:

   Missing initial value causes error on empty array. -> Option C

4. Quick Check:

   Initial value missing = Missing initial value causes error on empty array. [OK]

Hint: Always provide initial value to avoid errors [OK]

Common Mistakes:

• Assuming reduce always works without initial value
• Confusing parameter order
• Thinking reduce can't sum numbers

5. Given an array of objects representing sales:

const sales = [
  { product: 'A', amount: 10 },
  { product: 'B', amount: 20 },
  { product: 'A', amount: 15 }
];

// Use reduce to find total sales amount for product 'A'

Which code correctly calculates this total?

hard

A. sales.reduce((acc, item) => acc + item.amount);

B. sales.reduce((acc, item) => acc + item.amount, 0);

C. sales.reduce((acc, item) => item.product === 'A' ? acc + item.amount : acc);

D. sales.reduce((acc, item) => acc + (item.product === 'A' ? item.amount : 0), 0);

Solution

1. Step 1: Filter and sum only product 'A'

   The reduce callback adds item.amount only if item.product is 'A', else adds 0.

2. Step 2: Provide initial value 0

   Starting from 0 ensures correct total even if no 'A' products exist.

3. Final Answer:

   sales.reduce((acc, item) => acc + (item.product === 'A' ? item.amount : 0), 0); -> Option D

4. Quick Check:

   Filter and sum with initial 0 = sales.reduce((acc, item) => acc + (item.product === 'A' ? item.amount : 0), 0); [OK]

Hint: Add amounts conditionally with initial 0 [OK]

Common Mistakes:

• Summing all amounts without filtering
• Omitting initial value causing errors
• Incorrect conditional logic inside reduce