Javascript

map()과 forEach()차이

forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않습니다. (출처: MDN)

forEach()는 주어진 콜백을 각 요소에 대해 한 번씩 실행해준다. 

 

map은 callback 함수를 각각의 요소에 대해 한 번씩 순서대로 불러 그 함수의 반환 값으로 새로운 배열을 만듭니다. callback 함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다. (출처: MDN)

map()은 주어진 콜백을 각 요소에 한 번씩 실행하여 새로운 배열을 생성한다.

 

차이

 

새로운 배열을 반환하는 map()과 달리 forEach()는 undefined를 반환한다.

 

면접에서 forEach()와 map()의 차이가 원본 배열의 변경 여부라고 대답했었는데 완전히 잘못된 대답이었다. 😇  가장 자주 사용하는 메서드들인데도 이런 대답을 하다니... 원본 배열을 수정하는 메서드로는 대표적으로 push, pop, shift, unshift 등이 있다.

 

뭐가 더 빠를까?

 

새로운 배열을 반환하는 map()보다는 forEach()가 빠를 것 같지만, 막상 검색해보면 map()이 근소하게나마 더 빠르다는 글이 더 많아 보인다. 하지만 실행 환경에 따라 달라지기도 하고 실제로 링크에서 테스트해 본 결과 forEach()가 약간 빠르게 나오기도 한다. 속도면에서 유의미한 큰 차이는 없어 보이고, 반환 값의 필요 유무에 따라 선택하면 될 것 같다.

'Javascript' 카테고리의 다른 글

자바스크립트의 메모리 관리  (0) 2022.03.03
이벤트 복습하기  (0) 2022.01.09
Node.js - Express로 서버 만들기  (0) 2021.12.14
Node.js - http모듈로 서버 만들기  (0) 2021.12.14
Node.js - 모듈/동기/비동기  (0) 2021.12.14