배열 메소드 map 알아보기

새로 추가된 배열 메소드인 map

map은 배열을 변형합니다. 전체를 바꾸기도 하고, 조건에 따라서 부분만 바꾸기도 합니다. 반복문 등을 이용하지 않고도 간단하게 새로운 배열을 만들 수 있습니다. 얼마나 편리한 지 코드로 확인해볼까요?

const num = [2, 4, 6, 8, 10];
const num1 = num.map(x => x+1);

num이란 배열엔 짝수가 들어있습니다. 다 홀수가 들어있는 배열을 만들려면 어떻게 해야할까요? num 배열의 요소에 1씩을 더하면 홀수가 됩니다. map은 콜백함수를 받습니다. 콜백함수는 매개변수로 현재의 값, 현재 인덱스, 배열 전체를 받습니다. num1을 확인하면 [3, 5, 7, 9 ,11]이라는 배열이 들어있는 것을 볼 수 있습니다. 

map은 사본을 반환하며 원래 배열은 바뀌지 않습니다.

const beverage = [{name:"coffee", price:3500}, {name:"juice", price:2700}, {name:"tea", price:3000}];

음료의 이름과 가격을 모아둔 배열이 있습니다. 이 배열을 map을 통해서 name과 price를 따로 분리해볼까요?

const names = beverage.map(x => x.name);
const prices = beverage.map(x => x.price);

names와 prices를 확인하면 음료 이름과 가격이 나눠져서 배열이 되어 있는 것을 확인할 수 있습니다. 물론 이 반대의 상황도 가능합니다. 기존의 형태로 넣는 것 말이죠.

const newBeverage = names.map((x,i) => ({name:x, price:prices[i]+i*50}));

음료 가격이 올랐다고 생각해보세요. 기존의 값에서 juice는 50원, tea는 100원이 올랐습니다. 그래서 인덱스 값을 통해서 기존의 가격에서 오른 요금을 추가했습니다. 객체를 괄호로 감싼 이유는, 객체리터럴의 중괄호를 블록으로 판단하기 때문입니다. 

map를 통하여 조건적으로 변형시키기

위의 예제들은 값들을 전체로 변형시킨 것들입니다. 하지만 부분적으로만 변형할 땐 어떻게 해야할까요? 당연히 조건문을 쓰면 됩니다. 간단하게 삼항연산자로 예시를 만들어보겠습니다.

const randomNum = [6, 1, 3, 4, 9 ,8];
const doubleNum = randomNum.map(x => x%2===0? x*2 : x);

랜덤한 숫자들이 들어있는 배열이 있습니다. 이 배열에서 짝수만 2배로 하고, 홀수는 그대로 유지하는 배열을 만들어 볼까요? x%2===0 이 나온다면 짝수, 아니면 홀수겠죠? doubleNum에 담긴 배열을 확인해보면 [12, 1, 3, 8, 9, 16]이 나오는 것을 볼 수 있습니다. 

공감은 제작자에게 큰 힘이 됩니다.