[React] map

map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드이다.

for of 문이나 forEach처럼 배열 내 요소들을 반복하는 반복문의 한 종류인데, 조금 독특한 부분은 매 반복마다 return 되는 결과에 따라 새로운 배열을 만들어낸다는 것이다.

예전 array를 가져와서 변형을 한다.

['one', 'two'].map(() => ":)")

가끔 각각의 array를 바꾸고 싶을 떼 해당 element를 모두 바꾸고싶고, 다 바뀐 array를 가지고 싶을 때 사용

()괄호 안에 적은 함수가 5번 실행된다는 뜻이다.

그 함수로부터 내가 return하 어떠한 값은 새로운 array에 들어가게 되는 것이다.

map은 하나의 array에 있는 item을 내가 무엇이든지로 바꿔주는 역할을 하고, 결국 새로운 array로 return해준다는 말이 된다.

map()은 함수의 첫번째 argment로 현재의 item을 가져올 수 있다.

그리고 우리가 return 하는 어떤 값이던지 간에

해당 값이 새로운 array에 들어가게 된다.

예를 들어 item.toUpperCase()라고 해보겠다.

보는바와 같이 기존에 가지고 있던 아이템을 기반으로 새로운 변화를 주는 것도 가능하다는 것을 알 수 있다.

문법

다음으로 map()의 문법은 아래와 같다.

myArray.map(callback(current value, index, array), this)

여기서 콜백함수는 세 가지 인자를 전달하고 두 번째로 this값을 인자로 받을 수 있다.

각각 다음과 같이 사용된다.

• current value (현재 반환할 값)
• index ( 현재 해당하는 인덱스의 값)
• array ( 배열에 접근 가능)

• this (메서드가 호출된 원래 배열)

  
  

📌예제

숫자 배열의 각 숫자에 2를 곱하는 함수를 적용하여 

doubleNumbers라는 새로운 배열을 만들었다.

map()메서드가 이 함수를 숫자 배열의 각 요소에 적용하고

새 배열을 반환한 것을 확인할 수 있다.

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(num) {
return num * 2;
});
console.log(doubledNumbers); // output: [2, 4, 6, 8, 10]