자바스크립트 함수들을 가끔 보다보면 코드가 너무 많이 생략이 되어있어서 읽기 힘든 경우가 종종 있습니다. 그중에 하나가 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()처럼 요즘세대에는 인자로 함수를 넘겨받고 해당 함수를 이용해서 어떤 특정한 액션을 제공하는 기본 함수들이 참 많이 나와 있습니다. 옛날에 코딩 시작하신 분들에게는 조금 헷갈릴수 있는 부분이라 짚고 넘어갑니다.