View profile

Essential Array methods in JavaScript. Part 4 - reduce

Coderslang Master
Coderslang Master
Hey, there! Today you’ll get even close to your gold of becoming a Full Stack JavaScript developer by learning another essential JS method - Array.reduce.
This is the fourth part of the series, and if you’ve missed the first three, then you can find them here:
This issue is written as a dialogue with an imaginary student. Who knows, maybe it’s you :)

The reduce function is the most complex of the standard JavaScript array functions. With reduce, you can compress (reduce) an array to one element.
For the reduce function to work properly, you’ll need two parameters — the reducer function and the initial value.
The reducer function, unlike the functions you will use in map and filter, takes two parameters. The first is the accumulator. The second is the current element of the array.
Let’s see how we can calculate the sum of all elements of an array using reduce.
To make it a little clearer for you, I will rewrite this example using the for loop.
— This is clearer, but it looks like there is at least one extra line.
— It’s good that you pay attention to the extra code. The assignment sum = prev makes the for loop example as similar as possible to the previous one with reduce.
— Can you elaborate on the “initial value” that we pass as the second parameter?
— When the reduce function starts, it only has the first element of the array, so you need to add an initial value to start the calculations. Most often, this is an empty string, null, or an empty object.
Let’s see what happens if you try to reduce on an array of objects and don’t add an initial value.
Here’s an example of how you could calculate the total salary for the year of all employees of the company.
As a result, a weird strange string [object Object]7500010200047000322000 was displayed in the console, due to the fact that we do not added the initial value of the accumulator.
Let’s add one console.log to better understand what prev is on each iteration:
New lines will appear in the console.
Here’s what happened:
  1. We did not specify the initial value of the accumulator and therefore the first element was used as the accumulator the employees array.
  2. By default, when trying to add an object to a number, both were converted to a string.
  3. On the second iteration in prev string [object Object]75000 which will stick together with numbers until it ends array.
  4. Eventually we will end up with the string [object Object]7500010200047000322000.
— It doesn’t look like the sum of salaries of all employees.
— You are right. Does not look like it. Fortunately, fixing the problem is very easy.
Let’s add the initial value of the accumulator and make sure that the salary is calculated correctly.
The reduce function can be combined with map and filter, but it is important that reduce is the last one in the chain.
Let’s try to calculate the total salary of those employees who earn more than one hundred thousand.
That’s it! If you’ve enjoyed this issue, you should definitely solve a couple of JavaScript coding tasks.
Cheers!
Coderslang: Become a Software Engineer
Don’t miss out on the other issues by Coderslang Master
Did you enjoy this issue? Yes No
Coderslang Master
Coderslang Master @coderslang

Coderslang: Become a Software Engineer

You can manage your subscription here.
In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.