ForEach와 Map은 같을까?
Coddy JavaScript 여정의 논리 & 흐름 섹션에 포함된 레슨 — 65개 중 56번째.
forEach()와 map()은 모두 반복을 위해 사용되는 배열 메서드이지만, 서로 다른 목적을 가지고 있으며 동작 방식도 다릅니다:
forEach():
- 각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다.
- 새로운 배열을 생성하지 않습니다.
undefined를 반환합니다.- 다른 배열 메서드와 체이닝할 수 없습니다.
map():
- 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 새로운 배열을 생성합니다.
- 원본 배열과 동일한 길이의 새로운 배열을 반환합니다.
- 다른 배열 메서드와 체이닝할 수 있습니다.
예제:
const numbers = [1, 2, 3, 4];
// forEach
numbers.forEach(num => console.log(num * 2));
// 출력: 2, 4, 6, 8
// 반환값: undefined// map
const doubled = numbers.map(num => num * 2);
console.log(doubled);
// 출력: [2, 4, 6, 8]
// 반환값: 새로운 배열 [2, 4, 6, 8]새로운 배열을 생성하지 않고 각 요소에 대해 작업을 수행하려면 forEach()를 사용하세요. 각 요소를 변환하고 그 결과로 새로운 배열을 생성하려면 map()을 사용하세요.
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
치트 시트
forEach()와 map()은 모두 반복을 위해 사용되는 배열 메서드이지만, 서로 다른 용도로 사용됩니다:
forEach():
- 각 배열 요소에 대해 함수를 한 번씩 실행합니다
- 새로운 배열을 생성하지 않습니다
undefined를 반환합니다- 다른 배열 메서드와 체이닝할 수 없습니다
map():
- 모든 요소에 대해 함수를 호출한 결과로 새로운 배열을 생성합니다
- 원본과 동일한 길이의 새로운 배열을 반환합니다
- 다른 배열 메서드와 체이닝할 수 있습니다
const numbers = [1, 2, 3, 4];
// forEach - 작업을 수행하며, undefined를 반환합니다
numbers.forEach(num => console.log(num * 2));
// map - 요소를 변환하며, 새로운 배열을 반환합니다
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]새로운 배열을 생성하지 않고 작업을 수행할 때는 forEach()를 사용하세요. 요소를 변환하여 새로운 배열을 생성할 때는 map()을 사용하세요.
직접 해보기
이 레슨에는 코드 챌린지가 없습니다.
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
