<aside> ➡️ 함수형 프로그래밍에서 map, filter, reduce 함수는 실용적으로 자주 사용되는 함수이다.
</aside>
const products = [
{ name: '반팔티', price: 15000 },
{ name: '긴팔티', price: 20000 },
{ name: '핸드폰케이스', price: 15000 },
{ name: '후드티', price: 30000 },
{ name: '바지', price: 25000 },
];
// 만약 name만 따로, price만 따로 분리하려면 어떻게 할까?
// 일반적인 문장형은 : 직접적으로 가져올 데이터를 명시한다.
let names = [];
for(const p of products){
name.push(p.name);
}
log(names); // ['반팔티', '긴팔티', '핸드폰케이스' , '후드티', '바지']
let prices = [];
for(const p of products){
prices.push(p.price);
}
log(prices); // [15000, 20000, 15000, 30000, 25000]
// map을 활용한 이터러블형은 : 보조함수를 통해 가져올 데이터를 추상화한다.
// 함수형 프로그래밍에서는 함수가 인자와 리턴값으로 소통하는 것을 권장한다.
const map = (f, iter) => {
let res = [];
for(const a of iter){
res.push(f(a)); // {name: '~~'} => ~~
}
return res;
};
log(map(p => p.name, products)); // ['반팔티', '긴팔티', '핸드폰케이스' , '후드티', '바지']
log(map(p => p.price, products)); // [15000, 20000, 15000, 30000, 25000]
web api나 헬퍼 함수도 ECMAScript의 이터레이터/이터러블 프로토콜을 따르고 있고, 앞으로 계속해서 이러한 방향으로 만들어질 것으로 판단. 그렇기 때문에 이터러블 프로토콜을 따르는 함수들을 사용하는 것은 앞으로 다양한 헬퍼 함수와의 조합성이 좋아진다는 의미이기도 하다.log([1, 2, 3].map(a => a + 1)); // [2, 3, 4]
// document.querySelectorAll은 Array를 상속받는 객체가 아니기 때문에 map함수가 프로토타입에 없다.
log(document.querySelectorAll('*').map(el => el.nodeName)); // undefined
// 그러나 위에서 만든 map 함수를 사용하면 잘 동작한다. => 이터러블 프로토콜을 잘 따르고 있기 때문
log(map(el => el.nodeName, document.querySelectorAll('*'))); // ["HTML", "HEAD", ...]
// 실제 이터러블 프로토콜을 잘 따르고 있음
const it = document.querySelectorAll('*')[Symbol.iterator]();
log(it.next()); // {value: html, done: false}
log(it.next()); // {value: head, done: false}
// generator 함수의 결과값에도 map을 할 수 있다. -> 사실상 모든 것에 map이 가능하다.
function *gen(){
yield 2;
if(false) yield 3;
yield 4;
}
log(map(a => a * a, gen()); // [4, 16]
let m = new Map();
m.set('a', 10);
m.set('b', 20);
const it = m[Symbol.iterator]();
// it.next(); // {value: Array(2), done: false} -> ['a', 10]
// it.next(); // {value: Array(2), done: false} -> ['b', 20]
// it.next(); // {value: undefined, done: true}
// 위처러 it는 이터레이터이므로 아래처럼 새로운 Map함수를 만들어 낼 수도 있다.
log(new Map(map(([k, a]) => [k, a * 2], m))); // Map(2) {'a' => 20, 'b' => 40}
const products = [
{name: '반팔티', price: 15000},
{name: '긴팔티', price: 20000},
{name: '핸드폰케이스', price: 15000},
{name: '후드티', price: 30000},
{name: '바지', price: 25000}
];
// 기존에는 20000원 이상, 20000원 미만의 상품을 걸러낼 때 아래와 같이 작업했었다.
let under20000 = [];
for(const p of products){
if(p.price < 20000) under20000.push(p);
}
log(...under20000); // {name: '반팔티', price: 15000}, {name: '핸드폰케이스', price: 15000}
let over20000 = [];
for(const p of products){
if(p.price > 20000) over20000.push(p);
}
log(...over20000); // {name: '후드티', price: 30000}, {name: '바지', price: 25000}
// 그러나 이터러블 프로토콜을 따른 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)); // {name: '반팔티', price: 15000}, {name: '핸드폰케이스', price: 15000}
log(...filter(p => p.price > 20000, products)); // {name: '후드티', price: 30000}, {name: '바지', price: 25000}
log(filter(n => n % 2, [1, 2, 3, 4])); // [1, 3]
log(filter(n => n % 2, function *(){
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
}())); // [1, 3, 5]
const nums = [1, 2, 3, 4, 5];
let total = 0;
// 어떤 특정한 값을 계속해서 순회하면서 하나의 값으로 누적해나갈 때 아래와 같이 사용했었다.
for(const n of nums){
total = total + n;
}
log(total); // 15
// 우리는 실제 아래와 같은 코드를 reduce 함수를 통해 구현해야 한다.
const add = (a, b) => a + b;
log(add(add(add(add(add(0, 1), 2), 3), 4), 5)); // 15
// reduce 함수를 만들어보자
const reduce = (f, acc, iter) => {
for(const a of iter){
acc = f(acc, a);
}
return acc;
};
log(reduce(add, 0, [1, 2, 3, 4, 5])); // 15
// acc(시작하는 값)없이 사용하는 reduce 함수
// reduce(add, [1, 2, 3, 4, 5])일 경우 => reduce(add, 1, [2, 3, 4, 5])로 변경해버림
// acc가 없는 상태에서도 시작값을 0으로 하여 동일한 15가 나오도록 만들어준다.
const reduce = (f, acc, iter) => {
if(!iter){
iter = acc[Symbol.iterator]();
acc = iter.next().value; // 첫번쨰 수를 뽑아써야하므로
}
for(const a of iter){
acc = f(acc, a);
}
return acc;
};
log(reduce(add, [1, 2, 3, 4, 5])); // 15
const products = [
{name: '반팔티', price: 15000},
{name: '긴팔티', price: 20000},
{name: '핸드폰케이스', price: 15000},
{name: '후드티', price: 30000},
{name: '바지', price: 25000}
];
const add = (a, b) => a + b;
const reduce = (f, acc, iter) => {
if(!iter){
iter = acc[Symbol.iterator]();
acc = iter.next().value; // 첫번째 수를 뽑아써야하므로
}
for(const a of iter){
acc = f(acc, a);
}
return acc;
};
reduce((total_price, product) => total_price + product.price, 0, products); // 105000