[D2 COMMUNITY] ECMAScript 2015 S67 seminar - 3. generator
0 likes2,750 views
The document discusses abstracting loops using generators. It shows how generators can abstract the structure of loops to make them iterable with for-of. This allows composite patterns with multiple nested loops to all be abstracted and exposed via for-of. It also discusses lazy evaluation of loops using generators to delay running loops until needed and avoid overhead up front. Examples show filtering, mapping and chaining these operations lazily on generated iterators.
![기존의 루프는 추상화가 불가함.
Abstract Loop
기존에는 루프 전체의 실행여부를 결정만 추상화할 수 있음.
루프의 추상화?
const elLoop = (el, f)=>{
const stack = [];
do{
f(el);
if(el.firstElementChild) stack.push(el.firstElementChild);
if(el.nextElementSibling) stack.push(el.nextElementSibling);
}while(el = stack.pop());
};
const elLoopWithFilter = (el, run, filter)=>{
const stack = [];
do{
if(filter(el)) run(el);
if(el.firstElementChild) stack.push(el.firstElementChild);
if(el.nextElementSibling) stack.push(el.nextElementSibling);
}while(el = stack.pop());
};
const elLoopWithFilter = (el, run, filter)=> elLoop(el, el=>filter(el) && run(el));
[1,2,3].forEach(v=>console.log(v));](https://image.slidesharecdn.com/3generator-161207024803/85/D2-COMMUNITY-ECMAScript-2015-S67-seminar-3-generator-2-320.jpg)
![Generator는 루프구조의 추상화를 가능하게 함
Abstract Loop
const elLoop = function*(el) {
const stack = [];
do{
yield(el);
if(el.firstElementChild) stack.push(el.firstElementChild);
if(el.nextElementSibling) stack.push(el.nextElementSibling);
}while(el = stack.pop());
};
for(const el of elLoop(document.getElementById('a'))){
if(el.tagName == 'article' && el.innerHTML.startWiths('projectA')) return el;
}](https://image.slidesharecdn.com/3generator-161207024803/85/D2-COMMUNITY-ECMAScript-2015-S67-seminar-3-generator-3-320.jpg)
![composite, visitor, iterator, decorator, cor 등의 복합적인 루프를 모두 추상화하여 for of로 노출
Abstract Loop
const is = (v, cls)=>{
if(!(v instanceof cls) throw 'invalid type';
};
const Composite = class{
constructor(title){
this.title = title;
this.children = new Set();
}
add(child, type = is(child, Composite)){
this.children.add(child);
}
*operation(){
yield this.title;
for(const c of this.children) yield* c.operation();
}
[Symbol.iterator](){
return this.operation();
}
}
let P = new Composite('parent');
P.add(new Composite('child1'));
P.add(new Composite('child2'));
for(const title of P) console.log(title);](https://image.slidesharecdn.com/3generator-161207024803/85/D2-COMMUNITY-ECMAScript-2015-S67-seminar-3-generator-4-320.jpg)
![루프를 지연하여 필요한 만큼만 루프를 돌면서 문제를 해결하고 루프가 시작되기 전에는 부하를 걸지 않음
Lazy Loop(Loop to Value)
const each = function*(arr){
console.log('each start');
for(const v of arr.slice(0)){
console.log('each:', v);
yield v;
}
};
const filter = function*(e, f){
console.log('filter start');
for(const v of e){
if(f(v)){
console.log('filter:', i);
yield v;
}
}
}
const map = function*(e, f){
console.log('map start');
for(const v of e){
console.log('map:', v);
yield f(v);
}
}
for(const v of
each([1,2,3,4])
) console.log(v); for(const v of
filter(each([1,2,3,4]), v=>(v%2 == 0))
) console.log(v);
for(const v of
map(
filter(each([1,2,3,4]), v=>(v%2 == 0)),
v=>v*2)
) console.log(v);](https://image.slidesharecdn.com/3generator-161207024803/85/D2-COMMUNITY-ECMAScript-2015-S67-seminar-3-generator-5-320.jpg)
![lazy chaining
const lazy = (_=>{
const gene = function*(iter){for(const v of iter) yield v; };
const filter = function*(g, f){for(const v of g) if(f(v)) yield v;};
const map = function*(g, f){for(const v of g) yield f(v);};
const Lazy = class{
constructor(iter){this.seed = gene(iter); }
[Symbol.iterator](){return this.seed; }
filter(f){
this.seed = filter(this.seed, f);
return this;
}
map(f){
this.seed = map(this.seed, f);
return this;
}
};
return v=>new Lazy(v);
})();
for(const v of lazy([1,2,3,4])) console.log(v);
for(const v of
lazy([1,2,3,4])
.filter(v=>v % 2 == 0)
) console.log(v);
for(const v of
lazy([1,2,3,4])
.filter(v=>v % 2 == 0)
.map(v=>v*2)
) console.log(v);](https://image.slidesharecdn.com/3generator-161207024803/85/D2-COMMUNITY-ECMAScript-2015-S67-seminar-3-generator-6-320.jpg)
[D2 COMMUNITY] ECMAScript 2015 S67 seminar - 3. generator
- 1. 3 generator
- 2. 기존의 루프는 추상화가 불가함. Abstract Loop 기존에는 루프 전체의 실행여부를 결정만 추상화할 수 있음. 루프의 추상화? const elLoop = (el, f)=>{ const stack = []; do{ f(el); if(el.firstElementChild) stack.push(el.firstElementChild); if(el.nextElementSibling) stack.push(el.nextElementSibling); }while(el = stack.pop()); }; const elLoopWithFilter = (el, run, filter)=>{ const stack = []; do{ if(filter(el)) run(el); if(el.firstElementChild) stack.push(el.firstElementChild); if(el.nextElementSibling) stack.push(el.nextElementSibling); }while(el = stack.pop()); }; const elLoopWithFilter = (el, run, filter)=> elLoop(el, el=>filter(el) && run(el)); [1,2,3].forEach(v=>console.log(v));
- 3. Generator는 루프구조의 추상화를 가능하게 함 Abstract Loop const elLoop = function*(el) { const stack = []; do{ yield(el); if(el.firstElementChild) stack.push(el.firstElementChild); if(el.nextElementSibling) stack.push(el.nextElementSibling); }while(el = stack.pop()); }; for(const el of elLoop(document.getElementById('a'))){ if(el.tagName == 'article' && el.innerHTML.startWiths('projectA')) return el; }
- 4. composite, visitor, iterator, decorator, cor 등의 복합적인 루프를 모두 추상화하여 for of로 노출 Abstract Loop const is = (v, cls)=>{ if(!(v instanceof cls) throw 'invalid type'; }; const Composite = class{ constructor(title){ this.title = title; this.children = new Set(); } add(child, type = is(child, Composite)){ this.children.add(child); } *operation(){ yield this.title; for(const c of this.children) yield* c.operation(); } [Symbol.iterator](){ return this.operation(); } } let P = new Composite('parent'); P.add(new Composite('child1')); P.add(new Composite('child2')); for(const title of P) console.log(title);
- 5. 루프를 지연하여 필요한 만큼만 루프를 돌면서 문제를 해결하고 루프가 시작되기 전에는 부하를 걸지 않음 Lazy Loop(Loop to Value) const each = function*(arr){ console.log('each start'); for(const v of arr.slice(0)){ console.log('each:', v); yield v; } }; const filter = function*(e, f){ console.log('filter start'); for(const v of e){ if(f(v)){ console.log('filter:', i); yield v; } } } const map = function*(e, f){ console.log('map start'); for(const v of e){ console.log('map:', v); yield f(v); } } for(const v of each([1,2,3,4]) ) console.log(v); for(const v of filter(each([1,2,3,4]), v=>(v%2 == 0)) ) console.log(v); for(const v of map( filter(each([1,2,3,4]), v=>(v%2 == 0)), v=>v*2) ) console.log(v);
- 6. lazy chaining const lazy = (_=>{ const gene = function*(iter){for(const v of iter) yield v; }; const filter = function*(g, f){for(const v of g) if(f(v)) yield v;}; const map = function*(g, f){for(const v of g) yield f(v);}; const Lazy = class{ constructor(iter){this.seed = gene(iter); } [Symbol.iterator](){return this.seed; } filter(f){ this.seed = filter(this.seed, f); return this; } map(f){ this.seed = map(this.seed, f); return this; } }; return v=>new Lazy(v); })(); for(const v of lazy([1,2,3,4])) console.log(v); for(const v of lazy([1,2,3,4]) .filter(v=>v % 2 == 0) ) console.log(v); for(const v of lazy([1,2,3,4]) .filter(v=>v % 2 == 0) .map(v=>v*2) ) console.log(v);