map() 함수는 JavaScript에서 배열의 각 요소를 변환하여 새로운 배열을 생성하는 메서드이다.
이 메서드는 원본 배열을 변경하지 않고, 변환된 요소들로 이루어진 새로운 배열을 반환한다.
기본 사용법
let array = [1,2,3,4,5]
let newArray = array.map(num => num*num);
결과: 새로운 배열 [1, 4, 9, 16, 25]가 생성
인덱스와 원본 배열 사용
map() 함수는 인덱스와 원본 배열에 대한 정보도 사용할 수 있다.
각 요소의 인덱스를 포함하여 문자열을 생성한다.
let numbers = [10, 20, 30];
const result = numbers.map((num, index) => ){
return `index ${index}: ${num}1;
}
결과: ["Index 0: 10", "Index 1: 20", "Index 2: 30"]
객체 배열 처리
const users = [
{ name: 'Alice', age: 15},
{ name: 'Bob', age: 25},
{ name: 'ch', age: 30},
];
const userNames = user.map(user => user.name);
console.log(userNames);
결과: ['Alice', 'Bob', 'ch']
API로부터 받은 데이터에서 특정 속성만을 추출하고자 할 때 유용하게 사용된다.
주의사항
- 원본 배열 불변성: map() 은 원본 배열을 변경하지 않으므로, 원본 배열은 그대로 유지
- 빈 요소 처리: map()은 빈 요소를 포함한 배열에서도 잘 작동하지만, 빈 요소는 무시되지 않고 undefined로 처리
성능
- map()함수는 배열의 모든 요소를 순회하므로, 배열의 크기에 따라 성능이 영향을 받을 수 있다.
정리
- 자바스크립트의 map() 함수는 배열의 각 요소에 대해 동일한 작업을 수행하고,
그 결과를 새로운 배열로 반환한다. - 배열 처리 작업을 간결하게 만들어주는 유용한 메서드이다.
