IT

자바스크립트 배열 변환의 핵심, map() 메서드 완벽 정복 (실용 예제 코드 다수 포함)

日常茶飯事 2025. 4. 23. 11:45
반응형

안녕하세요! JavaScript로 개발하다 보면 배열을 다루는 일이 정말 많습니다. 배열의 각 요소를 가지고 무언가를 처리하고, 그 결과를 새로운 배열로 만들어야 하는 경우는 더더욱 흔하죠. 이럴 때 마법처럼 등장하는 것이 바로 Array.prototype.map() 메서드입니다! map() 메서드는 배열을 다루는 방식을 더 간결하고 우아하게 만들어주는 강력한 도구입니다. 이번 글에서는 map() 메서드의 개념부터 다양한 활용 예제까지 깊이 있게 파헤쳐 보겠습니다.

1. map() 메서드란 무엇일까요?

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드입니다.

핵심은 다음과 같습니다.

  1. 새로운 배열 생성: map()은 기존 배열을 직접 변경하지 않고, 항상 새로운 배열을 생성하여 반환합니다. (Immutability, 불변성 유지)
  2. 모든 요소 순회: 배열의 처음부터 끝까지 모든 요소를 하나씩 순회합니다.
  3. 함수 적용: 각 요소에 대해 콜백(callback) 함수를 실행합니다.
  4. 결과 수집: 콜백 함수의 반환값들을 모아 새로운 배열을 만듭니다.

기존 for 루프를 사용하여 비슷한 작업을 할 수도 있지만, map()을 사용하면 코드가 훨씬 간결하고 가독성이 좋아집니다.

2. map() 메서드의 기본 구문

map() 메서드는 콜백 함수를 인자로 받습니다. 이 콜백 함수는 최대 세 가지 인자를 받을 수 있습니다.

const newArray = originalArray.map(function(currentValue, index, array) {
  // 각 요소에 대해 실행할 코드
  // currentValue: 처리할 현재 요소
  // index: 처리할 현재 요소의 인덱스 (optional)
  // array: map()을 호출한 원본 배열 (optional)

  // 반드시 변환된 값을 return 해야 합니다.
  return newValue;
}, thisArg); // thisArg: 콜백 함수 내부에서 사용할 this 값을 지정 (optional, 화살표 함수 사용 시 거의 불필요)

요즘은 주로 간결한 화살표 함수(Arrow Function)를 사용하여 다음과 같이 작성합니다.

const newArray = originalArray.map((currentValue, index, array) => {
  // 실행할 코드
  return newValue; // 콜백 함수는 반드시 값을 반환해야 함!
});

// 콜백 함수 본문이 한 줄이고 바로 return하는 경우 더 간결하게 작성 가능
const newArrayConcise = originalArray.map(currentValue => newValueExpression);

주의: 콜백 함수에서 값을 반환하지 않으면, 새로운 배열에는 undefined 값이 채워지게 됩니다.

3. map() 메서드 실용 예제

백문이 불여일견! 실제 예제를 통해 map() 메서드가 어떻게 활용되는지 살펴보겠습니다.

예제 1: 배열의 모든 숫자를 두 배로 만들기

가장 기본적인 사용법입니다. 숫자 배열의 각 요소를 두 배로 만든 새 배열을 생성합니다.

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

// 각 숫자를 2배하여 새로운 배열 생성
const doubledNumbers = numbers.map(number => number * 2);

console.log(doubledNumbers); // 출력: [2, 4, 6, 8, 10]
console.log(numbers);       // 출력: [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)

예제 2: 객체 배열에서 특정 속성만 추출하기

사용자 객체 배열에서 이름만 추출하여 새로운 문자열 배열을 만드는 경우입니다.

const users = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Charlie', age: 35 }
];

// 각 사용자 객체에서 name 속성만 추출
const userNames = users.map(user => user.name);

console.log(userNames); // 출력: ['Alice', 'Bob', 'Charlie']

예제 3: 데이터 배열을 HTML 문자열 배열로 변환하기 (React/Vue 등에서 자주 사용)

데이터 배열을 기반으로 동적인 UI 목록을 생성할 때 매우 유용합니다. 여기서는 간단히 HTML 문자열로 변환해 보겠습니다. (React 등의 프레임워크에서는 JSX 문법으로 이와 유사하게 활용합니다.)

const products = [
  { id: 'p1', name: '노트북', price: 1500000 },
  { id: 'p2', name: '키보드', price: 80000 },
  { id: 'p3', name: '마우스', price: 50000 }
];

