들어가기 전에
자바스크립트의 배열 내장 메서드 forEach()와 map()은 주어진 함수를 각각의 요소에 대하여 실행한다는 점, 원본 배열 값이 변경되지 않는 점에서 공통점을 갖고 있지만 반환값이 다르다.
- 반환값
forEach(): undefinedmap(): 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.
하나 씩 예제를 통해 알아보자
forEach()
const array1 = ['a', 'b', 'c'];
const result = array1.forEach(element => console.log(element));
console.log(result);
// expected output: "a"
// expected output: "b"
// expected output: "c"
// expected output: undefined
-
위 코드 예제에서는
forEach의 매개변수로 주어진 콜백함수에 따라,array1의 각 요소('a', 'b', 'c')가 순서대로 매개변수(element)로 전달되어 콘솔에 출력된다. -
result에는undefined가 저장된다.
for문과의 차이점
forEach()의 경우 초기화되지 않은 요소는 반복 대상에서 제외시킨다.
아래 예제 코드를 살펴보자
for문
const arraySparse = [1,3,,7];
let nums = 0;
for (let i = 0; i < arraySparse.length; ++i) {
nums2 += arraySparse[i];
}
console.log(nums2); //NaN
arraySparse의 초기화 되지 않은2번 index도 반복문 대상에 포함된다.2번 index에는undefined가 저장되어있으므로 이를 숫자에 더하는 순간 값이NaN이 되어 버린다.
forEach()
const arraySparse = [1,3,,7];
let nums = 0;
arraySparse.forEach(e => nums += e);
console.log(nums); // 11
- 초기화 되지 않은
2번 index는 반복 대상에서 제외되기 때문에 0, 1, 3번 index를 더한 값인 11이 nums에 저장되어 있다.
map()
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
- 위
map함수는 각 요소 (1, 4, 9, 16)에 대하여 차례대로 2를 곱한 후 그 값을 새로운 배열map1에 저장한다. - 이 때, 원본 배열
array1은 변경되지 않는다.
References
Slow but steady wins the race🏃♂️