map 메서드

정의

Array.map() 메서드는 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

비교

map 메서드의 문법을 살펴보기 이전에 for문과 forEach 메서드에 대해 살펴보자.
기존에 주어진 배열을 활용해서 모든 요소에 2가 곱해진 새로운 배열을 만든다고 할 때, 각각 다음과 같이 구현할 수 있다.

for

for문의 경우, 조건을 만족하는 동안 카운터 변수가 증가 또는 감소하면서 배열을 순회.
forEach, map 메서드와 달리 break문을 사용해 반복을 탈출할 수 있다.

// for ([카운터 변수 초기값]; [조건]; [카운터 변수 증감식]) {
// 	 [조건이 true일 때 반복 실행되는 문]
// }

const arr = [1, 2, 3];
const newArr = [];

for (let i = 0; i < arr.length; i++) {
  newArr.push(arr[i] * 2);
}

console.log(newArr); // [2, 4, 6];

forEach

forEach 메서드의 경우, 배열의 모든 요소를 오름차순으로 순회하면서 각 요소에 대해 주어진 콜백 함수를 실행.
배열의 모든 요소를 순회하기 때문에, 중간에 반복의 탈출이 불가능.

각 요소를 순회할 때마다 올바른 결과가 출력되며, 최종적으로 newArr 배열에 우리가 원하는 값이 추가된 것을 확인할 수 있다.

// Array.forEach([콜백 함수]);

const arr = [1, 2, 3];
const newArr = [];

arr.forEach(num => {
  console.log(num * 2);
  newArr.push(num * 2);
});

// arr 배열을 순회하면서 실행되는 console.log의 결과
// 2
// 4
// 6

console.log(newArr); // [2, 4, 6]

문법

map 메서드는 for문, forEach 메서드와 유사하지만, 요소에 콜백 함수를 실행한 결과를 모은 새 배열을 return(반환)한다는 점에서 차이가 있다. 예시를 통해 map 메서드의 기본 문법을 알아보도록 하자.

// Array.map([콜백 함수]);

const arr = [1, 2, 3];
const newArr = arr.map(num => {
  console.log(num * 2);
});

// 2
// 4
// 6

console.log(newArr); // [undefined, undefined, undefined]

map 메서드가 반환한 새로운 배열을 newArr이라는 변수에 할당했다. forEach 메서드를 사용할 때와 같이 각 요소를 순회할 때마다 올바른 결과가 출력되는 것을 확인할 수 있다. 그러나 newArr 배열을 확인해보면 모든 요소가 undefined인데, 이유는 별도의 return문이 없어 콜백 함수가 매 요소를 순회하면서 undefined를 반환했기 때문이다.

const arr = [1, 2, 3];
const newArr = arr.map(num => {
  return num * 2;
});

console.log(newArr); // [2, 4, 6]
console.log(arr); // [1, 2, 3]

map 메서드의 콜백 함수에서 num * 2 를 반환하는 return문을 추가. 결과로, arr 배열의 각 요소에 2가 곱해진 새로운 배열이 newArr에 할당된 것을 확인할 수 있다. arr 배열의 값은 변경되지 않는다.

const arr = [1, 2, 3];
const newArr = arr.map(num => num * 2);

console.log(newArr); // [2, 4, 6]

화살표 함수는 유일한 문장이 return문일 때 return 키워드와 중괄호를 생략할 수 있다. 이러한 화살표 함수의 특징을 이용해 map 메서드의 콜백 함수를 위와 같이 작성할 수 있다.