[map()] 배열 요소 변형의 핵심 메서드 완전 정복

728x90

map() 

자바스크립트에서 배열을 다룰 때, 반복문 없이 우아하게 데이터를 변형할 수 있는 방법이 있습니다. 바로 map() 메서드입니다. map()은 배열을 다른 배열로 변형할 때 자주 사용되는 메서드로, 초보자부터 고급 개발자까지 자주 사용하는 핵심 도구 중 하나입니다.

 

---

1.  map()이란?

map()은 자바스크립트 배열(Array)의 내장 메서드로, 배열의 각 요소에 대해 주어진 콜백 함수를 호출하고 그 결과를 모아 새로운 배열을 반환합니다. 원본 배열은 변경되지 않습니다.

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

문법

arr.map(callback(currentValue[, index[, array]])[, thisArg])

• callback : 각 요소에 대해 실행할 함수
• currentValue : 현재 처리 중인 요소
• index (선택) : 현재 요소의 인덱스
• array (선택) : map()이 호출된 배열
• thisArg (선택) : 콜백 실행 시 this로 사용할 값

주요 특징

• 불변성 유지 : 원본 배열은 변경되지 않습니다.
• 새 배열 반환 : 반환값은 항상 원래와 길이가 같은 새 배열입니다.
• 함수형 프로그래밍 : for 루프보다 선언적이며 가독성이 좋습니다.

 

---

2.  실전 예제

a.  객체 배열에서 특정 값만 추출하기

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

const names = users.map(user => user.name);
console.log(names); // ["Alice", "Bob"]

b.  HTML 마크업 생성에 활용

const items = ["사과", "바나나", "체리"];
const listItems = items.map(item => `<li>${item}</li>`);
console.log(listItems.join(""));
// <li>사과</li><li>바나나</li><li>체리</li>

c.  인덱스 활용

const labels = ["A", "B", "C"];
const indexedLabels = labels.map((label, idx) => `${idx + 1}: ${label}`);
console.log(indexedLabels); // ["1: A", "2: B", "3: C"]

 

---

3.  map() vs forEach() vs filter()

메서드	반환값	주 용도	원본 배열 변경
map()	새로운 배열	변형(Transformation)	❌
forEach()	없음	부수 효과(Side effect)	❌
filter()	조건에 맞는 배열	필터링(Filtering)	❌

 

---

4.  자주 하는 실수와 주의사항

a.  map()을 사용하지만 반환하지 않음

const result = [1, 2, 3].map(num => {
  num * 2; // ❌ 반환하지 않음
});
console.log(result); // [undefined, undefined, undefined]

• 해결 : return 을 명시하거나 화살표 함수에서 축약형 사용

[1, 2, 3].map(num => num * 2); // ✅

b.  map()으로 부수 효과만 처리

[1, 2, 3].map(num => console.log(num)); // ❌ `forEach()`가 적절

 

---

5.  마무리

• map() 은 배열을 변형하여 새로운 배열을 반환하는 메서드입니다.
• 원본 배열은 변경되지 않으며, 함수형 프로그래밍 스타일로 작성할 수 있게 도와줍니다.
• 객체 추출, 마크업 생성, 데이터 변환 등에 유용하게 쓰입니다.
• forEach() 나 filter() 와 헷갈리지 않도록 용도에 따라 구분해서 사용해야 합니다.

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - Array.prototype.map()

 

---

반응형