JavaScript의 내장 함수 - map

JavaScript의 map 함수는 배열의 각 요소를 일정한 규칙에 따라 변환하여 새로운 배열을 반환하는 데 자주 사용됩니다. 배열의 데이터를 수정하거나 새로운 형식으로 변환하는 데 강력한 도구입니다. 이번 글에서는 map 함수의 사용법과 다양한 예제를 살펴보며, 적절한 사용 사례와 함께 실무에서 어떻게 활용할 수 있는지 설명하겠습니다.

1. map 함수의 기본 문법

map 함수는 배열에서 자주 사용되는 고차 함수(higher-order function) 중 하나로, 다음과 같은 형식으로 사용됩니다:

const newArray = array.map(callback(currentValue, index, array));

• callback: 배열의 각 요소에 대해 호출되는 함수
• currentValue: 현재 처리 중인 배열의 요소
• index: 처리 중인 배열 요소의 인덱스
• array: map이 호출된 배열 자체

이 함수는 원본 배열을 변경하지 않고, 새로운 배열을 반환하는 것이 특징입니다.

2. 기본 사용 예제

기본적으로 map 함수는 배열의 각 요소를 변환하여 새 배열을 생성하는 데 사용됩니다. 간단한 예제를 통해 이해해 보겠습니다:

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

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

이 예제에서는 map 함수가 배열의 각 요소를 두 배로 늘려 새로운 배열을 반환했습니다.

3. 실용적인 예제

3.1 배열의 객체 변환

map은 데이터를 특정 형식으로 변환할 때 유용합니다. 예를 들어, 배열의 객체 데이터를 다른 형식으로 변환해 봅시다:

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 }
];

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

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

이 예제에서는 객체 배열에서 name 속성만 추출하여 새로운 배열을 만들었습니다. 데이터베이스나 API 호출의 응답을 처리할 때 이러한 방식으로 필요한 정보를 쉽게 변환할 수 있습니다.

3.2 JSX에서의 map 사용 (React.js)

map 함수는 React.js에서 자주 사용되며, 배열의 데이터를 반복 렌더링할 때 유용합니다. 예를 들어, 사용자 목록을 화면에 표시하려고 할 때 map을 사용하여 컴포넌트를 반복 생성할 수 있습니다.

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

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

이 예제에서는 map을 사용하여 li 요소를 반복적으로 생성하고, 각 사용자의 이름을 화면에 출력합니다. 이와 같이 map 함수는 배열 데이터를 화면에 효율적으로 렌더링할 때 자주 활용됩니다.

4. map 함수의 고급 사용법

4.1 중첩 배열 변환

map 함수는 중첩 배열을 처리할 때도 유용합니다. 예를 들어, 2차원 배열에서 각 배열의 요소를 변환하는 경우를 생각해 봅시다.

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

const incrementedMatrix = matrix.map(row => row.map(num => num + 1));

console.log(incrementedMatrix);
// [[2, 3, 4], [5, 6, 7], [8, 9, 10]]

이 예제에서는 중첩된 배열을 map을 통해 각각의 값을 1씩 증가시키는 작업을 수행했습니다.

4.2 인덱스를 사용한 변환

map 함수의 두 번째 인자인 index를 활용하여 배열의 인덱스를 기반으로 값을 변환할 수도 있습니다. 예를 들어, 배열의 각 요소를 인덱스와 함께 결합하는 경우를 살펴보겠습니다.

const fruits = ["apple", "banana", "cherry"];

const indexedFruits = fruits.map((fruit, index) => `${index + 1}: ${fruit}`);

console.log(indexedFruits); 
// ["1: apple", "2: banana", "3: cherry"]

이 경우 배열의 요소에 인덱스를 추가하여 새로운 배열을 생성하였습니다.

5. map과 forEach의 차이점

많은 사람들이 map과 forEach를 혼동합니다. 두 함수 모두 배열을 순회하지만, 중요한 차이점이 있습니다. forEach는 배열을 순회하면서 요소를 처리할 뿐, 새로운 배열을 반환하지 않습니다. 반면 map은 반드시 새로운 배열을 반환합니다.

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

// forEach는 값을 반환하지 않음
numbers.forEach(num => console.log(num * 2)); // 2, 4, 6, 8, 10

// map은 새로운 배열을 반환함
const doubled = numbers.map(num => num * 2);

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

forEach는 부수 효과(side effect)를 동반한 작업을 수행할 때 적합하고, map은 데이터를 변환하여 새로운 배열을 생성하는 작업에 적합합니다.

6. 잘못된 사용 사례

map을 사용할 때, 반환값이 필요하지 않은 경우라면 map 대신 forEach를 사용하는 것이 더 적절합니다. 예를 들어, 배열의 각 요소를 순회하여 단순히 출력하는 작업은 forEach로 해결하는 것이 더 효율적입니다.

// 잘못된 사용 사례: map을 반환값 없이 사용
[1, 2, 3].map(num => console.log(num)); // 출력만 하고 배열 반환 안함

// 올바른 사용 사례: forEach를 사용
[1, 2, 3].forEach(num => console.log(num)); // 배열을 반환하지 않음

7. map 함수의 성능 고려사항

map 함수는 배열의 크기에 따라 성능에 영향을 미칠 수 있습니다. 특히 매우 큰 배열에서 map을 중첩하여 사용하거나 복잡한 작업을 수행할 경우, 성능에 주의해야 합니다. 성능이 중요한 경우에는 for 루프를 사용하는 것도 고려할 수 있습니다.

8. 결론

JavaScript의 map 함수는 배열을 변환하고 새로운 배열을 생성하는 매우 유용한 도구입니다. 데이터를 변경하지 않고 변환을 적용할 수 있어 불변성(immutability)을 유지할 수 있으며, 코드의 가독성을 높이는 데도 큰 도움이 됩니다. 실무에서는 API 응답 처리, 데이터 변환, UI 렌더링 등 다양한 곳에서 활용될 수 있습니다. map 함수를 잘 활용하면 효율적인 코드를 작성할 수 있으며, 필요한 경우 다른 배열 메서드와 조합하여 더 복잡한 작업을 처리할 수도 있습니다.