Map과 Map의 내부 작동 원리

배열의 사용에서 map은 매우 편리한 기능을 제공해준다.

 

map은 함수를 인수로 받아서, 배열의 각 요소에 그 함수를 일일히 호출시켜 값을 바꿔주는 연산을 한다.

이 때, 반환되는 것은 원본 배열과 같은 길이를 가진 새로운 배열이다.

 

 

아래를 보자.

const ages = [22, 28, 80, 48, 32]
const add5 = x => {
	return x + 5
}
const fiveYearsLater = ages.map(add5)
console.log(`ages : `, ages)
console.log(`fiveYearsLater : `, fiveYearsLater)

 

배열 ages에 map 기능을 사용하였다.

map은 인수로 함수를 받는다.

map에 인수로 받아진 함수는 배열의 각 요소에 호출되며, 함수가 적용된 각 요소로 새로운 배열이 만들어진다.

이 때, 원본 배열은 바뀌지 않고, 새로운 배열 자체가 생성된다.

---

map의 내부 작동원리

 

map이 인수로 받는 함수를 실행시킬 때, 사실 함수에는 3개의 인자가 들어간다.

(사용되는 배열의 요소, 그 배열의 인덱스, 오리지날 배열)

즉 위의 map(add5)에서 add5가 실제로 받는 인자는 아래와 같다.

/*
[
    22, → add5( 22, 0, [22, 28, 80, 48, 32]) → 27,
    28, → add5( 28, 1, [22, 28, 80, 48, 32]) → 33,
    80, → add5( 80, 2, [22, 28, 80, 48, 32]) → 85,
    48, → add5( 48, 3, [22, 28, 80, 48, 32]) → 53,
    32, → add5( 32, 4, [22, 28, 80, 48, 32]) → 37
]
*/

이 때 add5는 첫번째 인자만 사용한다. 함수가 모든 파라미터를 채울 필요는 없기에 가능한 동작이다.

 

---

그렇다면, 내부 함수에 인덱스를 포함해서 map을 동작시키면 어떤 현상이 일어날까?

const peppers1 = [5, 6, 6].map((element, index) => {
    return element + index
})
console.log(peppers1)

[5, 6, 6] 배열에 map 기능을 이용하여 element와 index를 더해주는 연산을 인자 함수로 주었다.

이 경우 어떤 배열이 반환되게 될까?

 

인자로 3개를 받는다는 것, 그 중 마지막 인자는 원본 배열 자체라는 것을
계산하고 생각해보면 아래와 같은 표를 만들 수 있다.

배열의 요소	5	6	6
요소의 인덱스	0	1	2
원본 배열	[5, 6, 6]	[5, 6, 6]	[5, 6, 6]
return element + index	5	7	8

이렇게 동작되어 peppers1은 [5, 7, 8]이 된다.

 

---

그렇다면 아래 map은 어떻게 연산될까?

 

const melon = (delta, wax) => {
    return delta + wax + 1
}
const peppers2 = [5, 6, 6].map(melon).map(melon)
console.log(peppers2);

 

배열의 요소(delta)	5	6	6
인덱스(wax)	0	1	2
+1	1	1	1
첫번째 배열	6	8	9

배열의 요소(delta)	6	8	9
인덱스(wax)	0	1	2
+1	1	1	1
두번째 배열	7	10	12

 

5, 6, 6을 받는 첫 map(melon)에서는

6, 8, 9 가 결과로 나올 것이고

그것을 다시 map(melon)으로 연산하니

7, 10, 12가 될 것이다.