[Javascript] map, filter, reduce

1. map

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

  const arr = [1,2,3]  
  log(arr.map(a => a + 1));


  const products = [
    {name: '반팔티', price: 15000},
    {name: '긴팔티', price: 20000},
    {name: '핸드폰케이스', price: 15000},
    {name: '후드티', price: 30000},
    {name: '바지', price: 25000}
  ]; // Map으로 이루어진 Array를 지정
  
  log(products.map(p => p.name));
  
  // output
  (3) [2, 3, 4]
  (5) ['반팔티', '긴팔티', '핸드폰케이스', '후드티', '바지']

1-1. 이터러블 프로토콜을 따른 map의 다형성

  const log = console.log;
  const products = [
    {name: '반팔티', price: 15000},
    {name: '긴팔티', price: 20000},
    {name: '핸드폰케이스', price: 15000},
    {name: '후드티', price: 30000},
    {name: '바지', price: 25000}
  ]; // Map으로 이루어진 Array를 지정

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

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

• 함수와 이터러블 프로토콜을 따르는 객체를 인자로 받는 map 메서드를 새로 지정했다.

  let m = new Map(); // Map은 이터러블 프로토콜을 따르는 객체
  m.set('a', 10);
  m.set('b', 20);
  log(map(([k, a]) => [k, a * 2], m));
  log(new Map(map(([k, a]) => [k, a * 2], m))); b // Map 객체는 이차원 배열로 값을 넘겨 받을 수 있음.
  
  // output 
  [ [ 'a', 20 ], [ 'b', 40 ] ]
  Map(2) { 'a' => 20, 'b' => 40 }

• 이렇게 사용할 수도 있다.

2. filter

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

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

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

// output
{name: '반팔티', price: 15000} 
{name: '핸드폰케이스', price: 15000}

3. reduce

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

  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;
  };
  log(reduce(add, 0, [1, 2, 3, 4, 5])); // 15

  log(add(add(add(add(add(0, 1), 2), 3), 4), 5)); // 위의 코드와 같은 로직

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

4. 2만원 이하의 제품의 총 금액을 구하시오.

  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)))); // map에서 가격 배열을 가져온 후, filter로 조건 판단, 이 후 reduce 메서드로 총 합을 구한다.

  log(
    reduce(
      add,
      filter(n => n >= 20000,
        map(p => p.price, products)))); // 위와 반대로 조건을 먼저 판단 한 뒤, 배열로 만듬