map
- 제너레이터함수의 결과물에 대해서도 map을 할수 있기에 모든것들을 map을 할 수 있다.
- 유연하고 다형성이 높다
- 이터러블 프로토콜을 따른 map의 다형성을 코드로 알아 볼 수 있다.
구현:
const map =(f,iter) =>{
let res =[];
for (const a of iter){
res.push(f(a));
}
return res;
}
//이터러블 프로토콜을 따른 map의 다형성
console.log([1,2,3].map(a=>a+1));
function *gen(){
yield 3;
yield 3;
yield 4;
}
console.log(map(a=>a*a,gen()));
//제너레이터함수의 결과물에 대해서도 map을 할수 있기에 모든것들을 map을 할 수 있다.
//유연하고 다형성이 높다
filter
- const products =[
{name: '반팔티', price:15000},
{name: '바지', price:25000},
{name: '긴팔티', price:20000},
{name: '핸드폰케이스', price:15000},
{name: '후드티', price:30000},
];
const add =(a,b)=>a+b;
let under20000 = [];
for (const p of products){
if (p.price<20000) under20000.push(p);
}
console.log(...under20000);
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<20000,products));
//filter 역시 이터러블프로토콜을 따른다reduce
- 값을 축약하는 함수
- 하나의 값을 누적해 나갈때 사용
- 보조함수를 통해 어떻게 축약할지 완전히 위임하기 때문에, 복잡한 형태의 데이터역시 축약하는데 있어서 유리.
구현:
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;
};
const add =(a,b)=>a+b;
console.log(reduce(add,[1,2,3,4,5]));
위에 까지 map filter reduce를 알아 봤는데, 코드를 값으로 다룬다면 전체적인 코드의 표현력을 높아 진다. 이를 위해 사용하는 함수 go, pipe curry 를 구현해 보았다.
go
- go 함수는 인자로 함수들을 받아 차례로 실행시켜 결과에 해당하는 값을 리턴하는 함수이다.
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;
};
const go =(...args)=>reduce((a,f)=>f(a),args);
console.log(go(
0,
a=>a+1,
a=>a+10,
a=>a+100,
));pipe
- 함수들이 나열되어있는, 합성된 함수로 만들어진 함수이다.
구현:
const pipe = (...fs)=>(a)=>go(a,...fs);
const f = pipe(
(a,b)=>a+b,
a => a+1,
a => a+10,
a => a+100);
curry
- 코드를 값으로 다루면서 원하는 시점에 평가시키는 함수
- 함수를 받아서,
- 함수를 리턴후 인자를 받아서
- 인자가 원하는 갯수의 인자가 들어왔을때, 나중에 평가시키는 함수이다.
구현:
const curry = f =>
(a, ..._) =>_.length ? f(a, ..._) : (..._) => f(a, ..._);
// 함수를 받아 함수를리턴하고, 리턴된 함수가 실행되었을때,
//인자가 두개이상이라면 (length가 있을때)
//받아둔 함수를 즉시 실행하고
//아니라면 다시 새 인자를 받은후 리턴
const mult = curry((a,b) => a*b);
console.log(mult(1));
//함수를 전달해서 즉시 리턴이된다 이 함수의 인자를 하나만 전달하면,
//그다음 결과는 함수다
느낀점
오늘은 처음해보는 것 들을 많이 해보았다. es6의 함수 개념을 배우고 실습하면서, 이걸 내가 써먹는 일이 있을까? 싶었으나 먼저 공부해보신 팀원도 똑같은 생각을 옛날에 가졌는데 지금와서 보면 편하게 느꼈다고 한다.
함수를 이용해 코드를 줄여나가며 컴팩트하게 가독성을 높이고,
그 과정을 실습해보면서 약간의 고통의 시간이 있었지만, 구글링해서 찾았던 멋있고 짧은 코드들이 이런식으로 만들어 진다는 것에 흥미를 느끼고 재밌게 했다.
내일부터는 이 과정을 내 코드에 적용하는 시도 해 보려고 하는데, 다른 할 것 도 많으니 시간관리를 잘해야 겠다.
여담으로, 팀원분들과의 시작 전 스크럼 시간이 굉장히 도움이 되는 것 같다. 아무래도 같이 교육받는 입장이다 보니 공감되는 부분이 많아서 인 듯? 한데...? 아무렴 좋으신 분들인 것 같아 다행이고 나만 잘하면 되겠다는 마음다짐과 함께 -끝!
꾸준히 성장하기