Reduce method in Javascript - Mini Project: Build & Apply

Sum of Prices Using the Reduce Method

📖 Scenario: You are managing a small online store. You have a list of products with their prices. You want to find out the total price of all products combined.

🎯 Goal: Build a program that uses the reduce method to calculate the total price of all products in the list.

📋 What You'll Learn

Create an array of product objects with exact names and prices

Create a variable to hold the initial total price

Use the reduce method with a callback function to sum all product prices

Print the final total price

💡 Why This Matters

🌍 Real World

Calculating totals is common in shopping carts, budgets, and reports.

💼 Career

Knowing how to use reduce helps in data processing and summarizing information efficiently.

1

Create the products array

Create an array called products with these exact objects: { name: 'Book', price: 15 }, { name: 'Pen', price: 5 }, { name: 'Notebook', price: 10 }.

Javascript

// Your code here

Hint

Use square brackets [] to create an array and curly braces {} for each product object.

2

Create the initial total variable

Create a variable called initialTotal and set it to 0.

Javascript

const products = [
  { name: 'Book', price: 15 },
  { name: 'Pen', price: 5 },
  { name: 'Notebook', price: 10 }
];
// Your code here

Hint

Use const to create a variable that holds the starting total price.

3

Use reduce to calculate total price

Create a variable called totalPrice and set it to the result of calling products.reduce with a callback function that adds the current product's price to the accumulator. Use initialTotal as the starting value.

Javascript

const products = [
  { name: 'Book', price: 15 },
  { name: 'Pen', price: 5 },
  { name: 'Notebook', price: 10 }
];
const initialTotal = 0;
// Your code here

Hint

The reduce method takes a function with two parameters: the accumulator and the current item. Add the current product's price to the accumulator.

4

Print the total price

Write a console.log statement to print the value of totalPrice.

Javascript

const products = [
  { name: 'Book', price: 15 },
  { name: 'Pen', price: 5 },
  { name: 'Notebook', price: 10 }
];
const initialTotal = 0;
const totalPrice = products.reduce((accumulator, product) => accumulator + product.price, initialTotal);
// Your code here

Hint

Use console.log(totalPrice) to show the total price in the console.

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