map 함수를 구현해보자 ( feat.이터러블 프로토콜 ) - JS ES6+ 함수형 프로그래밍 - 11

본 시리즈는 인프런 강의 함수형 프로그래밍과 JavaScript ES6+ ( 지식 공유자 : 유인동 님 ) 의 강의를 수강하면서 내용을 제 방식대로 포스팅하는 글입니다.

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

 

우선, 사용할 데이터를 먼저 구성해보자

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

각 프로퍼티 별로 일반적인 for ... of 문으로 구현하여 새 배열을 만든다 하면,

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

let prices = [];
for (const p of products) {
  prices.push(p.price);
}
console.log(prices); // [15000, 20000, 15000, 30000, 25000]

다음과 같이 구현할수 있을것이다.

이런 코드를 작성할때 쓰는 함수가 map() 함수이다.

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

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

let prices = [];
for (const p of products) {
  prices.push(p.price);
}
console.log(prices); // [15000, 20000, 15000, 30000, 25000]

// 위에서 구현한 로직과 거의 유사하다.
// 큰 차이점이 있다면, 함수내부에서 직접적으로 함수 외부로 변화를 일으키는 console.log 같은 함수를 사용하는것이 아닌
// 함수의 리턴값을 받아서 사용해야한다.
// 함수형 프로그래밍 에서는 함수가 인자와 리턴값으로 소통하는것을 권장한다.

const map = (f, iter?) => {
  let res = [];

  // map 함수는 이 부분을 추상화 한다.
  // 인자로 함수를 받아서, 어떤 값을 수집할 것인지 받아온 함수에게 완전히 위임한다.
  // for 문에도, 어떤값이 들어올지 모르니 추상화 한다.
  for (const a of iter) {
    res.push(f(a));
  }

  return res;
};

// 함수형 프로그래밍 에서는 map 이라는 함수에, 보조함수 를 받아서 iterable 안에 있는 값을
// 1대1 로 매핑 되면 어떠한 값을 수집하겠다고 보조함수를 전달하는 식으로 사용하게 된다.
// 이 map 함수는 고차함수 이기도 하다. 함수를 값으로 다루면서 원하는 시점에서 인자를 적용하는 고차함수다.
console.log(map((p) => p.name, products)); // ['반팔티', '긴팔티' '핸드폰케이스', '후드티', '바지']
console.log(map((p) => p.price, products)); // [15000, 20000, 15000, 30000, 25000]

위와 같이 우리가 평소 사용하는 Array.prototype.map 함수와 유사하게 구현해볼수 있다 !