[JavaScript] map함수에 대해 알아보자

map함수란 뭘까?

---

우리는 일반적으로 지금까지 코딩을 하면 for문, 혹은 while문을 이용하였다. 이는 C,C++등에서 주요 사용하는 코드이다.
이때 파이썬과 JS에서는 반복문으로 추가적으로 map함수라는 것을 사용하는데, 이를 사용하는 이유를 알아보자.

 

map함수

반복되는 컴포넌트를 렌더링하기 위해서 자바스크립트 배열에서 내장되어 있는 함수
파라미터로 전달된 함수를 통해 배열 내 각 요소를 원하는 규칙에 변환하고 새로운 배열을 생성한다.
일단 일반적인 for문과 map함수를 비교해보자

 

예제1

for문

const numbers = [1, 3, 5]
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i])
}

 

map함수

const numbers = [1, 3, 5];
const listItems = numbers.map((number, idx) => {
    console.log(number);
});

위 코드는 동일하게 구현되지만 형태가 조금 다른 것을 볼 수 있다. 일단 제일 중요한 차이점은 for문의 억압적인 구현을 뺄 수 있다.
또한 map함수는 배열의 요소를 돌려 인자로 전달된 함수를 처리하여 새로운 결과를 새로운 배열에 담아 반환하는 형태이므로 유용하게 쓸 수 있다.

 

문법

arr.map(callbackFunction, [thisArg])

arr.map(callbackFunction(currentValue,index,array),thisArg)

callbackFunction은 새로운 배열의 요소를 생성해주는 함수이다.

해당 함수는 currentValue, index, array 형태의 문법을 지닌다.

• currentValue : 현재 배열내의 값
• index : 현재 배열 내 값의 인덱스
• array : 현재 배열

그리고 thisArg은 써도 되고 쓰지 않아도 되는데, callback 함수 내부에서 사용할 this 레퍼런스를 설정한다.

 

Component 배열로 map 적용하기

예시를 이용하여 바로 구현해보겠다.

예제2

const names = [
        ["갓리오", 19], 
        ["김리오", 29],
        ["마리오", 39]
    ]
    const nameList = names.map((v) => (<Main name={v[0]} age={v[1]}/>))

해당 함수를 보면 첫번째에 들어갈 배열을 넣어주고 화살표 함수 뒤에 그 배열을 이용하고 있다.
이를 이용하여 쓸 수 있는 또다른 장점 중 하나는 filter함수를 응용하여 연속으로 할 수 있다.

 

예제3

let nameList = names.filter(v => v.age < 30);

해당 코드는 앞에서 사용한 것에서 나이가 30이하인 사람들만 표현하기 위함이다.
이처럼 map함수를 이용하여 반복문 나아가서 컴포넌트까지 활용할 수 있는 장점이 있다.

 

 

결론

map함수를 무조건적으로 사용하지 말고, 반복문이 더 쉽다면 반복문으로 사용한다.
component를 반복해야 될때 map함수를 사용하도록 하자.