Скачать или смотреть Understanding .reduce in JavaScript: From Concatenation to Total Sum

Explore how the `.reduce` method works in JavaScript. Learn about correct initialization with starting values, avoiding string concatenation, and how arrow functions impact return values.
---
This video is based on the question https://stackoverflow.com/q/62975567/ asked by the user 'Jason' ( https://stackoverflow.com/u/13914183/ ) and on the answer https://stackoverflow.com/a/62975596/ provided by the user 'CherryDT' ( https://stackoverflow.com/u/1871033/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: .reduce returning concat instead of total sum

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding .reduce in JavaScript: From Concatenation to Total Sum

JavaScript offers a powerful array method called .reduce, which can transform your array data into a single value. However, many developers, especially beginners, face challenges when using this method, leading to unexpected behaviors like concatenation instead of summation. In this guide, we will address a common issue with the .reduce method, breaking down why it behaves unexpectedly in some cases, and how to correctly use it to get the desired sum.

The Problem: Observing Concatenation Instead of Summation

Consider the following array of items, each with a name and a price:

[[See Video to Reveal this Text or Code Snippet]]

When using the .reduce method to sum the prices, you may encounter unexpected results like:

[[See Video to Reveal this Text or Code Snippet]]

What's Going Wrong?

The output total [object Object]200105500100025 indicates that instead of summing the prices as expected, JavaScript is performing string concatenation due to how the reduce function is initialized.

Breaking Down the Solution

The Importance of Initial Value

Starting with .reduce

The key to using .reduce correctly is understanding the second argument it takes: the initial value. When you're calculating a sum, this initial value is crucial.

Without Initial Value:
When you call .reduce without an initial value, JavaScript uses the first element of the array as the initial value, which is an object in this case. As a result, the calculation starts from an object and attempts to add a number to it, leading to concatenation.

[[See Video to Reveal this Text or Code Snippet]]

With Initial Value:
By providing 0 as the second argument, you ensure that the first iteration starts correctly. This way, total is initialized as a number (0), and the first operation becomes 0 + 100, leading to the expected sum.

[[See Video to Reveal this Text or Code Snippet]]

Arrow Function Return Behavior

Another common pitfall is related to how arrow functions return values.

When you write:

[[See Video to Reveal this Text or Code Snippet]]

You are not actually returning anything because no explicit return statement is used, which results in undefined.

Instead, you should write:

[[See Video to Reveal this Text or Code Snippet]]

This version implicitly returns the sum, allowing .reduce to work correctly.

Conclusion

By paying attention to the initial value and understanding how arrow functions return values, you can effectively use the .reduce method to obtain the desired outcome – a sum of numbers rather than a concatenation of strings and objects. Remember:

Always provide an initial value when using .reduce for calculations.

Know the difference between implicit and explicit returns in arrow functions.

Following these guidelines will lead to clearer codes and fewer debugging headaches in your JavaScript journey.