Reduce method in JavaScript

Hey readers, in this article we will be learning about Reduce method in JavaScript, what it is and how to use it using an example. If you’re new to JavaScript, then this might be the article that you should read or even if you’re an intermediate.

What is JavaScript?

JavaScript is by far one of the most popular languages used for creating interactive web applications, and websites. It is used in development because JavaScript allows developers to integrate HTML and CSS or SaSS code into it. The web application allows users to engage with it. It also has a strong GitHub community and may be used to develop website animations. Other JavaScript libraries exist, such as React js, which we shall discuss later in this article or you can refer codedamn for React. Example: Building a web server and its interactive capabilities

Animating and visualising web components to provide extra effects
Errors in the form validation and exceptions
Adding functionality and behavior to web pages

What is reduce method in JavaScript?

The reduce method in JavaScript is mainly used for reducing the value of an array into a single value that allows and executes a function for each value in an array right from left to right and returns a value that is being stored in an accumulator.

The syntax of the reduce method in JavaScript is as follows: array.reduce( function(total, currentValue, currentIndex, arr), initialValue )

Details of parameter– The reduce function has five parameters as seen from the syntax, these parameters are described below.

function(total, currentValue, index, arr): This parameter is used and run for each element in an array. Apart from this, it is also a required parameter. Further, there are four more parameters to this method:
total: It is used for specifying the previously returned value of a function or the initialValue. It is also a required parameter.
currentValue: It is used to specify the current value of an element and is a required parameter.
currentIndex: It is mainly used for specifying the current element array index and is an optional parameter, which means you can either give it a value or avoid it.
arr: It is the current array object with elements and is also an optional parameter.
initialValue: It is the value that is to be passed to the function as a parameter which is initialValue. It is an optional parameter.

To understand this more clearly, let’s take an example that has an array and the sum of all the elements in an array is to be returned using the reduce function.

<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Array reduce() Method Example
</title>
</head>
<body style="text-align:center;">
<h1 style="color: light blue;">Codedamn</h1>
<p>
Click here to get the addition of all the elements present in an array
</p>
<button onclick="newFunc()">
Click Here!
</button>
<br><br>
Sum of an array is equal to: <span id="Codedamn"></span>
<!-- Script to use reduce method with an array -->
<script>
var arr = [10, 20, 30, 40, 50, 60, 80, 90];
function sumofArray(sum, num) {
return sum + num;
}
functionnewFunc(item) {
document.getElementById("Codedamn").innerHTML
= arr.reduce(sumofArray);
}
</script>
</body>
</html>

Explanation of the reduced method code

In this, as soon as the button is clicked, the function sumofArray is triggered. This function when triggered performs the code written in it. It adds up all the elements in an array and stores the result in the total variable. This sum variable is then passed to the innerHTML element where it is accessed and displayed onto the web application or the front-end.

All of the JavaScript function is written and executed within the script tag. If we were to display it onto the front-end then the function is passed to an onclick HTML tag. We have covered JavaScript events in another article which is on Codedamn so do check it out. But the short explanation of it is that as soon as the HTML button is clicked, the button tag triggers the onclick function which is a method inside the button tag and the function is executed.

Conclusion

This was about the Reduce method in Javascript; if you want to learn more about Javascript, check out Codedamn of Javascript’s article and course. I hope you enjoyed it; please let us know if you have any questions or recommendations in the comments section.

What is JavaScript?

What is reduce method in JavaScript?

Explanation of the reduced method code

Conclusion

No comments so far