JavaScript에서 배열 변형과 데이터 가공을 위한 map메서드

JavaScript에서 배열을 다룰 때 많은 경우에 데이터의 변형이 필요하다. 이때 사용되는 유용한 메서드 중 하나가 map()이다. map()은 기존 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새로운 배열을 생성한다. 이를 통해 코드를 간결하게 작성하고 데이터를 가공할 수 있다.

 

const newArray = originalArray.map((currentValue, index, array) => {
  // 변형 또는 수정할 작업을 수행하고 반환
  return transformedValue;
});

 

- currentValue : 현재 처리 중인 요소의 값
- index : 현재 처리 중인 요소의 인덱스
- array : map을 호출한 배열

 

 

map() 메서드 활용

 

1) 데이터 변형 및 가공

배열의 각 요소에 동일한 변형 작업을 적용하여 새로운 배열을 생성할 때 

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

// 각 숫자를 제곱한 새로운 배열 생성
const squaredNumbers = numbers.map((num) => num ** 2);

console.log(squaredNumbers); // 출력: [1, 4, 9, 16, 25]

 

 

2) 데이터 추출

객체 배열에서 특정 속성을 추출하여 새로운 배열을 생성할 때 

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  // ...
];

const userIds = users.map((user) => user.id);
// 출력: [1, 2]

 

 

3) JSX 렌더링

React나 다른 JSX를 사용하는 프레임워크에서 동적으로 컴포넌트를 렌더링할 때 

const items = [/* ... */];

const renderedItems = items.map((item) => (
  <ItemComponent key={item.id} data={item} />
));

 

 

4) API 요청

비동기적으로 여러 개의 API 요청을 처리하고 결과를 배열로 수집할 때 map()을 사용할 때

const apiEndpoints = ['/api/data1', '/api/data2', '/api/data3'];
const fetchData = async (url) => /* ... */;

const results = await Promise.all(apiEndpoints.map(fetchData));

 

 

5) 포매팅 및 가공

배열의 요소들을 특정 형식으로 포매팅하거나 가공할 때

const names = ['John', 'Jane', 'Doe'];
const formattedNames = names.map((name) => `Hello, ${name}!`);
// 출력: ['Hello, John!', 'Hello, Jane!', 'Hello, Doe!']