forEach, map, filter and reduce in JavaScript Array – Code Example

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
JavaScript

Map

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,40

Filter

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
100

In 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

Sticky Navigation Bar On Scroll Using JavaScript

Dynamic Bootstrap Thumbnail Gallery With JavaScript