[JavaScript] forEach()와 map()의 차이

skdus·2022년 10월 2일

목록 보기

17/17

프로그래머스에서 문제를 풀다가,
forEach()를 쓰면 런타임 오류가 생기고, map()를 쓰면 테스트를 통과되는 이유가 궁금해서 두 함수의 차이를 알아보려고 한다!

forEach()

forEach() 메서드는 각 배열 요소에 대해 한 번씩 callback 함수를 실행한다.

arr.forEach(function(item, index, array) {
	//문법
});

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

arr.forEach(num => {
  result.push(num*2);
});

console.log(result); // [2, 4, 6]

forEach()는 원본 배열인 arr[]을 변형하지 않는다. 또한 인수로 넘겨준 함수의 반환값은 무시되며, forEach()은 항상 undifinded를 반환한다.
(callback은 변형 가능)

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

const result = arr.map(function(item, index, array) {
  // 문법
});

const arr = [1, 2, 3];
const result = arr.map(num => num*2);

console.log(result); // [2, 4, 6]

map()는 원본 배열인 arr[]을 변형하지 않는다.
또한 원본 배열의 원소와 일대일 mapping이 진행되기 때문에 원본 배열과 mapping후 배열의 길이는 항상 같다.

forEach()와 map() 둘 다 모든 요소에 func을 호출하지만,
forEach()는 결과가 반환되지 않고,
map()은 반환된 결과를 가지고 새로운 배열을 만든다!

코딩테스트를 할 때, forEach()가 런타임에러가 생겨서 성능이 더 안좋은가보다~하고 찾아봤는데, map()이 더 느리다. (도대체 그럼 왜..🤯🤯)

그래서 무엇이 더 사용하기 좋다(?)는 아니고,
반환이 필요없을 때는 forEach()를 그 외에는 map()를 사용하면 될 것 같다!