map, filter, reduce(map)

products라는 배열에 상품의 이름과 가격을 나타내어준 데이터들을 담아놓았다. key value쌍의 객체들은 각각 상품하나를 나타내고 있고 products 배열에 들어있다.

보통은 products에 있는 상품의 이름들을 따로 모아서 수집해서 출력을 한다거나 가격을 따로 배열에 담는 등에 로직을 사용하는데, 예를 들면 아래 코드와 같다. 이러한 코드를 작성할 때 사용하는 함수가 map함수이다.

 

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

  let names = [];
  for (const p of products) {
    names.push(p.name);
  }
  log(names);
 
 =>
 
["반팔티", "긴팔티", "핸드폰케이스", "후드티", "바지"]


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

[15000, 20000, 15000, 30000, 25000]

map함수를 작성해보자. 함수형 프로그래밍에서는 함수가 인자와 리턴값으로 소통하는 것을 권장한다. 즉 결과를 리턴해서 리턴된 값을 그 이후에 변화를 일으키는데 사용한다. 그리고 products를 상품뿐만 아니라 어떠한 데이터도 받을 수 있는 함수가 된다. iter로 바꿔주는데 map함수가 받는 값이 이터러블 프로토콜을 따른다는 뜻에서 iter로 지었다.

 

아래에 const map(f, iter)라고 되어있는데 이것은 f에게 완전히 위임을 한다는 것이다. 

즉, res.push(f(a))의 뜻은 product를 줄테니까 f 너가 res에 수집할 값을 줘라라고 해석할 수 있다.

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


=>

["반팔티", "긴팔티", "핸드폰케이스", "후드티", "바지"]
[15000, 20000, 15000, 30000, 25000]

함수형 프로그래밍에서는 이렇게 map이라는 함수에 보조함수를 통해서 사용자가 이터러블 안에있는 값에((p => p.name, products)에서 product를 말함) 어떠한 값을 사용자가 수집하겠다고 보조함수를 전달하는 식으로 사용하게 된다.(p => p.name)

그리고 map함수는 앞에서 말했던 고차함수 이기도 하다. 함수를 값으로 다루면서 사용자가 원하는 시점에 인자를 적용하는 함수이다. 그래서 map 함수를 통해서 해당하는 로직의 중복을 제거해 보았다.

<script>

  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));
  
  </script>
  
  =>
  
["반팔티", "긴팔티", "핸드폰케이스", "후드티", "바지"]
[15000, 20000, 15000, 30000, 25000]

 

  

 

 

 

 

<출처 : 유인동 함수형 프로그래밍과 JavaScript ES6+>

https://www.inflearn.com/course/functional-es6/dashboard

함수형 프로그래밍과 JavaScript ES6+ - 인프런 | 강의