Updated October 12, 2023
Introduction to array reduce() Function JavaScript
The reduce() function reduces the array values into a single value. The reduce() function never modified the original array. The reduce() function operates the array values from left to right. The reduce() function will store the resultant in a variable called the accumulator. If the suppose array can not contain any values, then the reduce() function will not be executed.
Real-Time Application: When we need to perform the constant operation on array values sequentially, like addition, subtraction, multiplication, etc., then the reduce() function is used.
How does reduce() Function work in JavaScript?
reduce() function takes array values as an argument and performs the reduction action by accessing array elements sequentially. Observe the below syntax carefully
Syntax:
var arrayElements=[];
arrayElements.reduce( functionName(total, presentValue, presentIndex, actualArray), intialArrayValue);Explanation: functionName(total, presentValue, presentIndex, actualArrayObject)
This function has 4 arguments, which we will explain below.
- total: It is used for initializing the value or to specify the function’s previous return value.
- presentValue: It is used for specifying the present value of the array.
- presentIndex: It is used for specifying the present index of the array.
- actualArrayObject: It is used for passing the array objects. It is an optional parameter.
- initialArrayValue: It is used for passing any user-defined initial value to the function. It is an optional parameter.
JavaScript Logic
You can write JavaScript logic in a separate file and include it in an HTML page, or you can write it directly inside the HTML page.
reduce() function working principle:
var array=[1,2,3,4];
arrayElements.reduce(getSum(total,array)
{
return total+array;
});As we discussed reduce function performs operations from left to right side:
1. Initially total=0
- array=1 from array elements
- 0+1=1;
2. Now total=1
- Array next element array=2
- 1+2=3;
3. Now total=3
- Array next element array=3
- 3+3=6;
4. Now at last total=6
- Array next element array=4
- 6+4=10;
Same as above, it performs as per the logic defined with the reduce function.
How to Include External JavaScript (.js) file inside HTML page?
We can include an external .js file within <head></head> tag by using the below syntax.
Syntax:
<head>
<script type="text/javascript" src="path to javascript-file.js"></script>
</head>How to Include or write JavaScript (.js) logic inside the HTML page?
We can write inside <head></head> tag or inside <body></body> by using the below syntax.
Syntax:
<head>
<script type="text/javascript">
//JavaScript Code
</script>
</head>OR
<body>
<script type="text/javascript">
//JavaScript Code
</script>
</body>Examples to Implement reduce() Function JavaScript
Below are examples to implement:
Example #1 – With addition
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Reduce function</title>
<!-- JavaScript Logic within the HTML head tag -->
<script>
/* defining array elements */
var arrayElements = [ 5, 10, 15, 20, 25, 30 ];
//logic for addition of all numbers
function getAddition(total, number) {
return total + number;
}
</script>
<!-- CSS styles -->
<style type="text/css">
.addClass {
background: brown;
font-size: 20px;
border: 2px solid green;
text-align: justify;
}
h1 {
color: orange;
align-content: center;
}
body {
background: orange;
}
.sum {
background: green;
font-size: 20px;
border: 2px solid blue;
text-align: justify;
}
</style>
</head>
<body>
<div class="addClass">
<h1 class="h1">Addition with reduce() function</h1>
<p>In this example we covered the addition of all array elements
by using reduction function. It simply adds each element with
previous sum of elements</p>
</div>
<div class="sum">
<script>
/* calling getAddition function from reduce function and displaying sum*/
document.write("Addition of array elements are=>"
+ arrayElements.reduce(getAddition));
</script>
</div>
</body>
</html>Output:
Example #2 – With Multiplication
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Reduce function</title>
<!-- CSS styles -->
<style type="text/css">
.content {
background: aqua;
font-size: 20px;
border: 2px solid red;
text-align: justify;
}
h1 {
color: green;
align-content: center;
}
.main {
background: lime;
font-size: 20px;
border: 2px solid red;
text-align: justify;
}
</style>
</head>
<body>
<div class="content">
<h1 class="h1">Multiplication with reduce() function</h1>
<p>In this example we covered the multiplication of all array
elements by using reduction function. It simply multiplies each
element with previous sum multiples of elements</p>
</div>
<div class="main">
<!-- including JavaScript file within body tag -->
<script type="text/javascript">
//JavaScript Logic
/* defining array elements */
var arrayElements = [ 5, 10, 15, 20, 25, 30 ];
// logic for multiplication of all numbers
function getMuliplication(total, number) {
return total*number;
}
/* calling getMltiplication function from reduce function and displaying sum */
document.write("Muliplication of array elements are=>"
+ arrayElements.reduce(getMuliplication));
</script>
</div>
</body>
</html>Output:
Example #3 – With division
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Reduce function</title>
<!-- CSS styles -->
<style type="text/css">
.content {
background: lime;
font-size: 20px;
border: 2px solid blue;
text-align: justify;
}
h1 {
color: black;
align-content: center;
}
.main {
background: red;
font-size: 20px;
border: 2px solid blue;
text-align: justify;
}
</style>
</head>
<body>
<div class="content">
<h1 class="h1">Division with reduce() function</h1>
<p>In this example we covered the division of all array elements
by using reduction function. It simply divides each element with
previous division of elements</p>
</div>
<div class="main">
<!-- including JavaScript file within body tag -->
<script type="text/javascript">
//JavaScript Logic
/* defining array elements */
var arrayElements = [ 5000000000, 100000, 10000, 100, 10, 5 ];
// logic for division of all numbers
function getDivision(total, number) {
return total / number;
}
/* calling getDivision function from reduce function and displaying sum */
document.write("Division of array elements are=>"
+ arrayElements.reduce(getDivision));
</script>
</div>
</body>
</html>Output:
Example #4 – With subtraction
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Reduce function</title>
<!-- including JavaScript file within body tag -->
<script type="text/javascript">
//JavaScript Logic
/* defining array elements */
var arrayElements = [ 105, 20, 10, 4, 3, 2 ];
// logic for subtraction of all numbers
function getSubtraction(total, number) {
return total - number;
}
</script>
<!-- CSS styles -->
<style type="text/css">
.content {
background: lightblue;
font-size: 20px;
border: 2px solid red;
text-align: justify;
}
h1 {
color: black;
align-content: center;
}
.main {
background: lime;
font-size: 20px;
border: 2px solid red;
text-align: justify;
}
.orginal {
background: olive;
font-size: 20px;
border: 2px solid red;
text-align: justify;
}
</style>
</head>
<body>
<div class="content">
<h1 class="h1">Subtraction with reduce() function</h1>
<p>In this example we covered the Subtraction of all array
elements by using reduction function. It simply subtract each element
with previous subtraction of elements</p>
</div>
<div class="main">
<script>
/* calling getSubtraction function from reduce function and displaying sum */
document.write("Subtraction of array elements are=>"
+ arrayElements.reduce(getSubtraction));
</script>
</div>
<div class="orginal">
<script>
document.write("Original array=>"+arrayElements);
</script>
</div>
</body>
</html>Output:
Explanation: As you can observe from the output reduce() function cannot modify the actual array. We can see it in the above output.
Conclusion
Developers use the reduce() function to perform operations on an array in order to reduce it to a single value. The reduce function cannot change the original array elements. Reduce() is a powerful array method for iterating over an array and accumulating values into a single result. It helps streamline and simplify array manipulation in JavaScript.
Recommended Articles
This is a guide to reduce() Function JavaScript. Here we discuss Syntax JavaScript logic, including, exclude with examples to implement with proper codes and examples. You can also go through our other related articles to learn more –
