zzou

JavaScript의 map, reduce, filter 메서드는 배열을 처리할 때 매우 유용한 고차 함수입니다. 이들 함수의 사용법과 예제를 통해 자세히 알아보겠습니다.

map

map 메서드는 배열의 각 요소에 대해 주어진 함수(콜백 함수)를 호출하고, 그 결과를 새로운 배열로 반환합니다. 원본 배열은 변경되지 않습니다.

const newArray = array.map(callback(element[, index[, array]])[, thisArg])

callback – 각 요소에 대해 실행할 함수. 세 가지 인수를 받을 수 있습니다.

element – 처리할 현재 요소.

index (선택적) – 처리할 현재 요소의 인덱스.

array (선택적) – map을 호출한 배열.

thisArg (선택적) – callback 함수 내부에서 사용할 this 값.

예제

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

// 모든 요소에 2를 곱한 새로운 배열 생성
const doubled = numbers.map(num => num * 2);

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

filter

filter 메서드는 배열의 각 요소에 대해 주어진 함수(콜백 함수)를 호출하여 true를 반환하는 요소들로만 구성된 새로운 배열을 생성합니다. 원본 배열은 변경되지 않습니다.

const newArray = array.filter(callback(element[, index[, array]])[, thisArg])

callback – 각 요소에 대해 실행할 함수. 세 가지 인수를 받을 수 있습니다.

element – 처리할 현재 요소.

index (선택적) – 처리할 현재 요소의 인덱스.

array (선택적) – filter 를 호출한 배열.

thisArg (선택적) – callback 함수 내부에서 사용할 this 값.

예제

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

// 짝수만 필터링하여 새로운 배열 생성
const evens = numbers.filter(num => num % 2 === 0);

console.log(evens); // [2, 4]

reduce

reduce 메서드는 배열의 각 요소에 대해 주어진 함수(콜백 함수)를 호출하여, 단일 값으로 줄입니다.

reduce 는 배열의 각 요소를 순차적으로 처리하여 누적값을 계산합니다.

const result = array.reduce(callback(accumulator, element[, index[, array]])[, initialValue])

callback – 각 요소에 대해 실행할 함수. 네 가지 인수를 받을 수 있습니다.

accumulator – 콜백의 반환 값을 누적합니다. 처음에는 initialValue 이거나 배열의 첫 번째 요소입니다.

element – 처리할 현재 요소.

index (선택적) – 처리할 현재 요소의 인덱스.

array (선택적) – reduce를 호출한 배열.

initialValue (선택적) – accumulator의 초기 값.

예제

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

// 모든 요소의 합을 계산
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum); // 15

복잡한 예제

배열의 객체들에서 특정 속성값의 합을 구하는 예제입니다.

const items = [
  { name: 'apple', quantity: 2, price: 3 },
  { name: 'banana', quantity: 1, price: 1 },
  { name: 'cherry', quantity: 5, price: 2 }
];

// 총 가격 계산
const totalCost = items.reduce((acc, item) => acc + (item.quantity * item.price), 0);

console.log(totalCost); // 16

마무리

JavaScript의 map, reduce, filter 메서드는 배열을 다루는 강력한 도구입니다.

이들 함수는 코드를 더 읽기 쉽게 만들고, 배열의 복잡한 처리를 간단하게 수행할 수 있도록 도와줍니다.

각 메서드의 사용법과 예제를 통해 이들을 효과적으로 활용할 수 있기를 바랍니다.