Using the reduce array helper in ES6

ES6 comes with a number of helper methods that can be applied to arrays. One of these is called reduce which can be used in aggregation scenarios where we in each loop need to use the result of the previous loop. Reduce is certainly a bit more difficult to grasp and use than the other array helpers introduced in ES6. If you’re familiar with C# and LINQ then the reduce array helper is similar to the Aggregate LINQ extension method.

Let’s see an example.

We’ll start with the most basic application of reduce and calculate the sum of all integers in an array:

let numbers = [1,2,3,4,5]

let sum = numbers.reduce(function(partial, number) {
  return partial + number
}, 0)

So reduce accepts two arguments. The first argument is a function which in turn accepts two arguments. The second argument in the reduce function is a starting value, 0 in this case. The reduce function works in the following way:

  • In the first iteration it takes the startup value, 0 in this case, and feeds it to the first parameter “partial” of the callback function
  • Still in the first iteration the “number” parameter gets the value of the first element in the array, i.e. 1
  • The callback function body is executed on the incoming parameters 0 and 1 therefore it returns 0 + 1 = 1
  • The result from the first iteration, i.e. 1, is then fed to the “partial” argument along with the second element of the array in the second iteration
  • The second iteration returns 1 + 2 = 3 which is used as “partial” in the third iteration
  • The cycle continues until all elements of the numbers array have been used

So the initial value is necessary for the first iteration otherwise there’s nothing to start with. sum will be 15 as expected. If we for some reason provide 5 as the startup value instead of 0 then sum will be 20.

We can use the reduce function for mapping purposes. Note that we can use the map function which is more specialised for mapping elements of an array to another array. However, the example shows how various ES6 array helpers can solve the same problem.

We have the following group of programmers:

let programmers = [
  	 {"name":"John","age":20,"language":"C#"},
     {"name":"Mary","age":24,"language":"Java"},
     {"name":"Jane","age":25,"language":"C++"},
     {"name":"Peter","age":22,"language":"JavaScript"},
     {"name":"Fred","age":21,"language":"C++"},
     {"name":"Sophie","age":28,"language":"C#"},
     {"name":"James","age":27,"language":"Java"},
     {"name":"Charlotte","age":26,"language":"Java"},
]

Now we want to collect all the names in an array. We can use the reduce function as follows:

var names = programmers.reduce(function(previous, prog) {
  previous.push(prog.name)
  return previous
}, [])

The startup value is an empty array which is then populated with each programmer name.

Here’s the names array:

["John","Mary","Jane","Peter","Fred","Sophie","James","Charlotte"]

View all posts related to JavaScript here.

Advertisements

About Andras Nemes
I'm a .NET/Java developer living and working in Stockholm, Sweden.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

ultimatemindsettoday

A great WordPress.com site

Elliot Balynn's Blog

A directory of wonderful thoughts

Robin Sedlaczek's Blog

Developer on Microsoft Technologies

HarsH ReaLiTy

A Good Blog is Hard to Find

Softwarearchitektur in der Praxis

Wissenswertes zu Webentwicklung, Domain-Driven Design und Microservices

the software architecture

thoughts, ideas, diagrams,enterprise code, design pattern , solution designs

Technology Talks

on Microsoft technologies, Web, Android and others

Software Engineering

Web development

Disparate Opinions

Various tidbits

chsakell's Blog

Anything around ASP.NET MVC,WEB API, WCF, Entity Framework & AngularJS

Cyber Matters

Bite-size insight on Cyber Security for the not too technical.

Guru N Guns's

OneSolution To dOTnET.

Johnny Zraiby

Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

%d bloggers like this: