Dev/React Native

ReactNative: 5/3 공부일지 작성 - map()

두넌 2023. 5. 3.

공부 중 map()에 대한 내용 작성

const fcstValues = forecasts.map((item) => item.fcstValue);

JSON으로 받은 응답을 처리하는 과정에서 map()을 사용해 보았다

그냥 처리하려고 했지만 Object들로 감싸져 있는 바람에 하나하나 처리하기 힘들고 오류가 발생하여 map에 대하여 알아보고 이를 대체하는 과정으로 이를 해결했던 것 같다

 


map()

 

JavaScript의 map() 함수는 배열 요소를 순회하며 각 요소를 인자로 전달받은 함수를 실행하여 새로운 배열을 생성합니다.

이 때, 새로운 배열은 이전 배열과 같은 길이를 가지며 각 요소는 전달받은 함수를 실행한 결과로 채워집니다.

map() 함수의 구문은 다음과 같습니다.

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

여기서 arr은 map() 함수를 호출한 배열입니다.

callback은 새로운 배열의 각 요소를 생성하는 함수이며, currentValue는 현재 순회 중인 요소의 값, index는 현재 순회 중인 요소의 인덱스, array는 map() 함수를 호출한 배열입니다.

thisArg는 callback 함수 내에서 this로 사용될 객체를 지정하는 인자이며, 생략 가능합니다. callback 함수는 각 요소마다 호출되며, 이 함수에서는 반드시 새로운 값을 반환해야 합니다. 이렇게 반환된 값은 새로운 배열에 저장됩니다.

 

예를 들어, 다음과 같은 배열이 있다고 가정해봅시다.

const numbers = [1, 2, 3, 4, 5];

 

이 배열의 각 요소를 2배한 새로운 배열을 만들어 보겠습니다.

const doubled = numbers.map((number) => {
  return number * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

 

map() 함수는 numbers 배열의 각 요소를 number 변수로 받아들이고,

이를 2배한 값을 반환하여 doubled 배열에 저장합니다.

 

이렇게 map() 함수를 사용하면 간단하게 새로운 배열을 생성할 수 있습니다.

댓글