AppDividend
Latest Code Tutorials

Array Foreach, Map, Filter, Reduce, Concat Methods in Javascript

664

Hey, web developers, In today’s AppDividend Tutorial, I have briefly described Array Foreach, Map, Filter, Reduce, Concat Methods in Javascript. I dedicate this article only for these methods because, in Pure Functional Programmingthis kind of method is required to perform some operations on an Array.

If you do not know What Pure Functions is, then check out my Pure Functions in Javascript article on this website.

Arrays

All the programming Languages have this kind of Data Structure to hold and manipulate the data and Javascript is not different.

We all know Arrays collection of variables, and we all have used to perform some operations like Creating an array, Removing an Item from an Array, Sorting the data of an Array and other manipulations. In Functional Programming, we are using functions like foreach, map, filter, reduce, concatAll and other Higher Order Functions. So today I am describing these functions in deep and show you how you can use in various scenarios.

Array forEach, Map, Filter, Reduce, ConcatAll Methods in Javascript

forEach

// main.js

let ipl = [1,2,3,4,5];
ipl.forEach(x => console.log(x * x));
console.log(ipl);

If you directly run above code in the browser, then you might face the following issue.

Possible Errors

  1. You can get any syntax error.
  2. If you perform code directly in your browser, then chances are very high to fail the webpack compilation process.

Possible Solutions

Related Posts
1 of 5
  1.  Beginner’s Guide To Setup ES6 Development Environment  Follow this article strictly and put above code in the main.js file

Here, the forEach function is creating a new array and then assign all the new values to the new array.

Output:

1
4
9
16
25
[1, 2, 3, 4, 5]

So, the ipl array remains as it is but the changes are happening in the new array and we have displayed the new array’s item one by one.

map

The map() method creates a new array with the results of a provided function on every element in this array.

//main.js

let ipl = [1, 2, 3, 4];
let cpl = ipl.map(function(x) {
    return x * 4;
});
console.log(cpl);
console.log(ipl);

Output

[4, 8, 12, 16]
[1, 2, 3, 4]

filter

The filter() method creates a new array with all elements that pass the condition given by the provided function.

//main.js

let ipl = [1, 2, 3, 4,5,6,7,8,9];
let cpl = ipl.filter(x => {
    return x > 4;
});
console.log(cpl);
console.log(ipl);

Output

[5, 6, 7, 8, 9]
[1, 2, 3, 4, 5, 6, 7, 8, 9]

reduce

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value. (Mozilla Developer Network)

let ipl = [1, 2, 3, 4];
let cpl = ipl.reduce((x,y) => {
    return x + y;
});
console.log(cpl);

Output

10

concat

The concat() method is used to merge two or more arrays.

This method does not change the existing arrays but instead returns a new array.  (Mozilla Developer Network)

//main.js

let ipl = [1, 2, 3, 4];
let cpl = [2,4,6,8];
var merge = ipl.concat(cpl);
console.log(merge);
console.log(ipl);
console.log(cpl);

Output

[1, 2, 3, 4, 2, 4, 6, 8]
[1, 2, 3, 4]
[2, 4, 6, 8]

Combination of map, filter and reduce method

//main.js

let ipl = [1, 2, 3, 4];
let cpl = ipl.map(x => x * 2)
             .filter(x => x > 3)
             .reduce((x, y) => x + y);
console.log(cpl);
console.log(ipl);

Output

18
[1, 2, 3, 4]

 

If you still have any doubt then ask in a comment below, I am happy to help you out.

 

Leave A Reply

Your email address will not be published.