Reduce, Map, Foreach and Filter are all array methods in JavaScript. Each iterates over an array and performs a transformation or computation. Each returns a new array based on the result of the function. This article explains why and how to use them.
JavaScript array functions that can help you with any kind of manipulation or looping through an array of elements in JavaScript. Some of the pre-built functions can have very similar use cases, so I made a list of manipulation functions with their appearance and use cases.
Let’s take a quick look at these methods.
Foreach()
Syntax : array.forEach(function(currentValue, index, arr), thisValue)forEach(), used to run the same code for each element of an array, but doesn’t modify the array and returns undefined.
In essence, forEach works like a traditional for loop, iterating through the array and giving you elements of the array to operate on.
Example
var array = [VueJs, ReactJs, JavaScript];
array.forEach(function(i){
console.log(i);
});
// Output
Vuejs
ReactJs
JavaScriptMap
Syntax: array.map(function(currentValue, index, arr), thisValue)
One of my favorite and most used array methods of all time. As a NodeJs developer, I often use the map in my code. The map() function or method is used to create a new array from an existing array as per condition we apply. Like I want multiple value is array.
Example
const numbers = [65, 44, 12, 4];
const newArr = numbers.map(myFunction)
console.log("Here is your answer : " + newArr)
function myFunction(num) {
return num * 10;
}
// Output
Here is your answer : 650,440,120,40Filter
Syntaxt: array.filter(function(currentValue, index, arr), thisValue)
The filter() function creates a new array filled with elements as per condition apply by a function. The filter() method does not execute the function on empty elements. The filter() method does not change the original array.
Example
const ages = [32, 33, 16, 40];
const result = ages.filter(checkAdult);
console.log(result)
function checkAdult(age) {
return age >= 18;
}
// Output New array as per condition age >= 18
[32,33,40]Reduce
Syntax: array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
The Reduce() method performs a reduce function on array elements. The Reduce() method returns a single value: the cumulative result of the function.
The Reduce() method does not execute the function on empty array elements. The method does not change the original array.
Example
const numbers = [175, 50, 25];
console.log(numbers.reduce(myFunc))
function myFunc(total, num) {
return total - num;
}
// Output
100In the above example total default value is element 0 as a initial value which is 175.
Conclusion
In this article we learn about some JavaScript useful method which we are using mostly in ReactJs, NodeJs, VueJs etc. Hope this article will help you increase your basic JavaScript knowledge.
Related Articles
How Can I Add A Key/Value Pair To An JavaScript Object?
How To Check Value Exists In An Array Using Javascript?
JavaScript Interview Questions And Answers
