javascript map함수에 대해 정리를 해보았다.

자주 쓰이고 있지만, 아직까지도 헷갈리는 map함수, 그래서 오늘은 정리를 해보려고 한다.

물론 이 정리를 시작으로 개념정리가 되어도, 얼마든지 까먹을 수 있으니...

수시로 찾아와서 한번씩 점검을 하려 한다.

 

 

1. map function?

map 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다.

(여기서 callback function은 다른 함수에 인수로 전달된 함수이며 외부 함수 내부에서 호출되어 일종의 루틴이나 작업을 완료하는 것을 의미한다.)

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

map함수는 callback, thisArg함수를 가지고 있으며, callback은 currentValue, index, array 등 3개의 인수를 가진다.

• callback
  새로운 배열 요소를 생성하는 함수로, 다음 세 가지 인수를 가진다.
  • currentValue
    배열 내에서 현재 처리해야 하는 값이다.
  • index
    현재 처리해야하는 인덱스 값이다.
  • array
    map()을 호출한 배열이다. 여기서 arr의 배열을 가져오는 것이라 할 수 있다.
• thisArg
  callback을 실행할 때 this로 사용되는 값이다.

 

arr의 값을 하나씩 불러와 thisArg값에 맞게 실행을 한 후 새로운 배열을 보내는 것이라 할 수 있다. 일단 예시로 간단하게 하나로 설명을 해보려 한다. 아래 코드는 숫자 배열을 만들어 2씩 곱하여 새로운 2의 배수 배열을 보여준다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const multNumber = numbers.map(number => number * 2);
console.log(multNumber); // [2, 4, 6, 8, 10, 12, 14, 16, 18]

1) numbers라는 배열을 가져와 number값에 하나하나 넣는다.

2) 그 값은 위에서 보여주는 currentValue값이라 할 수 있으며, 현재 값은 곱하기 2를 한다.

3) 곱한 값은 새로운 변수 multNumber에 새로운 배열로 계속 추가가 된다.

4) numbers 배열을 모두 실행을 하게 되면, map 함수는 종료가 되고 새로운 배열(multNumber)을 저장하여 호출할 수 있다.

 

여기서 index, array라는 인수는 필요성이 없어 쓰이지 않았다.

 

 

 

2. Example map function

1) 제곱근 구하기

다음은 숫자의 배열(numbers)을 받아 각 숫자의 제곱근을 구하는 코드다.

const numbers = [1, 4, 9, 16, 25];
const squareRoot = numbers.map(Math.sqrt);
console.log(squareRoot);

작성한 코드는 위와 같으며 그에 따른 결과는 아래 이미지와 같다.

제곱근

 

2) 기존 배열에서 계산을 한 후 결과를 보여주기.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const multiNumber = numbers.map(number => number * 2);
console.log(multiNumber);

일단 단순히 숫자 계산이 필요한 경우에는 위와 같이 사용할 수 있다.

위와 같이 적어 console.log를 찍어보면 아래와 같이 나오는 것을 확인할 수 있다.

map function used multiplication

result
[2, 4, 6, 8, 10, 12, 14, 16, 18]

이로서 우리는 map함수를 통해서 산수를 반복적으로 할 수 있다.

 

여기서 사실 의문점 하나가 생겼다.

중괄호도 어찌 되었건 multNumber에 해당하는 로직을 구현하는데, 중괄호를 넣었다고 내가 원하는 답과 다른 이유가 무엇일까??

 

하지만 중괄호를 사용할 때는 return을 사용해야지 내가 원하는 값이 나오는 것을 확인할 수 있다.

여중괄호를 사용할 때는 return이 필요하다.

여기서 return은 데이터를 반환하여 종료를 하겠다는 의미로 함수를 호출했을 때 결과값(data)를 반환한다.

 

 

3) Object(객체)을 재구성할 수 있다.

const keyArray = [
    {key:1, value: 10},
    {key:2, value: 20},
    {key:3, value: 30},
    {key:4, value: 40},
];

const reformKeyArray = keyArray.map((obj) => {
	const robj = {};
	robj[obj.key] = obj.value;
	return robj;
});

일단 아래와 같은 결과를 확인할 수 있다.

 

object map함수

먼저 keyArray에서 reformKeyArray로 변경이 되는데, 내가 object의 구성이나 key, value값을 변경할 수 있다.

 

 

 

이렇게 오늘은 map함수를 보았다.

사실 이러한 방법만으로는 실무에 바로 이해하는데도 다소 시간이 걸렸었던 것 같다.

아무래도 for문도 있고, foreach문도 있어 다소 헷갈릴 수 있지만 쓰다 보면 사용할 수 있는 곳과 사용할 수 없는 곳이 있는 것 같다.

 

이번에 한번 구구단도 실제로 map함수로 할 수 있지 않을까?라는 생각으로 실제로 테스트해보았지만, 아직까지 필자의 한계는 for문은 한 번은 꼭 쓰되, map함수로 할 수 있긴 했다.

다만 표현해주는 로직이 조금 아쉬웠고, 다음번에 다시 보게 되면 다른 아이디어가 생기지 않을까 해서 기록으로 남기려 한다.

See the Pen javascript map by miok-jung (@miok-jung) on CodePen.

 

 

다음번에는... 더 좋은 로직이 나올 수 있겠지...?