[JavaScript]자바스크립트 고수 되기 01 - Map

 

개발을 하다 보면 리스트를 순회하면서 데이터를 가공한다던가 하는 처리가 필요한 경우가 많다.

지금 까지는 for 문을 이용하여 순회를 했었는데 map이라는 함수를 알게 되었다. for 문보다 간결하고 익숙해진다면 편하게 사용할 수 있기에 map에 대해서 알아보자.

 

배열에서 사용하기

일단 기존 for문에서 배열을 순회해서 처리하는법을 한번 보겠다. 숫자가 들어있는 'numbers'라는 배열에 요소를 하나씩 꺼내서 

곱하기 2를 한 새로운 배열을 반환한다고 가정하자.

const numbers = [1, 2, 4, 6 , 8, 10];

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

가장 원시적인 방법이자 초보들에게 익숙한 방법일 것이다. 

for (let idx in numbers) {
    numbers[idx] = numbers[idx] * 2;
}

이러한 방식도 사용할수 있다. 첫 번째 알아보았던 방식과 비슷한 방식이다.

다음으론 맵을 이용하여 처리해 보겠다.

 

const newNumbers = numbers.map((num) => num * 2);

처음 보면 코드는 간결하지만 다소 이해가 가지 않는 부분이 많을 수도 있다. map은 '고차함수'라고도 불린다. 고차함수는 간단히 이야기하자면 함수 자체를 '파라미터'로 넘기거나 반환값이 함수 자체인 함수를 말한다. map은 함수를 파라미터로 받는다는 의미이다.

 

(num) => num * 2

이 부분이 함수를 넘겨준 부분이다. 다른 곳에 선언해 놓은 함수를 넣어도 되고 한 번만 사용한다면 익명함수를 사용해도 된다.

객체배열에서 사용하기

const members = [{"name" : "kim", "age" : 15}, {"name" : "lee", "age" : 20}];


let NewMembers = members.map((member) => `이름은 : ${member.name}, 나이는 : ${member.age} 입니다.`);


결과값 : [ '이름은 : kim, 나이는 : 15 입니다.', '이름은 : lee, 나이는 : 20 입니다.' ]

members에 있는 member 정보를 이용해 멤버를 소개하는 문장으로 가공해 보았다.

 

이해를 돕기 위해 최대한 간단히 예시를 들어서 사용이유에 대해 와닿지 않을 수도 있다. 앞으로 리스트에서 데이터를 가공해야 할 일이 있으면 map을 사용해 보자