1-6. Array function - map

Array Function - map()

React에서 api로부터의 배열의 데이터를 이용해서 다른 작업을 하게 될 경우, 거의 필수 사용 기능이다.

 

아래는 MDN에 나와있는 map()정의와 예시이다

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

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

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

즉, array1의 모든 요소에 대하여 *2 의 연산을 수행하고 !

그 결과를 새로운 배열로 반환하고 !

그 반환값을 map1이라는 변수에 할당하여 실행결과를 얻었다.

 

주의할 점은 map()의 특징은 새로운 배열을 반환하는 것이기 때문에 map()을 사용한 것 만으로 원하는 결과를 얻을 수 없다.

반드시 새로운 변수에 map()의 실행 결과를 담아주어야 한다!

 

map()의 사용 예시

1) map()의 콜백함수의 첫번째 인자(필수값) currentValue

const rainbow = ["red", "orange", "yellow", "green", "blue", "navy", "purple"];

const arr = rainbow.map(color => `color name is ${color}`);

console.log(arr);

MDN의 예시와 일부러 다른 변수명을 사용했다.

콜백함수의 연산을 수행할 배열 요소 중 현재 값은 내가 정해주기 나름!

위에 예제에서는 color라는 이름으로 사용했다.

 

2) map()의 콜백함수의 두번째 인자(필수아님) index

이번에도 첫번째 인자에 다른 예시들과 다른 변수명을 사용했다.

const arr1 = rainbow.map((item, index) => {
  return `${index}. I'm ${item}`
});

console.log(arr1);

 

 

3) map()의 다른 콜백함수 써보기

const arr2 = rainbow.map((item, index) => {
  return index%2 === 0 ? `double ${item} !` : item;
});

console.log(arr2);

 

 

const sayFavorite = (color) => `My favorite is ${color}`;

const arr3 = rainbow.map(item => sayFavorite(item));

console.log(arr3);