Home IT/WEB map 함수 사용 방법, 함수 결합하여 사용하는 방법 map+filter, map+reduce

[javascript]map 함수 사용 방법, 함수 결합하여 사용하는 방법 map+filter, map+reduce

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); // 77

map과 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"]

RECENT POSTS

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...

[javascript]Math.min, Math.max 사용방법

Math.min과 Math.max는 JavaScript의 Math 객체에서 제공하는 메서드로, 각각 주어진 숫자들 중 최소값과 최대값을 반환합니다. 이 메서드들은 다양한 수학 연산과 데이터 처리에서 유용하게 사용될 수...

널 병합 연산자 Nullish coalescing operator (??) 에 대해서 알아보자.

널 병합 연산자 Nullish coalescing operator (??)는 JavaScript에서 null이나 undefined 값을 체크하는 데 사용되는 연산자입니다. 이 연산자는 좌변의 피연산자가 null 또는 undefined일 경우 우변의 피연산자를 반환하고, 그렇지 않은 경우 좌변의...

[css]부모 요소의 border-radius가 자식 요소의 background-color로 가려지지 않도록 설정할 수 있는 방법

overflow: hidden 속성 사용 부모 요소의 border-radius를 자식 요소의 background-color로 가려지지 않도록 설정해야 합니다. 이를 위해 부모 요소에 overflow: hidden; 속성을 추가하여 자식 요소의 배경이...