my blog에 원래 게시됨

JavaScript에는 배열을 반복하는 데 도움이 되는 몇 가지 편리한 메서드가 있습니다. 반복에 가장 많이 사용되는 두 가지는 Array.prototype.map() 및 Array.prototype.forEach() 이지만 특히 초보자에게는 약간 불분명합니다. 둘 다 반복을 수행하고 무언가를 출력하기 때문입니다. 차이점은 무엇입니까?

Definition

1. The returning value

2. Ability to chain other methods

3. Mutability

4. Performance Speed

Final Thoughts

정의

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

The forEach() method executes a provided function once for each array element.

1. 반환 값

map()와 forEach()의 첫 번째 차이점은 반환 값입니다. forEach() 메서드는 undefined를 반환하고 map()는 동일한 작업을 수행하더라도 변환된 요소가 포함된 새 배열을 반환하며 반환 값은 여전히 ​​다릅니다.

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x)
//>>>>>>>>>>>>>return value: undefined

myAwesomeArray.map(x => x * x)
//>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25]

2. 다른 방법을 연결하는 기능

이러한 배열 메서드의 두 번째 차이점은 map()가 연결 가능하다는 사실입니다. 즉, 배열에 reduce() 메서드를 수행한 후 sort() , filter() , map() 등을 연결할 수 있습니다. 추측할 수 있듯이 forEach() 를 반환하기 때문에 undefined 로 할 수 없는 것입니다.

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined
myAwesomeArray.map(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>>return value: 55

3. 가변성

MDN documentation에 따르면:

forEach() does not mutate the array on which it is called. (However, callback may do so).

map() does not mutate the array on which it is called (although callback, if invoked, may do so).

자바스크립트가 이상합니다.



여기에서 우리는 매우 유사한 정의를 볼 수 있으며 둘 다 인수로 callback를 수신한다는 것을 알고 있으므로 어느 것이 불변성에 의존합니까?

글쎄요, 제 생각에는 이 정의가 명확하지 않습니다. 그리고 어떤 것이 원래 배열을 변경하지 않는지 알려면 먼저 이 두 가지 방법이 어떻게 작동하는지 확인해야 합니다.
map() 메서드는 변환된 요소와 동일한 양의 데이터가 포함된 완전히 새로운 배열을 반환합니다. forEach() 의 경우 undefined 를 반환하더라도 원래 배열을 callback 로 변경합니다.

따라서 map()가 불변성에 의존하고 forEach()가 뮤테이터 방법이라는 것을 분명히 알 수 있습니다.

4. 성능 속도

성능 속도와 관련하여 약간 다릅니다. 하지만, 중요합니까? 글쎄, 그것은 컴퓨터, 데이터 양 등과 같은 다양한 것들에 달려 있습니다. 아래의 예 또는 jsPerf로 직접 확인하여 어느 것이 더 빠른지 확인할 수 있습니다.

const myAwesomeArray = [1, 2, 3, 4, 5]

const startForEach = performance.now()
myAwesomeArray.forEach(x => (x + x) * 10000000000)
const endForEach = performance.now()
console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`)

const startMap = performance.now()
myAwesomeArray.map(x => (x + x) * 10000000000)
const endMap = performance.now()
console.log(`Speed [map]: ${endMap - startMap} miliseconds`)

마지막 생각들

항상 그렇듯이 map()와 forEach() 사이의 선택은 사용 사례에 따라 다릅니다. 데이터를 변경, 교체 또는 사용하려는 경우 변환된 데이터가 포함된 새 배열을 반환하므로 map() 를 선택하는 것이 좋습니다. 그러나 반환된 배열이 필요하지 않은 경우 map() 를 사용하지 말고 대신 forEach() 또는 for 루프를 사용하십시오.

이 게시물을 통해 이 두 가지 방법의 차이점을 명확히 알 수 있기를 바랍니다. 더 많은 차이점이 있으면 댓글 섹션에 공유해 주세요. 그렇지 않으면 읽어주셔서 감사합니다.



BLOG
NEWSLETTER
GITHUB

CODEPEN



사진 제공: Franck V. on Unsplash