JS 에서 맵 과 Foreach 의 차이 점

만약 당신 이 자 바스 크 립 트 를 사용 한 경험 이 있다 면,이 두 가지 똑 같은 방법 을 이미 알 고 있 을 것 입 니 다:Array.prototype.map()와 Array.prototype.foreach().
그렇다면 이들 은 어떤 차이 가 있 을 까?
정의.
우선 MDN 에서 맵 과 Foreach 에 대한 정 의 를 살 펴 보 겠 습 니 다.
foreach():모든 요소 에 대해 제공 하 는 함수(executes a provided function once for each array element)를 실행 합 니 다.
map():새로운 배열 을 만 듭 니 다.그 중에서 모든 요 소 는 배열 의 모든 요 소 를 호출 하여 제공 하 는 함수 에 의 해 실 행 됩 니 다(creates a new array with the results of calling a provided function on every element in the calling array).
도대체 어떤 차이 가 있 습 니까?foreach()방법 은 실행 결 과 를 되 돌려 주지 않 고 undefined 입 니 다.즉,foreach()는 원래 의 배열 을 수정 할 것 이다.map()방법 은 새로운 배열 을 얻 고 돌아 갑 니 다.
예시
아래 에 하나의 배열 을 제공 합 니 다.만약 에 우리 가 그 중의 모든 요 소 를 배로 늘 리 고 싶다 면 우 리 는 map 와 foreach 를 사용 하여 목적 을 달성 할 수 있 습 니 다.

let arr = [1, 2, 3, 4, 5];

ForEach
주의 하 세 요.foreach 는 의미 있 는 값 을 되 돌려 주지 않 습 니 다.
우 리 는 반전 함수 에서 arr 의 값 을 직접 수정 합 니 다.

arr.forEach((num, index) => {
 return arr[index] = num * 2;
});

실행 결 과 는 다음 과 같 습 니 다.

// arr = [2, 4, 6, 8, 10]

Map

let doubled = arr.map(num => {
 return num * 2;
});

실행 결 과 는 다음 과 같 습 니 다.

// doubled = [2, 4, 6, 8, 10]

실행 속도 대비
jsPref 는 서로 다른 자 바스 크 립 트 함수 의 실행 속 도 를 비교 하 는 아주 좋 은 사이트 입 니 다.
여 기 는 foreach()와 map()의 테스트 결과 입 니 다.

내 가 컴퓨터 에 도착 한 foreach()의 실행 속 도 는 map()보다 70%느 린 것 을 볼 수 있다.모든 브 라 우 저의 실행 결 과 는 다 를 것 입 니 다.아래 링크 를 사용 하여 테스트 할 수 있 습 니 다:Map vs.foreach-jsPref.
자 바스 크 립 트 가 너무 영리 해(gui)가 살 아 있 습 니 다.버그 가 나 와 도 모 르 니 Fundebug 온라인 실시 간 모니터링 에 접속 하 셔 도 됩 니 다.
함수 식 각도 의 이해
함수 가 프로 그래 밍 인 것 에 익숙 하 다 면 맵()을 좋아 할 것 입 니 다.foreach()는 원본 배열 의 값 을 바 꾸 고 map()는 새로운 배열 로 돌아 가기 때문에 원래 의 배열 은 영향 을 받 지 않 습 니 다.
뭐 가 더 좋아요?
네가 무엇 을 하 느 냐 에 달 려 있다.
foreach 는 데 이 터 를 바 꾸 려 고 하지 않 을 때 데이터 로 뭔 가 를 하려 고 합 니 다.C.예 를 들 어 데이터 베 이 스 를 저장 하거나 인쇄 하 는 것 입 니 다.

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
 console.log(letter);
});
// a
// b
// c
// d

map()는 데이터 값 을 바 꾸 려 고 할 때 적 용 됩 니 다.더 빠 를 뿐만 아니 라 새로운 배열 로 돌아 가 는 것 이다.이러한 장점 은 복합(coposition)(map(),filter(),reduce()등 조합 으로 사용 할 수 있다 는 점 이다.

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]

우 리 는 먼저 map 를 사용 하여 모든 요 소 를 2 로 곱 한 다음 에 5 이상 의 요 소 를 선별 합 니 다.최종 결 과 는 arr 2 에 할당 합 니 다.
핵심 요점
foreach()로 할 수 있 는 것 은 map()도 마찬가지 입 니 다.반대로 도 마찬가지다.
map()는 메모리 공간 을 할당 하여 새 배열 을 저장 하고 되 돌려 줍 니 다.foreach()는 데 이 터 를 되 돌려 주지 않 습 니 다.
foreach()는 콜백 이 원본 배열 의 요 소 를 변경 할 수 있 도록 합 니 다.map()새 배열 로 돌아 갑 니 다.