When to use Reduce Javascript method?

The first things that we need to think is: What did we want to do with this code?

Hello everybody! I was a time without create articles, thats why i’m was studying a lot and maintaining a react project that i’m work now, including features and each others.

Today we are here to speak about the REDUCE METHOD as the title says.

The first things that we need to think is: What did we want to do with this code? Does we go to reutilize it? Did we need to create a function to return this value? What did we need to do?

Answering some of this questions that will help us to define what we go to create, the reduce method is available only for arrays, so we actually think, its a array, I go to use filter.. map.. some.. find? Yeah, thats correct, so, let’s think a little more deeply.

• filter its a good practice to use when we only want one property from the original array.
• map method is good choice when we want to return another new array, with the value that you want or something like that..
• some method tests if at least one of the elements in the array passes the test implemented by the assigned function and returns a value of true or false.
• find instead of some, find returns the value of the first element of the array that satisfies the provided test function.

Based on this reasoning, think about the reduce method:

Think, when we should need to use this method?

…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
Am I transforming an array into something other than another array? Use .reduce
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…
…

The idea of .reduce is that you can take an array and transform it into anything else – another array, an object, an integer, literally anything.

See the examples:

1.

[
{ name: ‘Bruno’, age: 24 },
{ name: ‘Marcelly’, age: 29 },
{ name: ‘Igor’, age: 18 }
] -> Just the names -> [‘Bruno’, ‘Marcelly’, ‘Igor’]

2.

[
{ player: ‘p0w3r’, age: 28 },
{ player: ‘Mafioso’, age: 26 },
{ player: ‘br0c4full’, age: 30 },
{ player: ‘NavigatoR’, age: 16 },
] -> Length and age count -> { players: 4, ageTotal: 100}

3.

Try to do this exercise to test your skills!

 

Function Assigment

function sum(arr) {
return arr.reduce((total, num) => {
return total + num
}, 0)
}

Reduce Iteration

Initial Value: 0

First iteration:
total: 0
num: 1

Second iteration:
total: 1
num: 2

Third iteration:
total: 3
num: 3

Function Calling

sum([1, 2, 3])

The very first time the callback function runs, total will be 0 and num will be 1. Then, the next iteration, total will be 1 and num will be 2. The reason total is one is because we previously returned 0 + 1. Then, total will be 3 and num will be 3. Then, there are no more elements in the array so what gets returned is 6.

 

Thanks for reading this article, now its time to practice and understand more about this excellent js method.