🧩 JavaScript map() 사용 시점과 예시 정리

map()은 배열의 각 요소를 변환하여 새로운 배열을 만드는 함수입니다.
즉, “배열의 형태나 값 자체를 바꾸고 싶을 때” 사용합니다.

1️⃣ 숫자 계산할 때

배열의 각 숫자에 일정한 규칙을 적용하고 싶을 때 사용합니다.

const prices = [1000, 2000, 3000];
const tax = 0.1;

// 모든 가격에 세금 추가
const finalPrices = prices.map(price => price + price * tax);

console.log(finalPrices); // [1100, 2200, 3300]

💡 map()은 원본 배열(prices)을 변경하지 않고, 새로운 배열을 반환합니다.

2️⃣ 문자열이나 객체의 특정 값만 뽑을 때

객체 배열에서 특정 속성만 추출할 때 자주 사용합니다.

const users = [
  { name: "Tom", age: 25 },
  { name: "Jane", age: 30 },
  { name: "Kim", age: 28 }
];

// 이름만 추출
const names = users.map(user => user.name);

console.log(names); // ["Tom", "Jane", "Kim"]

💡 기존 객체 구조는 그대로 두고, 필요한 데이터만 꺼내 새 배열을 만듭니다.

3️⃣ 데이터 형식을 바꿔야 할 때

서버에서 받은 데이터를 프론트엔드에서 쓸 수 있게 가공할 때 유용합니다.

const rawData = [
  { firstName: "Tom", lastName: "Lee" },
  { firstName: "Jane", lastName: "Kim" }
];

// fullName 형식으로 변환
const formatted = rawData.map(user => ({
  fullName: `${user.firstName} ${user.lastName}`
}));

console.log(formatted);
// [{ fullName: "Tom Lee" }, { fullName: "Jane Kim" }]

💡 map()은 각 객체를 새로운 구조로 변환할 때도 적합합니다.

4️⃣ React에서 JSX 리스트 렌더링 시

React에서는 리스트를 렌더링할 때 map()을 거의 필수로 사용합니다.

const fruits = ["사과", "바나나", "포도"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

💡 map()을 사용하면 배열 데이터를 JSX 요소로 변환할 수 있습니다.

5️⃣ 중첩 배열(2D 배열) 변환 시

중첩 구조에서도 map()을 중첩해 사용할 수 있습니다.

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 모든 값 2배로
const doubledMatrix = matrix.map(row => row.map(n => n * 2));

console.log(doubledMatrix);
// [[2, 4, 6], [8, 10, 12], [14, 16, 18]]

💡 다차원 배열도 map() 중첩으로 손쉽게 변환할 수 있습니다.

🧠 정리 — map()을 써야 할 때

🔚 마무리

map()은 단순히 배열을 반복하는 용도가 아니라,
데이터를 **“다른 형태로 변환”**하는 데 최적화된 함수입니다.
특히 React, 데이터 가공, API 응답 처리 등에서 매우 자주 쓰이는 필수 문법입니다 💪