[JavaScript] Array.map

카테고리 없음

hyerm_2 2021. 8. 13. 10:05

SMALL

자바 스크립트를 사용할때, Array 객체 내장함수인 map 함수에 대해서 종종 보곤 합니다.

언뜻보기에 처음보는 문자들도 있고, 정확히 어떤 것을 의미하고 있는지 몰라 대충 보고 지나갈때가 많았는데,

이 글을 통해 아주 쉽고 간단하게 이해 하고자 합니다!

map()?
arr.map(callback, [thisArg])

파라미터로 전달 된 함수를 통하여 배열 내의 각 요소를 프로세싱 하여 그 결과로 새로운 배열을 생성하는 메소드

이렇게 설명만 들어서는 조금 어렵다고 느껴질 수 있는데, 쉽게 예제를 통해 살펴 보겠습니다.

var numbers = [1, 2, 3, 4, 5];

var processed = numbers.map(function(num){
    return num*num;
});

=> numbers라는 배열이 주어질때, 이것의 각 요소들을 function(num)을 실행시켜 새로운 배열을 생성합니다.

그런데, function(num)은 num*num 으로 이루어져 있죠?

그러므로, [1,2,3,4,5] 는 각 요소들의 본인 값을 제곱한 [1,4,9,16,25]가 반환되는 것을 알 수 있습니다.

그런데, React를 사용하다보면 => 요런 화살표 모양이 쓰일때가 있습니다!

이 화살표 모양은 같은 의미 이지만 ES6문법으로 작성될때 쓰입니다.

위와 같은 결과값을 내도록 Arrow Function을 사용해보겠습니다.

let numbers = [1, 2, 3, 4, 5];

let result = numbers.map((num) => {return num*num});

=> number라는 배열에 있는 각 요소들을 num이라고 칭했고, 이 num대신 num*num값을 진행하도록 하였습니다.

결국, 같은 결과를 내는 같은 코드가 되겠죠?

이렇게 아주 간단하고 쉽게 mapping에 대해 알아보았습니다 :)

참고자료

LIST