Learn Reducing Arrays with reduce | Advanced Array Manipulation


              123
            
const numbers = [10, 20, 30, 40];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // Output: 100


              123456789101112131415
            
const items = [
  { name: "apple", type: "fruit" },
  { name: "carrot", type: "vegetable" },
  { name: "banana", type: "fruit" },
  { name: "celery", type: "vegetable" }
];
const grouped = items.reduce((acc, item) => {
  if (!acc[item.type]) {
    acc[item.type] = [];
  }
  acc[item.type].push(item.name);
  return acc;
}, {});
console.log(JSON.stringify(grouped));
// Output: { fruit: ["apple", "banana"], vegetable: ["carrot", "celery"] }

How `reduce` Works Step by Step

The reduce method loops through the array from the first element to the last;
On each iteration, it calls the callback function with two main arguments: the accumulator (which stores the ongoing result) and the current value (the current array item);
The first time the callback runs, the accumulator is set to the initial value you provide (if omitted, it defaults to the first array element);
The callback returns a new value for the accumulator, which is used in the next iteration;
After the last item, reduce returns the final value of the accumulator.

For example, when summing numbers, the accumulator starts at 0, and each number is added in turn. When grouping objects, the accumulator might start as an empty object, and each object is added to a group based on a property.

Common Pitfalls and Best Practices with `reduce`

When using reduce, there are some common pitfalls to avoid:

Forgetting to set an initial value can cause unexpected results, especially with empty arrays;
The accumulator's type should match the final result you want—use 0 for sums, {} for objects, or [] for arrays;
Avoid making your callback too complex. If your logic is hard to follow, consider using other array methods or breaking your callback into smaller functions;
Always double-check that your callback returns the accumulator value on each iteration.

Following these best practices helps you write clear, reliable code with reduce.

1. Which scenario is the best fit for using `reduce`?

2. Complete the reduce callback to count how many times each color appears in the array.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 3

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain more examples of using `reduce`?

What happens if I don't provide an initial value to `reduce`?

Can you show how to use `reduce` to flatten an array?

Awesome!

Completion rate improved to 8.33

Swipe to show menu


              123
            
const numbers = [10, 20, 30, 40];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // Output: 100


              123456789101112131415
            
const items = [
  { name: "apple", type: "fruit" },
  { name: "carrot", type: "vegetable" },
  { name: "banana", type: "fruit" },
  { name: "celery", type: "vegetable" }
];
const grouped = items.reduce((acc, item) => {
  if (!acc[item.type]) {
    acc[item.type] = [];
  }
  acc[item.type].push(item.name);
  return acc;
}, {});
console.log(JSON.stringify(grouped));
// Output: { fruit: ["apple", "banana"], vegetable: ["carrot", "celery"] }

How `reduce` Works Step by Step

The reduce method loops through the array from the first element to the last;
On each iteration, it calls the callback function with two main arguments: the accumulator (which stores the ongoing result) and the current value (the current array item);
The first time the callback runs, the accumulator is set to the initial value you provide (if omitted, it defaults to the first array element);
The callback returns a new value for the accumulator, which is used in the next iteration;
After the last item, reduce returns the final value of the accumulator.

Common Pitfalls and Best Practices with `reduce`

When using reduce, there are some common pitfalls to avoid:

Forgetting to set an initial value can cause unexpected results, especially with empty arrays;
The accumulator's type should match the final result you want—use 0 for sums, {} for objects, or [] for arrays;
Avoid making your callback too complex. If your logic is hard to follow, consider using other array methods or breaking your callback into smaller functions;
Always double-check that your callback returns the accumulator value on each iteration.

Following these best practices helps you write clear, reliable code with reduce.

1. Which scenario is the best fit for using `reduce`?

2. Complete the reduce callback to count how many times each color appears in the array.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 3

Reducing Arrays with reduce

How reduce Works Step by Step

Common Pitfalls and Best Practices with reduce

1. Which scenario is the best fit for using reduce?

2. Complete the reduce callback to count how many times each color appears in the array.

Awesome!

Reducing Arrays with reduce

How reduce Works Step by Step

Common Pitfalls and Best Practices with reduce

1. Which scenario is the best fit for using reduce?

2. Complete the reduce callback to count how many times each color appears in the array.

How `reduce` Works Step by Step

Common Pitfalls and Best Practices with `reduce`

1. Which scenario is the best fit for using `reduce`?

How `reduce` Works Step by Step

Common Pitfalls and Best Practices with `reduce`

1. Which scenario is the best fit for using `reduce`?