JavaScript-함수형 언어 (3)

map함수

• map함수는 iterable객체의 값들에 조회하여 조작을 거쳐 배열로 리턴하는 함수이다.
• iterable한 객체이면 map은 무조건 쓸 수 있다.
• 더불어 generator를 통해 왠만한건 iterable하게 만들 수 있으므로 사실상 map은 거의 다 쓰일 수 있는 함수이다.

const product = [
  { name : '패딩', price : 200000 },
  { name : '바지', price : 150000 },
  { name : '맨투맨', price : 100000 },
  { name : '후리스', price : 50000 }
];

// 일반적인 map의 구조
const map = (f, iter) => {
  let res = [];
  for (const a of iter) {
    res.push(f(a));
  }
  return res;
};

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

console.log(product.map(p => p.name));
console.log(product.map(p => p.price));

/*
[ '패딩', '바지', '맨투맨', '후리스' ]
[ '패딩', '바지', '맨투맨', '후리스' ]
[ 200000, 150000, 100000, 50000 ]
[ 200000, 150000, 100000, 50000 ]
*/

const map = (f, iter) => {
  let res = [];
  for (const a of iter) {
    res.push(f(a));
  }
  return res;
};
let m = new Map();
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
let iter = m[Symbol.iterator]();
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());

console.log(map(([k, v]) => [k, v * 10], m));

/*
{ value: [ 'a', 1 ], done: false }
{ value: [ 'b', 2 ], done: false }
{ value: [ 'c', 3 ], done: false }
{ value: undefined, done: true }
[ [ 'a', 10 ], [ 'b', 20 ], [ 'c', 30 ] ]
*/

filter함수

• filter함수는 콜백함수로 조건식을 넣어서 해당 조건에 맞는 값들만을 배열에 넣어 반환한다.

const product = [
  { name : '패딩', price : 200000 },
  { name : '바지', price : 150000 },
  { name : '맨투맨', price : 100000 },
  { name : '후리스', price : 50000 }
];

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

console.log(...filter(p => p.price < 170000, product));
console.log(...filter(p => p.name === '후리스', product));

console.log(...product.filter(p => p.price < 170000));
console.log(...product.filter(p => p.name === '후리스'));

/*
{ name: '바지', price: 150000 } { name: '맨투맨', price: 100000 } { name: '후리스', price: 50000 }
{ name: '후리스', price: 50000 }
{ name: '바지', price: 150000 } { name: '맨투맨', price: 100000 } { name: '후리스', price: 50000 }
{ name: '후리스', price: 50000 }
 */

reduce함수

• reduce함수는 iterable의 값을 다른 하나의 값으로 축약하는 함수이다.
• iterable객체의 값들을 순회하면서 하나의 값으로 누적해나갈 때 이 함수를 사용한다.

const nums = [1, 2, 3, 4, 5];

const reduce = (f, acc, iter) => {
    if (!iter) {  // acc를 optional한 값으로 처리하기 위함.
        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;

console.log(reduce(add, 0, nums));
console.log(reduce(add, nums));

const product = [
    { name : '패딩', price : 200000 },
    { name : '바지', price : 150000 },
    { name : '맨투맨', price : 100000 },
    { name : '후리스', price : 50000 }
];

console.log(product.reduce((total_price, product) => total_price + product.price, 0));

/*
15
15
500000
 */

map, filter, reduce 중첩사용

const product = [
    { name : '패딩', price : 200000 },
    { name : '바지', price : 150000 },
    { name : '맨투맨', price : 100000 },
    { name : '후리스', price : 50000 }
];

// 먼저 filter를 통해서 17000원 이하의 가격인 상품들을 뽑아내고 싶다.
const under170000 = product.filter(p => p.price < 170000);
console.log(under170000);

// 다음으로 필터링을 거친 가격들만을 map으로 뽑아내고 싶다.
const result = under170000.map(p => p.price);
console.log(result);

// 마지막으로 필터링을 거친 가격들의 합을 구하고 싶다.
const add = (a, b) => a + b;
const result_price = result.reduce(add);
console.log(result_price);

// 중첩문
const final_result01 = product
    .filter(p => p.price < 170000)
    .map(p => p.price)
    .reduce(add);
console.log(final_result01);

// 순서가 바뀌었지만 결과가 같은 중첩문
const final_result02 = product
    .map(p => p.price)
    .filter(n => n < 170000)
    .reduce(add);
console.log(final_result02);

/*
[ { name: '바지', price: 150000 },
  { name: '맨투맨', price: 100000 },
  { name: '후리스', price: 50000 } ]
[ 150000, 100000, 50000 ]
300000
300000
300000
*/