[ JavaScript ] map, forEach, reduce

map, forEach, reduce

• map, forEach, reduce는 배열의 모든 요소를 순회하며, 각 요소에 대해 어떤 작업을 수행할 때 사용하는 메서드이다.

map

let Arr = arr.map(callback(currentValue[, index[, array]])[, thisArg])

// currentValue : 현재 처리되고 있는 요소
// index : 현재 처리되고 있는 요소의 index 값
// array : map()을 호출한 배열
// thisArg : callback 함수 내부에서 사용할 this 레퍼런스

• map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1); // [2, 8, 18, 32]

forEach

arr.forEach(callback(currentValue[, index[, array]])[, thisArg])

// currentValue : 현재 처리되고 있는 요소
// index : 현재 처리되고 있는 요소의 index 값
// array : forEach()를 호출한 배열
// thisArg : callback 함수 내부에서 사용할 this 레퍼런스

• forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다.

const array1 = ["a", "b", "c"];

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

// "a", "b", "c"

reduce

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

// accumulator : 누산기, 콜백의 반환값을 누적
// currentValue : 현재 처리되고 있는 요소
// index : 현재 처리되고 있는 요소의 index 값
// array : reduce()를 호출한 배열
// initialValue : accumulator의 초기값

• reduce() 메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환한다.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer)); // 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5)); // 15

map, forEach, reduce 차이점 비교

• map은 새로운 배열을 반환한다.
• forEach는 반환값이 없다.
• reduce는 하나의 값으로 반환한다.

Reference

• Array의 map, filter, reduce, forEach 메소드
• map, reduce 활용하기