JavaScript Array Reduce Method with Example

javaScript array reduce method; Through this tutorial, i am going to show you how to use JavaScript Array reduce() method on arrays with the help of examples.

JavaScript Array reduce() method

The javaScriptreduce() method executes a reducer function on each element of the array and returns a single output value.

Syntax of JavaScript Array reduce() method

The following illustrates the syntax of the reduce() method; as shown below:

arayObject.reduce(reducer [, initialValue])

Here,

• reducer callback function.
• intialValue is optional parameter

JavaScript reduce() Parameters

The reduce() method takes in:

• callback – The function to execute on each array element (except the first element if no initialValue is provided). It takes in
  • accumulator – It accumulates the callback’s return values.
  • currentValue – The current element being passed from the array.
• initialValue (optional) – A value that will be passed to callback() on first call. If not provided, the first element acts as the accumulator on the first call and callback() won’t execute on it.

reduce() Return Value

Returns the single value resulting after reducing the array.

• reduce() executes the given function for each value from left to right.
• reduce() does not change the original array.
• It is almost always safer to provide initialValue.

Example 1 – Sum of All Values of Array using JavaScriptreduce() Method

Here, i will take an example for sum of all values of array using javaScript reduce() method; as shown below:

const numbers = [1, 2, 3, 4, 5, 6];

function sum_reducer(accumulator, currentValue) {
  return accumulator + currentValue;
}

let sum = numbers.reduce(sum_reducer);
console.log(sum); // 21

// using arrow function
let summation = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue
);
console.log(summation); // 21

Output

21
21

Example 2 – Subtracting Numbers in Array using Reduce()

Here, i will take second example using javaScript reduce() to substracting numbers in array; as shown below:

const numbers = [1800, 50, 300, 20, 100];

// subtract all numbers from first number
// since 1st element is called as accumulator rather than currentValue
// 1800 - 50 - 300 - 20 - 100
let difference = numbers.reduce(
  (accumulator, currentValue) => accumulator - currentValue
);
console.log(difference); // 1330

const expenses = [1800, 2000, 3000, 5000, 500];
const salary = 15000;

// function that subtracts all array elements from given number
// 15000 - 1800 - 2000 - 3000 - 5000 - 500
let remaining = expenses.reduce(
  (accumulator, currentValue) => accumulator - currentValue,
  salary
);
console.log(remaining); // 2700

Output

1330
2700

Example 3: Remove Duplicate Items from Array using JS Reduce()

Here, i will take third example for remove duplicate items from array using javaScript reduce() method; as shown below:

let ageGroup = [18, 21, 1, 1, 51, 18, 21, 5, 18, 7, 10];
let uniqueAgeGroup = ageGroup.reduce(function (accumulator, currentValue) {
  if (accumulator.indexOf(currentValue) === -1) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);

console.log(uniqueAgeGroup); // [ 18, 21, 1, 51, 5, 7, 10 ]

Output

[
  18, 21,  1, 51,
   5,  7, 10
]

Conclusion

In this tutorial, you have learned how to use the JavaScript array reduce() with different examples.

More JavaScript Tutorials