JavaScript map() 정리

JavaScript map() 완벽 정리

map() 메서드는 배열의 각 요소를 변환하여 새로운 배열을 만드는 메서드입니다.
기존 배열은 변경되지 않고, 변환된 결과로 새로운 배열이 생성됩니다.

기본 문법

const newArray = array.map(function(요소, 인덱스, 배열) {
  // 새로운 값을 반환
});

매개변수 설명

• 요소(element): 현재 처리 중인 배열의 값
• 인덱스(index): 현재 요소의 인덱스(위치)
• 배열(array): map()이 호출된 원본 배열
• 반환값: 각 요소를 변환한 새로운 값 (이 값들이 새 배열을 구성합니다)

간단한 예제

const numbers = [1, 2, 3];
const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled);

출력 결과

[2, 4, 6]

기존 배열 numbers는 변경되지 않고, 새로운 배열 doubled가 만들어집니다.

화살표 함수로 간단하게

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

console.log(doubled);

출력 결과

[2, 4, 6]

인덱스와 함께 사용하기

const fruits = ['사과', '바나나', '포도'];
const labeled = fruits.map((item, index) => `${index + 1}. ${item}`);

console.log(labeled);

출력 결과

["1. 사과", "2. 바나나", "3. 포도"]

객체 배열 변환하기

const users = [
  { name: '홍길동', age: 20 },
  { name: '이몽룡', age: 25 },
  { name: '성춘향', age: 22 }
];

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

console.log(names);

출력 결과

["홍길동", "이몽룡", "성춘향"]

주의할 점

1. 반환값이 반드시 있어야 합니다.
   map()은 각 요소에 대해 반환된 값으로 새 배열을 만듭니다.
   반환하지 않으면 undefined가 들어간 배열이 만들어집니다.
2. 원본 배열은 변경되지 않습니다.
   map()은 새 배열을 반환하기 때문에, 원본 배열을 안전하게 유지할 수 있습니다.
3. forEach()와의 차이점
   • forEach()는 단순히 반복 실행만 합니다.
   • map()은 변환 결과를 새 배열로 반환합니다.

응용 예시

const prices = [1000, 2500, 5000];
const withTax = prices.map(price => price * 1.1);

console.log(withTax);

출력 결과

[1100, 2750, 5500]

요약

구분                                              내용

메서드	array.map(callback)
주요 매개변수	요소, 인덱스, 배열
반환값	새 배열
원본 배열 변경	❌ 없음
사용 목적	배열의 각 요소를 변환하여 새로운 배열 생성

결론

map()은 배열의 각 요소를 가공하여 새로운 배열을 만들 때 매우 유용한 메서드입니다.
특히 데이터를 변환하거나 필드만 추출하는 작업에 자주 사용됩니다.
forEach()와 달리 새로운 배열을 반환한다는 점을 꼭 기억하는 것이 중요합니다.