Introduction to 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 resultant of reduce() function will be stored in a variable called the accumulator. If suppose array can not contain any values then 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 reduce() function 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 below syntax carefully
Syntax:
var arrayElements=[];
arrayElements.reduce( functionName(total, presentValue, presentIndex, actualArray), intialArrayValue);Explanation: functionName(total, presentValue, presentIndex, actualArrayObject)
This function contains 4 arguments, they are explained below
- total: It is used for initializing the value or used to specify the function 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
JavaScript logic can be written in a separate file and we can include it in an HTML page or we can directly write 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 operation 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 reduce function.
How to Include External JavaScript (.js) file inside HTML page?
We can include external .js file within <head></head> tag by using 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 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
reduce() function used for reducing the array into a single value by performing any operation on to it. Reduce function cannot change the original array elements.