map()에 대해 알아보자

react 공부를 시작하면서 js map()에 대해 제대로 짚고 넘어가고자 작성하는 포스팅이다.

 

 map() 

"배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다."

-MDN 설명 인용-

 

 

map()의 매개변수

- callback 함수
  ⎿ currentValue (현재 처리할 요소)
  ⎿ index (현재 처리할 요소의 인덱스)
  ⎿ array (map()을 호출한 배열)

- thisArg (callback을 실행할 때 this로 사용되는 값)

 

map() 함수는 다음과 같다.

 

1. 배열의 각 원소마다 특정 작업을 하는 함수를 적용하고

2. 그 함수가 반환한 결과를 모은 뒤

3. 배열로 반환을 해준다.

 

const array1 = [1, 4, 9, 16];

//화살표 함수 사용
const map1 = array1.map(x => x * 2);

console.log(map1);
//결과 [2, 8, 18, 32]

 이 예제는 MDN map() 함수에 대한 설명에 있는 예제 코드이다.

 

 

1. 먼저 array1에 배열 [1, ,4, 9, 16]을 저장해하고

2. map() 함수를 통해 각 배열마다 곱하기 2를 해주는 함수를 적용해주고

3. 저장한 배열 각각 요소마다 곱하기 2를 한 새로운 배열 값을 반환해준 것이다.

 

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로(왼쪽에서 오른쪽) 불러 그 함수의 반환값으로 새로운 배열을 만든다.

즉, 예제의 array1 배열에는 4가지의 요소가 들어 있으므로 함수가 4번 실행된다. 만약 array1의 배열이 [1,2,3] 이라면 함수가 3번 실행된다.

 

callback 함수는 배열 값이 들어있는 인덱스에 대해서만 호출된다. 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않는다. 

 

또한 map()은 호출한 배열의 값을 변경하지 않지만, callback 함수에 의해 변형될 수는 있다.