javaScript에서 map 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새 배열을 생성하는 데 사용됩니다. map은 데이터를 변환하거나 가공할 때 매우 유용하게 사용될 수 있습니다. 본 글에서는 map 함수의 기본 사용법부터 시작하여, 실제 예제를 통해 사용방법을 자세히 알아보겠습니다.
inline ad
const newArray = array.map((element, index, array) => {
// 변환 로직
return newValue;
});숫자 배열의 각 요소 값에 2를 곱하기
const numbers = [1, 2, 3, 4]; const doubled = numbers.map(number => number * 2); console.log(doubled); // [2, 4, 6, 8]
객체 배열에서 특정 속성 추출하기
const people = [
{ name: 'John', age: 25 },
{ name: 'Anna', age: 30 },
{ name: 'Mike', age: 28 }
];
const names = people.map(person => person.name);
console.log(names); // ['John', 'Anna', 'Mike']
배열의 요소를 이용해 새로운 객체 배열 생성하기
const numbers = [1, 2, 3];
const squaredInfo = numbers.map(number => ({ number: number, squared: number * number }));
console.log(squaredInfo);
// [
// { number: 1, squared: 1 },
// { number: 2, squared: 4 },
// { number: 3, squared: 9 }
// ]
map 함수는 단순 배열 변환뿐만 아니라, 조금 더 복잡한 데이터 가공에도 유용합니다. 예를 들어, 배열의 요소를 기반으로 새로운 배열을 생성하는 동시에, 특정 조건에 따라 필터링을 수행하고 싶다면 map과 filter 함수를 함께 사용할 수 있습니다.
map과 filter 결합하기
const people = [
{ name: 'John', age: 25 },
{ name: 'Anna', age: 30 },
{ name: 'Mike', age: 28 }
];
const adults = people
.filter(person => person.age >= 30)
.map(person => person.name);
console.log(adults); // ['Anna']map과 reduce 결합하기
map 함수로 각 사람의 나이만으로 구성된 배열을 만든 다음, reduce 함수로 모든 나이의 합계를 계산합니다.
const people = [
{ name: 'John', age: 25 },
{ name: 'Anna', age: 30 },
{ name: 'Mike', age: 22 }
];
const totalAge = people.map(person => person.age).reduce((acc, age) => acc + age, 0);
console.log(totalAge); // 77map과 sort 결합하기
map 함수로 이름만 추출한 배열을 만든 후, sort 함수로 이름을 알파벳 순으로 정렬합니다.
const people = [
{ name: 'John', age: 25 },
{ name: 'Anna', age: 30 },
{ name: 'Mike', age: 22 }
];
const sortedNames = people.map(person => person.name).sort();
console.log(sortedNames); // ["Anna", "John", "Mike"]