[JavaScript] forEach와 map의 차이

서론

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()은 반환 값이 있다.

 

---

참고:

1. https://curryyou.tistory.com/202