We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to publish this job!

Login or register
to save this job!

Login or register
to save interesting jobs!

Login or register
to get access to all your job applications!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Login or register
to save articles!

Login to see the application

Engineers who find a new job through WorksHub average a 15% increase in salary 🚀

You will be redirected back to this page right after signin

Blog hero image

Reduce: The Powerful and Mighty

Shohail ahmed 29 July, 2021 | 2 min read

“Every developer who specializes in any programming language will tell you there’s a powerful tool the language provides that they rarely use and wish they knew more about. For me, it’s Array.prototype.reduce.”

What is Reduce?

The reduce() method is used to apply a function to each element in the array to reduce the array to a single value.

The syntax looks like this

const reduced=arr.reduce((acc,val,ind,srcArr)

reduce() takes a callback with 4 arguments

  1. Accumaltor(acc): the accumulator accumulates all of the callbacks returned values.
  2. currentValue(val): The current element being processed in the array.
  3. index(idx): The index of the current element being processed in the array. Starts from index 0 if an initialValue is provided. Otherwise, starts from index 1.
  4. sourceArray(srcArr): The array on whichreduce() is being called.

Example For Reduce:

You can think of reduce() as a for loop, that is specifically for using the values of an array to create something new. Consider the following code:

const arr=[1,2,3,4,5]
const reduced=arr.reduce((acc,val)=>acc+val); ///15
//Array has been reduced to a single value`

Passing initial value to reduce

we can pass initial value to reduce for Example:

`const arr=[1,2,3,4,5]
const reduced=arr.reduce((acc,val)=>acc+val,100); ///115

First value in accumulator is 100 Pretty cool huh? With just one line of code we can take the number 100 and add it to the sum of an entire array!

Reduce can return objects

Methods like forEach and map were created to avoid side effects, and reduce is no exception. In this case, however, reduce can return an Object other than an Array

let’s take an example for Counting Array Elements and returning it in Object

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {} );
// counted Names is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

Note that the {}, which is the last argument to reduce, is starting/default object to be returned. If there were no items in the array, {} would be returned. Also appreciate that an array method returns an object literal and not a modified array!

Awesome!

let’s see one more example where we group an array of people’s info with age

1_c4SMmlgtSkteUgY7OgCJoA.png

Reduce makes our life easier It’s crazy that I’ve not used reduce more.

Learn More: MDN : Array.prototype.reduce()

Thanks!

Originally published on medium.com

Related Issues

Concordium / Testnet3-Challenges
  • Open
  • 0
  • 0
  • Intermediate
    Concordium / Testnet3-Challenges
    Concordium / Testnet3-Challenges
    • Open
    • 0
    • 0
    • Intermediate
      Concordium / Testnet3-Challenges
      Concordium / Testnet3-Challenges
      • Open
      • 0
      • 0
      • Intermediate
        Concordium / Testnet3-Challenges
        Concordium / Testnet3-Challenges
        • Open
        • 0
        • 0
        • Intermediate

          Get hired!

          Sign up now and apply for roles at companies that interest you.

          Engineers who find a new job through WorksHub average a 15% increase in salary.

          Start with GitHubStart with Stack OverflowStart with Email