AppDividend
Latest Code Tutorials

Javascript Reduce Example Tutorial

168

Get real time updates directly on you device, subscribe now.

Javascript Reduce Example Tutorial is today’s leading topic. The reduce() method is used to apply a function to each element in the array to reduce the array to a single value. The reduce() method executes a provided function for each value of the array from left-to-right. The return value of the function is stored in an accumulator. JavaScript’s reduce method is one of the pioneers of functional programming. We need to use the reduce function when you want to add them all up.

It is similar to both map and filter but, it differs in the callback arguments. The callback now receives the accumulator (it accumulates all the return values. Its value is the accumulation of the previously returned accumulations), the current value, the current index and finally the whole array. If you don’t pass in an initial value, reducer will assume the first item in your array is your initial value. This worked fine in the first few examples because we were adding up a list of numbers.

If you want to learn more about the latest Javascript tutorials then check out this The Complete Javascript Course 2018.

Javascript Reduce Example Tutorial

The syntax of Reduce function is the following.

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

# or

array.reduce(callback[, initialValue]);

Let us take an example of the Reduce function and see how this works.

// server.js

const data = [5, 10, 15, 20, 25];

const res = data.reduce((total,currentValue) => {
  return total + currentValue;
});

console.log(res); // 75
  1. In this example, the reduce function accepts two parameters, total and the current value.
  2. The reduce() method cycles through each value in an array much like it would in a for-loop.
  3. In this particular example, we want to add the current value to the total values.
  4. The calculation is repeated for each value in the array, but each time the current value changes to the next value in an array, moving right.
  5. When there are no more values left in an array, the method returns the total value.

Flattening an array of arrays with the Reduce Method

We can use reduce to flatten nested amounts into a single array.

We set the initial value to an empty array and then concatenate the current value to the total.

// server.js

const data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const flatValues = data.reduce((total, value) => {
  return total.concat(value);
}, []);

console.log(flatValues);

 

Javascript Reduce Example Tutorial

Earn a Tech Degree and get the skills like Frontend Development or Javascript Development that can help you to launch a career. Start your free trial

You must return something for the reduce function to work. Always double check and make sure that you’re returning the value you want. When your reductor function is called, its return value becomes the new previousValue argument for next time the reductor function is called. That’s the magic. After the reductor function is called and given the very last object in the array, its return value will be the return value of reduce().

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.