50. map Method

안녕하세요. 박기린 입니다.

저번에 소개해드린 forEach()에 이어서, forEach()와 유사하지만 조금 다른 Array 메소드인 map()에 대해 알아보겠습니다.

 

 

Array.prototype.map()

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
const eurToUsd = 1.1;

const movementsUSD = movements.map(mov => mov * eurToUsd);
console.log(movementsUSD);

 

Array이름.map( 콜백함수 );

map() 메소드는 콜백함수를 인수로 받습니다. 그리고 Array의 모든 elements에 반복을 돌면서, 콜백함수가 각 element 마다 실행되게 끔 합니다. 그리고 새로 만들어진 값들을 모아서 새로운 Array를 return 합니다. (기존 Array에는 영향을 주지 않습니다.)

 

 

실행결과물

 

 

 

---

map() VS forEach()

map()도 forEach()처럼 콜백함수에 

function( 배열의 요소가 담기는 인수, 배열 요소의 index가 담기는 인수, 전체 배열 )

를 전달합니다.

 

 

const movementsDescriptions = movements.map(
  (mov, i) =>
    `Movement ${i + 1}: You ${mov > 0 ? 'deposited' : 'withdrew'} ${Math.abs(
      mov
    )}`
);
console.log(movementsDescriptions);

실행결과물

 

 

그래서 map()과 forEach()가 거의 유사해보입니다. 하지만 둘은 확연한 차이점이 존재합니다.

forEach()는 단순히 for 반복문을 대체하기 위한 메소드입니다. 그래서 forEach()의 return 값은 undefined입니다.

map()은 Array의 element 값을 다른 값으로 mapping 한 후, 새로운 배열을 생성해서 그 안에 mapping한 값을 담습니다. 그래서 map()은 꼭 return을 필요로 합니다.

 

-> 따라서, Array에 변형을 가할 경우, map()은 새로운 Array에 따로 저장하다보니 원본이 변형되는 일이 없지만, forEach()는 그렇지 못하다는 점을 차이점으로 갖습니다.