Blog

Using forEach, map, filter, and reduce

In JavaScript programming, forEach, map, filter, and reduce are the built-in array functions available. If you want to manually customize and control the array data type in a JavaScript webscript or webpage, then these functions help programmers to process or deal with array elements in a more functional and expressive order without using traditional loops like for or while.

So, let’s learn more about the built-in functions like forEach, map, filter, and reduce in JavaScript programming.

forEach() JavaScript Function.

In JavaScript programs, the forEach() function method is used to repeat the array elements from start to end in the given program array and execute the function present in each array element. Where the forEach() function does not return anything, here the forEach() function is used in side effects. For example, logging or customizing external variables in JavaScript programs.

forEach() function syntax.

array.forEach(function(element, index, array) {

// Here is the code to execute for each element in the current array

});

forEach() function description.

• element – It indicates the current item in the current array.
• index (optional) – Here is the index location of the current array item in forEach().
• array (optional) – This is the array elements in which the array element is being used.

forEach() function example.

let integer = [3, 4, 7, 8, 9];

integer.forEach(function(int) {

console.log(int * 3);

});

forEach() program explanation.

Here in the above program forEach() function repeats each array element from start to end in the integer array element and multiplies it by 3.

Important notes of forEach() function.

The forEach() function in JavaScript array cannot be broken or exited immediately, which means, forEach() always processes the complete array element by repeating it.

forEach() function is mainly used as a side effect rather than replacing or filtering array data.

map() JavaScript function.

The map() function method in any JavaScript program creates a new array element by applying a function to each element in the basic array. The map() function returns a new array, and does not modify the original array element.

Syntax of map() function.

let newArray = array.map(function(element, index, array) {

//Here is the code to execute each array element, returning a modified value

});

Description of map() function.

• element – This is the current array item in the array.
• index (optional) – This is the index location of the current array item being used.
• array (optional) – This is the array element being processed or repeated.

Example of map() function.

let integer = [3, 4, 7, 9, 12];

let tripleinteger = integer.map(function(int) {

return int * 3;

});

console.log(tripleinteger);

Explanation of map() function.

In this program, map() creates a new array named tripleinteger, where each array element multiplies the corresponding element from the original array by 3 and previews the result.

Important notes of map() function.

In JavaScript programs, map() function always returns you a new array in the output, where your original array elements remain unchanged.

The use of map() function in JavaScript is helpful in modifying the elements of an array.

filter() JavaScript Function.

The filter() function method in a JavaScript program creates a new array with all the elements that pass the function testing by the given filter() function. The filter() function is used to filter and process unwanted array elements based on a particular condition.

Syntax of filter() JavaScript Function.

let newArray = array.filter(function(element, index, array) {

// Here returns true if the array element should be added to the new array, else returns false

});

Description of filter() JavaScript Function.

• element – This is the current item in the array in the function.
• index (optional) – This is the index location of the current array item.
• array (optional) – This is the array element in the current array which is being processed from start to end.

Example of filter() JavaScript Function.

let integer = [11, 14, 21, 22, 90, 81, 100];

let eveninteger = integer.filter(function(int) {

return int % 2 === 0;

});

console.log(eveninteger);

Explanation of filter() function.

The filter() function creates a new array eveninteger in the JavaScript program where only the original array elements have even integer values.

Important notes of filter() function.

Here the filter() function returns a new array in the JavaScript program which contains only those array elements which satisfy the given condition.

If no array element in the filter() function satisfies the condition, then it returns an empty array.

reduce() JavaScript function.

The reduce() function method applies a reducer function to each element of an array (from left to right), executes the commands the programmer applies, stores the output result, and returns a single value.

Syntax of reduce() JavaScript function.

let result = array.reduce(function(accumulator, currentValue, index, array) {

//This returns the updated accumulator value after processing the current array element

}, initialValue);

Description of reduce() function.

• Accumulator – The accumulated value returned after each array repetition. This value can be anything: it can be a number, object, array, etc.
• currentValue – This is the current array item being processed in the current program.
• index (optional) – This is the index location of the current array item.
• array (optional) – This is the array element to be processed.
• initialValue (optional) – This is the initial value for the accumulator, if this value is not provided, then the first element of the array is used as the initial value.

Example of reduce() JavaScript function.

let integer = [7, 11, 8, 9, 10];

let total = integer.reduce(function(acc, int) {

return acc + int;

}, 0);

console.log(total);

Explanation of reduce() JavaScript function.

Here in the current program, the reduce() function returns the total of all integers in the array.

Where acc (accumulator) starts at 0, and for every integer in the array, updates acc by adding it to the current integer.

Example using reduce() to find the maximum value.

let integer = [0, 3, 7, 400, 234];

let max = integer.reduce(function(acc, int) {

return int > acc ? int : acc;

}, integer[0]);

console.log(max);

Explanation of reduce() JavaScript function.

In the above program, reduce() function is used to compare each integer number and find the maximum value and display it.

Important Notes of reduce() JavaScript Function.

In JavaScript programs, reduce() function can be used for multiple purposes, such as totaling values, finding maximum/minimum values, or even flattening array elements.

The initialValue in reduce() is very important to ensure that the first element in the array is handled properly, especially when using operations like totaling.

Detail about forEach, map, filter, and reduce function.

Conclusion of forEach, map, filter, and reduce.

Use forEach() function in JavaScript program when you need to repeat array elements for side effect in JavaScript program.

Use map() function in JavaScript program when you need to convert array elements into a new array.

Use filter() function in JavaScript program when you need to select array elements based on a particular condition and create a new array.

Use reduce() function in JavaScript program when you need to accumulate values ​​into a single output.