[함수형 프로그래밍과 ES6+] map

이번 시간에는 map 함수에 대해 알아보자.

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

이런 상품들이 있을 떄 상품명과 가격을 따로 뽑아보고 싶다면 아래와 같이 작성할 것이다.

// 상품명 뽑기 
let names = [];
   for (const p of products) {
     names.push(p.name);
   }
 console.log(names);

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

이런 코드를 작성할 떄 사용하는 함수가 map 함수다. map 함수 안의 기능은 위 코드와 비슷하다. 가장 큰 차이점은 map은 새로운 배열을 리턴해준다는 점이다. iterable 한 배열이 들어가기 때문에 변수명은 iter라고 지정해주었고, p.name 처럼 직접적으로 값을 지정해주기보다는, f 라는 함수를 넣어주었다.

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

map의 첫번째 인자에 함수를 넣어주면 이렇게 사용자의 용도에 맞추어 쓸 수 있게 된다.

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