- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use Array.prototype.reduce() method in JavaScript?
The array.reduce() method is used to reduce the whole array into a single value by performing some tasks on every element. For example, when we want to get a sum of all elements of the array, we need to reduce the whole array into a single value which is the final sum of all elements of the array.
The array.reduce() method keeps track of the resultant value from the previous element. After that, it performs the task on the next element by using the resultant value we got from the previous element. The first element of the array considers the initial value passed as a parameter to a resultant value. In this tutorial, we will learn to use JavaScript's Array.prototype.reduce() method.
Syntax
Users can follow the syntax below to use the array.reduce() method.
array.reduce((previousResult, element, index, array) => {
// perform a task
}, startingValue);
We have passed the arrow function as a first parameter value in the above syntax. The arrow function works as an inline callback function.
array.reduce(callback, startingValue);
In the above syntax, the callback is a callback function.
Parameters
previousResult − It is a resultant value we get from performing some operations on the previous array element.
element − It is an element of the array at the index position.
Index − It is the current index of the array element.
Array − It is an array itself to use inside the callback function.
startingValue − It is the initial value to initialize the previousResult variable.
callback − It is a function that invokes every element of the array.
Return Value
The array.reduce() method returns the final resultant value after performing some task on all array elements.
Example 1
In the example below, we have created the array of numbers and initialized it with some numerical values. After that, we used the array.reduce() method to find the multiplication of all numbers.
Also, we have used the inline callback function as the first parameter of the reduce() method. In the callback function, we multiply the previousResult variable’s value with the element and return it.
<html>
<body>
<h2>Using the <i>array.reduce()</i> method to find a factorial of a number in JavaScript.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let factorial = numbers.reduce((previousResult, element) => {
return previousResult = element * previousResult;
}, 1)
output.innerHTML += "The factorial of 10 is " + factorial;
</script>
</body>
</html>
Example 2
In the example below, we have used the array.reduce() method to concat all array strings in a single string. We have used the ‘+’ operator to merge the current string element with the previousResult into the callback function.
<html>
<body>
<h2>Using the <i>array.reduce()</i> method to merge all strings of the array in JavaScript.</h2>
<div id="output"> </div>
<script>
let output = document.getElementById('output');
let strings = ["Welcome", "To", "the", "TutorialsPoint", "blogs", "!"];
function callback(previousResult, stringElement) {
return previousResult + " " + stringElement;
}
let message = strings.reduce(callback, "");
output.innerHTML += "The Message created from the array of the string values is " + message;
</script>
</body>
</html>
Example 3
In the example below, we are finding the sum of element–index values. Users can see how we have used the array index in the callback function.
<html>
<body>
<h2>Using the <i>array.reduce()</i> method.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let numersArray = [20, 30, 40, 50, 60, 70, 80, 90, 100];
let finalValue = numersArray.reduce((previousResult, element, index, array) => {
return previousResult + element - index;
}, 0);
output.innerHTML += "The resultant value after performing operations on array element is " + finalValue;
</script>
</body>
</html>
Example 4
In this example, we have created an array of objects. Every object of the array contains the emp_id, emp_name, and salary. We have used the reduce() method to get the total salary of all employees. In the callback function of reduce() method, we access every object and add its salary property’s value to the total variable. At last, it returns the total of all employee’s salaries.
<html>
<body>
<h2>Using the <i> array.reduce() </i> method.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let arrayOfObjects = [
{ emp_id: "10", emp_name: "Shubham", salary: 10000 },
{ emp_id: "20", emp_name: "Akshay", salary: 20000 },
{ emp_id: "dfd0", emp_name: "John", salary: 20000 },
{ emp_id: "10", emp_name: "Mukund", salary: 50000 },
{ emp_id: "10", emp_name: "salman", salary: 5000 }
]
let totalSalary = arrayOfObjects.reduce((total, object, index, array) => {
return total + object.salary;
}, 0);
output.innerHTML += "The total salary of all employees is " + totalSalary;
</script>
</body>
</html>
Users learned to use the Array.prototype.reduce() method to convert the whole array into a single array value. We have seen the use cases of the reduce() method via different examples. Also, we can use the array.reduce() method to find a minimum and maximum value from the array.
When we invoke the array.reduce() method by taking an empty array as a reference, then it returns an error.
128 Views
