자바스크립트 map() 함수

자바스크립트에서 map() 함수는 배열의 각 요소를 변환하여 새로운 배열을 생성하는 데 사용됩니다. 이 함수는 배열의 각 요소를 순회하면서 주어진 함수를 적용하고, 그 결과를 새로운 배열에 담아 반환합니다. 원본 배열은 변경되지 않습니다.

 

기본 사용법

map() 함수는 다음과 같은 형태로 사용됩니다:

const newArray = array.map((element, index, array) => {
  // 변환된 값을 반환
});

 

• element: 현재 처리 중인 배열의 요소
• index: 현재 처리 중인 요소의 인덱스 (선택 사항)
• array: 원본 배열 (선택 사항)

 

예제

1. 기본 예제: 숫자 배열을 제곱한 새로운 배열을 만들고 싶다면:

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

 

 

2. 객체 배열 변환: 객체 배열에서 특정 속성만 추출하고 싶다면:

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']

 

3. 인덱스와 원본 배열 사용: 인덱스와 원본 배열을 사용하여 더 복잡한 변환을 할 수 있습니다.

const numbers = [10, 20, 30, 40];
const details = numbers.map((num, index, array) => ({
  original: num,
  index: index,
  total: array.length
}));
console.log(details);
/*
[
  { original: 10, index: 0, total: 4 },
  { original: 20, index: 1, total: 4 },
  { original: 30, index: 2, total: 4 },
  { original: 40, index: 3, total: 4 }
]
*/

 

 

중요 사항

• 원본 배열은 변경되지 않습니다: map() 함수는 원본 배열을 변경하지 않고, 새로운 배열을 반환합니다.
• 길이 유지: map()은 원본 배열과 같은 길이의 새 배열을 반환합니다. 즉, 요소가 추가되거나 제거되지 않습니다.

이렇게 map() 함수는 배열의 각 요소를 변환할 때 매우 유용합니다. 필요에 따라 다양한 변환 작업을 간결하게 처리할 수 있습니다.