서론
forEach
와 map
은 배열에 사용할 수 있는 함수이다. 공통점은 callback
함수가 돌면서 배열 내 각 요소에 접근하여 주어진 함수를 실행한다는 것인데 여기까지만 보면 둘은 다를 바가 없어 보인다. 그럼 동일한 일을 하는 함수가 둘일 리 없지 않은가. 이 둘의 차이를 알아보자.
forEach()
The forEach()
method executes a provided function once for each array element.
MDN forEach 공식 문서에 따르면, forEach()
는 배열 요소 각각에 접근해서, 주어진 함수를 실행한다고 한다.
arr = [1, 2, 3, 4, 5];
arr.forEach((num) => console.log(num));
forEach()
는 배열을 변형하지도, 값을 반환하지도 않는다. 그저 배열의 요소에 순서대로 접근할 뿐이다.
여담: for of
vs forEach
여담이지만, for of
문과 forEach()
를 동일하게 사용할 수 있다. 한 가지 다른 점은 for of
문은 배열의 값을 수정할 수 있다.
const arr = [
{name: "veggie", status: "sleepy"},
{name: "garden", status: "hungry"}
];
for(const person of arr) {
console.log(`${person.name}, ${person.status}`);
};
arr.forEach((person) => console.log(`${person.name}, ${person.status}`));
그러나 Airbnb JavaScript Style Guide는 for of
문의 사용을 금지한다. 사용하면 아래와 같이 에러가 뜬다.
개발자들 사이에서도 for of
이 나은지 forEach()
문이 나은지 의견이 분분하다. 몇 개의 글을 읽어보니 for of
가 났다는 여론이 우세하다. 아래의 글들을 참고하여 무엇이 나은지 판단하길 바란다.
aribnb javascript - Using 'ForOfStatement' is not allowed (no-restricted-syntax) #1271
stack overflow - should one use for of or foreach when iterating through an array
map()
The map()
method creates a new array populated with the results of calling a provided function on every element in the calling array.
map 문서에 따르면, map()
은 주어진 배열의 요소에 접근하여 주어진 함수를 실행하고, 그 결과를 모아 새로운 배열을 생성하여 반환한다.
const arr1 = [1, 2, 3, 4, 5];
const arr2 = arr1.map(x => x * 2);
// arr1 = [1, 2, 3, 4, 5];
// arr2 = [2, 4, 6, 8, 10];
map()
또한 호출한 배열 값을 변형시키지 않는다. 그러나 forEach()
와 다르게 주어진 함수를 실행하여 그 값들을 배열로 반환해준다.
결론
공통점
1. 배열의 요소에 접근한다.
2. 주어진 함수를 실행한다.
3. 호출한 배열 값을 변형시키지 않는다.
차이점
1. forEach()
는 반환 값이 없다.
2. map()
은 반환 값이 있다.
참고:
'Programming Language > JavaScript' 카테고리의 다른 글
[JavaScript] 함수 여러 값 return 하기 (0) | 2021.10.11 |
---|---|
[JavaScript] Js로 숫자 무작위 추첨 (Math.random() 사용법) (0) | 2021.10.09 |
[JavaScript] innerHTML / innerText / textContent 차이 (0) | 2021.10.08 |
댓글