map() 메서드

map() 메서드란?

map()은 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 생성하는 메서드입니다.

기본 문법

const newArray = array.map(callback(element, index, array))

핵심 특징

1. 원본 배열을 변경하지 않음 (불변성 유지)
2. 항상 새로운 배열을 반환
3. 원본 배열과 같은 길이의 배열 생성
4. 각 요소를 1:1로 변환

실제 사용 예시

1. 숫자 배열 변환

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5] (원본 유지)

2. 객체 배열에서 특정 속성 추출

const users = [
  { id: 1, name: "김철수", age: 25 },
  { id: 2, name: "이영희", age: 30 },
  { id: 3, name: "박민수", age: 28 }
];

const names = users.map(user => user.name);
console.log(names); // ["김철수", "이영희", "박민수"]

3. 객체 변환 (새로운 구조 생성)

const products = [
  { name: "노트북", price: 1000000 },
  { name: "마우스", price: 50000 }
];

const productInfo = products.map(product => ({
  title: product.name,
  cost: `${product.price.toLocaleString()}원`,
  affordable: product.price < 100000
}));

console.log(productInfo);
// [
//   { title: "노트북", cost: "1,000,000원", affordable: false },
//   { title: "마우스", cost: "50,000원", affordable: true }
// ]

map() vs 다른 배열 메서드

메서드	목적	반환값
map()	각 요소를 변환	새로운 배열 (같은 길이)
filter()	조건에 맞는 요소만 선택	새로운 배열 (다른 길이 가능)
forEach()	각 요소에 대해 작업 수행	undefined
reduce()	배열을 하나의 값으로 축약	단일 값

주의사항

1. 콜백 함수에서 반환값 필수

// 잘못된 예
const wrong = numbers.map(num => {
  num * 2; // return이 없으면 undefined
});

// 올바른 예
const correct = numbers.map(num => {
  return num * 2;
});
// 또는
const correct2 = numbers.map(num => num * 2);

2. 비동기 작업에는 부적합

// 문제가 있는 코드
const results = urls.map(async url => {
  return await fetch(url); // Promise 배열이 반환됨
});

// 해결 방법
const promises = urls.map(url => fetch(url));
const results = await Promise.all(promises);

map()은 함수형 프로그래밍의 핵심 개념으로, React와 같은 현대 JavaScript 개발에서 매우 자주 사용되는 필수적인 메서드입니다.