사건의 발단
자바스크립트에서 배열 내장 함수를 배우던 도중 이상한 점을 발견했습니다.
forEach()와 map()에 대해 배우고있었는데, 아래 코드를 한번 보시죠.
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((item) => {
return item * 2;
});
console.log(newArr); // [ 2, 4, 6, 8, 10 ]
원래 배열에 있던 숫자에 곱하기 2를 해서 반환하는 코드입니다. 특별할 것이 없습니다.
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((item) => item * 2);
console.log(newArr); // [ 2, 4, 6, 8, 10 ]
더 줄여서 이렇게 작성할 수도 있습니다.
다만 여기서 map을 forEach로 바꾸게 될 경우 문제가 발생합니다.
const arr = [1, 2, 3, 4, 5];
const newArr = arr.forEach((item) => {
return item * 2;
});
console.log(newArr); // undefined
아까 작성했던 코드에서 map을 forEach로 바꿨을 뿐입니다. undefined가 출력됩니다.
const arr = [1, 2, 3, 4, 5];
const newArr = arr.forEach((item) => item * 2);
console.log(newArr); // undefined
더 줄여서 작성했던 코드도 똑같이 변경했을 때 같은 결과를 반환합니다. 그렇다면 forEach()는 어떻게 작성해야 정상적인 결과를 얻을 수 있을까요?
const arr = [1, 2, 3, 4, 5];
const newArr = [];
arr.forEach((item) => newArr.push(item * 2));
console.log(newArr); // [ 2, 4, 6, 8, 10 ]
이렇게 별도로 한 줄을 더 작성해주어야 합니다. push라는 함수도 사용해주어야 하고, 따로 한 줄을 더 적어주어야 한다니 약간 번거롭다는 느낌이 드네요. 어째서 이런 차이점이 발생하게 되는걸까요?
forEach()와 map()의 차이
구글링을 열심히 해봤습니다.
[JS] forEach()와 map() 차이점
forEach()와 map()의 차이점
도움이 된 두 블로그입니다. 두 블로그를 종합하여 정리하자면, map은 리턴값을 받을 수 있지만 forEach는 리턴값을 받을 수 없으며 리턴값은 항상 undefined입니다.
왜인지는 아무리 찾아봐도 설명이 제대로 되어있는 곳이 없지만..
많은 사람들이 forEach는 단순히 반복문 코드를 줄이기 위해 사용하는 코드이고, map의 경우 배열의 각 요소를 다른 값으로 바꾼 새로운 배열을 생성하기 위한 배열 내장 함수라는 말이 있습니다.
이 말 자체가 잘 이해가 되진 않네요.
[Javascript] Array Method - for each 와 map함수의 차이
여기 블로그를 보니 나름 머리속에서 정리가 되는 것 같습니다.
forEach는 콜백함수를 인자로 받고 각 요소에 콜백함수를 실행시킨다. (반환X)
map은 콜백함수를 인자로 받고 각 요소에 콜백함수를 실행시킨 새로운 배열을 반환한다.
정도로 정리할 수 있을 것 같습니다. 반환값이 있고없고를 고려한다면 배열의 데이터를 변경할때에는 map을 사용하는 것이 적절해보입니다.
