[JavaScript] map() 메서드 사용방법 및 활용 예제

JavaScript의 map() 메서드는 배열의 모든 요소에 대해 함수를 호출하고, 그 결과를 새로운 배열로 반환하는 매우 유용한 배열 메서드입니다. map() 메서드는 기존 배열을 변경하지 않고, 각 요소를 변형한 결과를 새 배열로 반환합니다.

문법

array.map(function(currentValue, index, array) {
  // return element for new array
}, thisArg);

• currentValue: 배열에서 현재 처리되고 있는 요소입니다.
• index (선택 사항): 현재 처리되고 있는 요소의 인덱스입니다.
• array (선택 사항): map() 메서드를 호출한 배열입니다.
• thisArg (선택 사항): 콜백 함수 내부에서 this로 사용할 값입니다.

특징

• map()은 새로운 배열을 반환하며, 원래 배열은 변경되지 않습니다.
• 배열의 각 요소마다 한 번씩 주어진 함수를 호출합니다.
• 콜백 함수는 배열의 요소, 인덱스, 전체 배열을 인수로 받을 수 있습니다.

---

예시

1. 배열의 모든 숫자에 2를 곱하기

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

const doubledNumbers = numbers.map(function(num) {
  return num * 2;
});

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

이 예시에서는 numbers 배열의 각 요소에 2를 곱한 결과를 새로운 배열로 반환합니다. 원래 배열인 numbers는 그대로 유지됩니다.

 

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

const users = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Doe', age: 22 }
];

const names = users.map(function(user) {
  return user.name;
});

console.log(names); // ['John', 'Jane', 'Doe']

이 예시에서는 객체 배열에서 각 객체의 name 속성만을 추출하여 새로운 배열로 반환합니다.

 

3. 화살표 함수와 함께 사용

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

const squaredNumbers = numbers.map(num => num * num);

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

이 예시는 화살표 함수를 사용하여 각 요소를 제곱한 결과를 새로운 배열로 반환합니다.

주의 사항

• map() 메서드는 반드시 콜백 함수가 값을 반환해야 합니다. 그렇지 않으면 undefined 값이 반환됩니다.
• 원본 배열은 절대 수정되지 않으며, 새로운 배열이 반환됩니다.

 

map() 메서드는 배열의 각 요소를 변환하여 새로운 배열을 생성하는 데 매우 유용합니다. 이 메서드는 코드 가독성을 높이고, 배열 데이터를 효율적으로 변형할 수 있게 도와줍니다.