// 각 제품 정보를 li 태그 문자열로 변환
const productListItems = products.map(product => {
  return `<li>${product.name} - ${product.price.toLocaleString()}원</li>`;
});

console.log(productListItems);
/*
출력:
[
  "<li>노트북 - 1,500,000원</li>",
  "<li>키보드 - 80,000원</li>",
  "<li>마우스 - 50,000원</li>"
]
*/

// 실제 웹 페이지에서는 이 배열을 join('')하여 ul 태그 내부에 삽입할 수 있습니다.
// const productHtml = `<ul>${productListItems.join('')}</ul>`;

예제 4: 배열 요소와 인덱스를 함께 활용하기

각 요소의 값과 해당 요소의 인덱스를 모두 사용하여 새로운 객체 배열을 만들 수 있습니다.

const letters = ['a', 'b', 'c', 'd'];

// 각 문자와 인덱스를 포함하는 객체 배열 생성
const indexedLetters = letters.map((letter, index) => {
  return { value: letter, index: index };
});

console.log(indexedLetters);
/*
출력:
[
  { value: 'a', index: 0 },
  { value: 'b', index: 1 },
  { value: 'c', index: 2 },
  { value: 'd', index: 3 }
]
*/

4. map() 사용 시 주의할 점 및 팁

4.1. 반환 값을 잊지 마세요!

map()의 콜백 함수는 반드시 새로운 배열의 각 요소가 될 값을 반환해야 합니다. 만약 return 문을 생략하거나 return 뒤에 값이 없으면 해당 요소는 undefined가 됩니다.

const numbers = [1, 2, 3];

// 잘못된 사용 예: return 누락
const wrongResult = numbers.map(num => {
  // 어떤 처리만 하고 반환하지 않음
  console.log(`처리 중인 숫자: ${num}`);
});
console.log(wrongResult); // 출력: [undefined, undefined, undefined]

// 올바른 사용 예: 값을 return
const correctResult = numbers.map(num => {
  console.log(`처리 중인 숫자: ${num}`);
  return num * num; // 제곱한 값을 반환
});
console.log(correctResult); // 출력: [1, 4, 9]

4.2. 원본 배열은 변경되지 않습니다 (불변성)

map()은 항상 새로운 배열을 반환하며, 원본 배열을 직접 수정하지 않습니다. 이는 함수형 프로그래밍의 중요한 개념인 불변성을 지키는 데 도움이 되며, 코드의 예측 가능성을 높이고 부수 효과(side effect)를 줄여줍니다.

4.3. map() vs forEach()

forEach() 메서드도 배열을 순회하지만, map()과의 결정적인 차이는 반환 값입니다.

  • map(): 각 요소에 대한 콜백 함수의 반환 값을 모아 새로운 배열을 반환합니다. (주 목적: 배열 변환)
  • forEach(): 단순히 각 요소를 순회하며 콜백 함수를 실행하고, 항상 undefined를 반환합니다. (주 목적: 각 요소에 대한 특정 작업 수행 - 예: 콘솔 출력, DOM 조작 등)

새로운 배열을 만들어야 한다면 map(), 단순히 각 요소에 대해 어떤 작업을 수행하기만 하면 된다면 forEach()를 사용하는 것이 좋습니다.

4.4. 메서드 체이닝 (Method Chaining)

map()은 새로운 배열을 반환하기 때문에, 다른 배열 메서드(예: filter(), reduce(), sort() 등)와 연결하여 사용하는 '메서드 체이닝'이 가능합니다.

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

// 짝수만 골라서(filter) 각각 10을 곱한(map) 새로운 배열 만들기
const processedNumbers = numbers
  .filter(num => num % 2 === 0) // [2, 4, 6]
  .map(evenNum => evenNum * 10); // [20, 40, 60]

console.log(processedNumbers); // 출력: [20, 40, 60]

5. 마무리하며

JavaScript의 map() 메서드는 배열 데이터를 가공하고 변환하는 데 있어 필수적인 도구입니다. 불변성을 유지하면서 간결하고 선언적인 방식으로 배열을 다룰 수 있게 해주어 코드의 품질을 높여줍니다. 특히 React, Vue, Angular와 같은 현대적인 프레임워크/라이브러리에서는 데이터를 UI 요소로 변환하는 데 핵심적인 역할을 합니다.

오늘 배운 map() 메서드를 실제 코드에 적용해보면서 그 강력함과 편리함을 직접 느껴보시길 바랍니다. 꾸준한 연습을 통해 map()을 자유자재로 활용하는 JavaScript 개발자가 되시기를 응원합니다!

반응형