Understanding Array.map()

자바스크립트 함수들을 가끔 보다보면 코드가 너무 많이 생략이 되어있어서 읽기 힘든 경우가 종종 있습니다. 그중에 하나가 Array.map()과 같은 함수가 되겠는데요. 아래는 배열의 각 아이템에 2씩 곱해서 새로운 배열을 만드는 코드입니다.

const numbers = [1, 4, 9];
const doubles = numbers.map(num => num * 2);

numbers라는 배열을 초기화하고, Array에서 제공하는 map이라는 함수를 사용해서 doubles라는 새로운 배열을 만드는데요. 여기서 map의 인자로 들어가는 코드를 보면 함수가 들어가 있습니다. 이 형식이 함수라고 인지하지 못하는 경우에는 num이라는 변수가 정의된 적이 없는데 왜 여기서 사용할수 있는 거지? 하고 헷갈릴수 있어요. 위의 코드를 아래와 같이 바꾸면 이제 정의된 함수를 넘겨주고 있다는걸 알아차릴수 있으시죠?

const numbers = [1, 4, 9];
const doubles = numbers.map((num) => {num * 2});

더 명확히 구분하기 위해서 아래와 같이 더 풀어서 코딩할수도 있습니다.

const numbers = [1, 4, 9];
const doubles = numbers.map(makeDouble);
function makeDouble(num) {
   return num * 2;
}

map함수를 실행하면 인자로 받은 makeDouble을 실행하는데 이때 makeDouble에 인자로 들어가는 것이 바로 각 배열의 아이템인데 이것을 임의의 이름, num으로 부르겠다고 정의한거에요. 이렇게 써놓고 보니까 좀더 make sense하죠? map은 배열안의 아이템을 하나씩 돌면서 makeDouble함수를 실행해서 결과값을 각 배열에 상응하는 배열방에 저장한뒤 반환하는 함수가 되겠습니다.

기존의 컨셉처럼 함수는 언제나 변수를 인자로 받고 결과값을 반환하는것이 아니라 Array.map()처럼 요즘세대에는 인자로 함수를 넘겨받고 해당 함수를 이용해서 어떤 특정한 액션을 제공하는 기본 함수들이 참 많이 나와 있습니다. 옛날에 코딩 시작하신 분들에게는 조금 헷갈릴수 있는 부분이라 짚고 넘어갑니다.