forEach(), map(), filter(), reduce() JavaScript
By: Soyoung Chung
Tags: Foreach, Map, Reduce, JavaScript, Filter

Now I am learning forEach() in JavaScript.

We usually use for loop to repeat some statements but actually forEach() is easier than a for statement.

forEach() needs a callback function that needs a parameter.

1. [].forEach(callback, thisArg)

const arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(element){

console.log(element);

// 0 1 2 3 4 5 6 7 8 9 10

});

// 혹은 arrow 함수 가능

arr.forEach(element => console.log(element));

Create an odd array using forEach()

forEach() has no return so we should use return outside of function if it’s needed.

const arr = [0,1,2,3,4,5,6,7,8,9,10];

const oddArray = [];

arr.forEach(function(element){

if(element%2==1) {

oddArray.push(element);

}});

console.log(oddArray);

// [ 1, 3, 5, 7, 9 ]

[].forEach(function(element, index, array))

const arr = [0,1,2,3,4,5,6,7,8,9,10];

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

console.log(`${array}의 ${index}번째 요소 : ${element}`);

});

//0,1,2,3,4,5,6,7,8,9,10의 0번째 요소 : 00,1,2,3,4,5,6,7,8,9,10의 1번째 요소 : 10,1,2,3,4,5,6,7,8,9,10의 2번째 요소 : 20,1,2,3,4,5,6,7,8,9,10의 3번째 요소 : 30,1,2,3,4,5,6,7,8,9,10의 4번째 요소 : 40,1,2,3,4,5,6,7,8,9,10의 5번째 요소 : 50,1,2,3,4,5,6,7,8,9,10의 6번째 요소 : 60,1,2,3,4,5,6,7,8,9,10의 7번째 요소 : 70,1,2,3,4,5,6,7,8,9,10의 8번째 요소 : 80,1,2,3,4,5,6,7,8,9,10의 9번째 요소 : 90,1,2,3,4,5,6,7,8,9,10의 10번째 요소 : 10

Like forEach(), map() also passes through the Array one by one, executes callback function, returns new Array.

2. [].map(callback, thisArg)

const arr = [0,1,2,3];

let squaredArr = arr.map(function(element){

return element * element;

});

// 혹은 arrow 함수 가능

squaredArr = arr.map(element => element * element);

console.log(squaredArr); // [ 0, 1, 4, 9 ]

Each element in the Array is squared and returned to the new Array using a map().

const arr = [0,1,2,3];

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

console.log(`${array}의 ${index}번째 인자 : ${element}`);

return element * element;

});

//0,1,2,3의 0번째 인자 : 00,1,2,3의 1번째 인자 : 10,1,2,3의 2번째 인자 : 20,1,2,3의 3번째 인자 : 3console.log(squaredArr); // [ 0, 1, 4, 9 ]

3. [].filter()

: filters elements of the array using filtering conditions.

var new_array = arr.filter(callback[, thisArg])

[].filter() method returns a new array with filtered elements by callback function.

var arr = [1, 3, 5, 7, 9, 10];

arr.filter(function(e) {

return e % 5 === 0;

}); // (2) [5, 10]arr.filter((e) => e % 5 === 0); // (2) [5, 10]

If there’s no filtered value, []filter() method returns [] instead of undefined.

var arr = [1, 3, 5, 7, 9, 10];

console.log(arr.filter(function(e){return e%6==0}));

// []

4. [].reduce()

: iterates each element in the array and executes something with return value of previous callback and return value of current callback.

arr.reduce(callbackFunction(accumulator, currentValue[, currentIndex, array]){...}[, initialValue])

[].reduce() method attaches array.

callbackFunction

accumulator: return value of previous callback

currentValue: element of current callback

currentIndex: the index of array at the time when current callback is executed.

array: the original array.

[].reduce() sums all elements of array.

var arr = [1, 2, 3, 4, 5];

arr.reduce(function(pre, current){

return pre + current;

},0);

// 15

So, [].reduce() method can be used when the previous value is needed to calculate the current value.