자바스크립트의 map 함수: 알고 보면 개발자의 베프 💡

map 함수 톺아보기 💡

자바스크립트를 조금만 써본 사람이라면 한 번쯤 들어봤을 map. 배열을 변환하거나 데이터를 다룰 때 강력한 도구로 활약하는 함수입니다. 특히 프론트엔드 개발, 더 좁게 말하면 React JSX와의 궁합은 환상적이죠.

그럼 map의 모든 것을 속속들이 파헤쳐 볼까요? 🚀

---

map 함수란? 🌍

map 함수는 배열 내 각 요소에 대해 특정 작업을 수행한 결과로 새로운 배열을 반환하는 자바스크립트 배열 메서드입니다.

원본 배열을 변형하지 않고, 새로운 배열을 만들어낸다는 점에서 매우 유용해요!

---

문법 📚

const newArray = array.map((element, index, array) => {
  // 반환할 값 작성
});

 

매개변수

1. element: 현재 처리 중인 배열 요소
2. index (선택 사항): 현재 요소의 인덱스
3. array (선택 사항): map이 호출된 원본 배열

반환값

• map은 새로운 배열을 반환합니다.
• 원본 배열은 변하지 않아요(불변성 유지)

---

간단한 예제 🌟

1. 배열의 값을 2배로 늘리기

const numbers = [1, 2, 3, 4];
const doubled = numbers.map((num) => num * 2);

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

 

2. 배열에서 특정 속성만 추출하기

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
];

const userNames = users.map((user) => user.name);

console.log(userNames); // ["Alice", "Bob", "Charlie"]

 

3. 인덱스를 활용하기

const letters = ["a", "b", "c"];
const indexed = letters.map((letter, index) => `${index}: ${letter}`);

console.log(indexed); // ["0: a", "1: b", "2: c"]

---

map과 원본 배열: 불변성 유지 🚨

map은 원본 배열을 변경하지 않습니다.

이 말은 곧, 배열을 변형하는 작업을 하면서도 기존 데이터를 안전하게 유지할 수 있다는 뜻이에요.

const numbers = [1, 2, 3];
const tripled = numbers.map((num) => num * 3);

console.log(numbers); // [1, 2, 3] (원본 배열)
console.log(tripled); // [3, 6, 9] (새로운 배열)

---

map의 활용: JSX와의 찰떡궁합 💖

map은 React JSX에서 리스트를 렌더링할 때 가장 많이 사용돼요. 데이터를 반복 렌더링하는 경우, map만큼 간편한 도구는 없습니다!

 

예제: JSX에서 리스트 렌더링

function UserList() {
  const users = ["Alice", "Bob", "Charlie"];

  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li> // key는 리스트 렌더링 시 필수!
      ))}
    </ul>
  );
}

 

결과:

<ul>
  <li>Alice</li>
  <li>Bob</li>
  <li>Charlie</li>
</ul>

---

Key를 사용하는 이유 🗝️

React는 리스트를 효율적으로 렌더링하기 위해 각 항목의 key를 사용해 요소를 식별합니다.

key는 고유해야 하며, 인덱스를 사용하는 것은 비추천이에요(하지만 위 예시는 단순성을 위해 인덱스를 사용).

---

실무에서 자주 쓰이는 활용법 💼

1. 데이터 변환하기

REST API에서 받은 데이터의 구조를 수정해야 할 때

const apiResponse = [
  { first_name: "Alice", last_name: "Smith" },
  { first_name: "Bob", last_name: "Brown" },
];

const fullNames = apiResponse.map(
  (user) => `${user.first_name} ${user.last_name}`
);

console.log(fullNames); // ["Alice Smith", "Bob Brown"]

 

2. 컴포넌트 리스트 만들기

React에서 배열 데이터를 컴포넌트로 변환할 때

function ProductList() {
  const products = [
    { id: 1, name: "Laptop", price: 1000 },
    { id: 2, name: "Phone", price: 500 },
  ];

  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>Price: ${product.price}</p>
        </div>
      ))}
    </div>
  );
}

---

주의해야 할 점 ⚠️

1. return을 까먹지 말자

map 내부의 콜백 함수는 반환값이 중요합니다. return을 생략하면 undefined가 반환돼요.

const numbers = [1, 2, 3];
const invalidMap = numbers.map((num) => {
  num * 2; // return을 빼먹음
});
console.log(invalidMap); // [undefined, undefined, undefined]

 

2. map은 꼭 새 배열을 반환

map은 새로운 배열을 반환합니다.

단순히 배열을 반복하고 싶다면 forEach를 사용하는 것이 더 적합할 수 있어요.

const numbers = [1, 2, 3];
const mapped = numbers.map((num) => console.log(num));
// 반복 가능하지만 결과는 [undefined, undefined, undefined]

numbers.forEach((num) => console.log(num)); // 배열 반환 X, 단순 반복

---

알고 있으면 좋은 팁 🌟

1. 중첩 배열 처리

map을 중첩 배열에서도 활용할 수 있습니다.

const matrix = [
  [1, 2],
  [3, 4],
];

const flattened = matrix.map((row) => row.map((num) => num * 2));

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

 

2. 조건부 변환

조건에 따라 다른 작업을 수행하려면 삼항 연산자를 활용해 보세요.

const numbers = [1, 2, 3, 4];
const oddEven = numbers.map((num) => (num % 2 === 0 ? "Even" : "Odd"));

console.log(oddEven); // ["Odd", "Even", "Odd", "Even"]

---

요약: map, 왜 쓰는 걸까? 🧐

• 데이터 변환: 배열을 가공해 새로운 배열로 만들어낼 때 최적의 도구
• 원본 유지: 불변성을 보장하며, 새 배열을 반환
• JSX 렌더링: React에서 리스트 렌더링을 손쉽게 처리

map 함수는 단순한 배열 메서드가 아닙니다. 데이터를 다루는 방식을 우아하게 만들어주는 필수 도구죠.

잘 활용하면 코드가 깔끔해지고, 유지보수도 쉬워집니다!

 

🌷전설의 개발자가 되어봅시당! 🌷