Reduce method in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to sum all numbers in the array using reduce.

Javascript

const numbers = [1, 2, 3, 4];
const total = numbers.reduce((acc, curr) => acc [1] curr, 0);
console.log(total);

Drag options to blanks, or click blank then click option'

A+

B-

C*

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction or multiplication instead of addition.

Forgetting to provide the initial value 0.

The reduce method combines all elements by adding them together using the + operator.

2fill in blank

medium

Complete the code to find the product of all numbers using reduce.

Javascript

const nums = [2, 3, 4];
const product = nums.reduce((acc, curr) => acc [1] curr, 1);
console.log(product);

Drag options to blanks, or click blank then click option'

A+

B*

C-

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition instead of multiplication.

Not setting the initial value to 1.

To multiply all numbers, use the * operator inside reduce.

3fill in blank

hard

Fix the error in the reduce function to concatenate all strings in the array.

Javascript

const words = ['I', 'love', 'coding'];
const sentence = words.reduce((acc, curr) => acc [1] curr);
console.log(sentence);

Drag options to blanks, or click blank then click option'

A/

B-

C*

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using arithmetic operators other than + for strings.

Not providing an initial value, which can cause errors with empty arrays.

Strings are combined using the + operator to concatenate them.

4fill in blank

hard

Fill both blanks to create an object counting how many times each word appears.

Javascript

const words = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const count = words.reduce((acc, curr) => {
  acc[curr] = (acc[curr] [1] 0) [2] 1;
  return acc;
}, {});
console.log(count);

Drag options to blanks, or click blank then click option'

A||

B+

C-

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using arithmetic operators instead of logical OR for default value.

Forgetting to add 1 to increment the count.

The expression acc[curr] = (acc[curr] || 0) + 1; means if acc[curr] exists, use it; otherwise, use 0, then add 1.

5fill in blank

hard

Fill all three blanks to create a new object with uppercase keys and values doubled if greater than 10.

Javascript

const data = {a: 5, b: 15, c: 8};
const result = Object.entries(data).reduce((acc, [1]) => {
  const [key, value] = [2];
  if (value [3] 10) {
    acc[key.toUpperCase()] = value * 2;
  }
  return acc;
}, {});
console.log(result);

Drag options to blanks, or click blank then click option'

Aentry

C>

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inconsistently.

Using wrong comparison operators like < or ==.

We use item as the parameter for the reduce callback and destructure it to get key and value. The condition checks if value > 10.

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