[javascript] map, filter, reduce

김효진·2021년 8월 7일

JavaScript Map filter reduce

함수형 프로그래밍과 JavaScript ES6+

목록 보기

4/4

💡 함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다.

map

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

Array.prototype.map() - JavaScript | MDN

for..of를 이용하여 list 구성하기

const products= [
  { name: "반팔티", price: 15000 },
  { name: "긴팔티", price: 20000 },
  { name: "핸드폰케이스", price: 15000 },
  { name: "후드티", price: 30000 },
  { name: "바지", price: 25000 },
];

let names= [];
for (const p ofproducts) {
names.push(p.name);
}
log(names);

let prices= [];
for (const p ofproducts) {
prices.push(p.price);
}
log(prices);

map 함수를 사용하기

const map = (f, iter) => {
  let res = [];
  for (const a of iter) {
    res.push(f(a));
  }
  return res;
};

// let names = [];
// for (const p of products) {
//   names.push(p.name);
// }
// log(names);

log(map((p) => p.name, products));

// let prices = [];
// for (const p of products) {
//   prices.push(p.price);
// }
// log(prices);

log(map((p) => p.price, products));

filter

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

Array.prototype.filter() - JavaScript | MDN

for..of 사용하기

let under20000= [];
for (const p of products) {
  if (p.price < 20000) under20000.push(p);
}
log(...under20000);

let over20000= [];
for (const p of products) {
  if (p.price >= 20000) over20000.push(p);
}

filter 함수 사용하기

const filter = (f, iter) => {
  let res = [];
  for (const a of iter) {
    if (f(a)) res.push(a);
  }
  return res;
};

let under20000= [];
for (const p of products) {
  if (p.price < 20000) under20000.push(p);
}
log(...under20000);

log(...filter((p) => p.price < 20000, products));

let over20000= [];
for (const p of products) {
  if (p.price >= 20000) over20000.push(p);
}
log(...over20000);

log(...filter((p) => p.price >= 20000, products));

log(filter((n) => n % 2, [1, 2, 3, 4]));

log(
  filter(
    (n) => n % 2,
    (function* () {
      yield 1;
      yield 2;
      yield 3;
      yield 4;
      yield 5;
    })()
  )
);

reduce

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

Array.prototype.reduce() - JavaScript | MDN

합을 리턴하는 함수 만들기

constnums= [1, 2, 3, 4, 5];

let total= 0;
for (const n ofnums) {
	total=total+ n;
}
log(total);

reduce 함수를 사용해서 만들기

const reduce = (f, acc, iter) => {
  if (!iter) { // iter가 없는 경우
    iter = acc[Symbol.iterator]();
    acc = iter.next().value;
  }
  for (const a of iter) {
    acc = f(acc, a);
  }
  return acc;
};

const add = (a, b) => a + b;

log(reduce(add, 0, [1, 2, 3, 4, 5]));
// 15

log(add(add(add(add(add(0, 1), 2), 3), 4), 5));
// 15

log(reduce(add, [1, 2, 3, 4, 5]));
// 15
log(reduce(add, 1, [2, 3, 4, 5]));
// 두번째 값이 없는 경우는 iter의 첫번째를 acc로 인식함

reduce 함수의 다형성

// 가격 합
log(
  reduce((total_price, product) => total_price + product.price, 0, products)
);

map + filter + reduce 중첩 사용과 함수형 사고

map, filter, reduce 함수들 모음

const map = (f, iter) => {
  let res = [];
  for (const a of iter) {
    res.push(f(a));
  }
  return res;
};

const filter = (f, iter) => {
  let res = [];
  for (const a of iter) {
    if (f(a)) res.push(a);
  }
  return res;
};

const reduce = (f, acc, iter) => {
  if (!iter) {
    iter = acc[Symbol.iterator]();
    acc = iter.next().value;
  }
  for (const a of iter) {
    acc = f(acc, a);
  }
  return acc;
};

실제 적용

const products= [
  {name: '반팔티', price: 15000},
  {name: '긴팔티', price: 20000},
  {name: '핸드폰케이스', price: 15000},
  {name: '후드티', price: 30000},
  {name: '바지', price: 25000}
];

const add = (a, b) => a + b;

log(
  reduce(
    add,
    map(p => p.price,
      filter(p => p.price < 20000, products))));
// 30000

log(
  reduce(
    add,
    filter(n => n >= 20000,
      map(p => p.price, products))));
// 75000