This document discusses ES6 generators and how they can be used to avoid callback inception. Generators allow functions to pause execution and yield values using the yield keyword. Behind every generator is an iterator object that can be used to control execution. Generators can be iterated over using a for...of loop or by calling next() on the iterator. Examples demonstrate using generators to iterate through fibonacci numbers and to pause asynchronous code using yield instead of callbacks.

1. ES6 Generators

2. Feel the *power

3. Avoid callback inception

4. Avoid callback inception
$el.on('click', function(evt) {
$.ajax('/vsearch/pj', function(data) {
dust.render('tl/shared/person', data, function
(err, out) {
$el.html(out);
// Please, make it stop!
})
})
});

5. Example
> function *hoover() {
console.log('Preparing to yield "Boulder"');
yield 'Boulder';
console.log('All done yielding');
}
> let iter = hoover();
// Nothing happens...
> iter.next();
'Preparing to yield "Boulder"'
Object {value: "Boulder", done: false}
> iter.next();
'All done yielding'
Object {value: undefined, done: true}

6. Iterators
Behind every Generator is a great Iterator

7. next()

8. next()
All an object needs to be an iterator is a next* method, which
returns an object with a value property and a done property.
* Iterators generally also include a throw method for throwing errors.

9. for … of
function *hoover() {
console.log('Preparing to yield "Boulder"');
yield 'Boulder';
console.log('All done yielding');
}
for (let x of hoover()) {
console.log(`x is ${x}`);
}
// Output:
/*
Preparing to yield "Boulder"
x is Boulder
All done yielding
*/

10. Iterables
● Arrays
● Maps
● Sets

11. Iterables
let vals = ['a', 'b', 'c'];
for (let x of vals) {
console.log(`x is ${x}`);
}
// Output:
/*
'a'
'b'
'c'
*/
// Python lovers rejoice

12. Yield

13. Yield

14. Fibonacci Generator
function *fibGenerator() {
let prev1 = 1;
let prev2 = 0;
let current;
yield prev2;
yield prev1;
while (true) {
current = prev1 + prev2;
prev2 = prev1;
prev1 = current;
yield current;
}
}

15. Using the Fibonacci Generator
var fib = fibGenerator();
console.log(fib.next());
0
console.log(fib.next());
1
console.log(fib.next());
1
console.log(fib.next());
2
console.log(fib.next());
3
console.log(fib.next());
5

16. Wait for it...

17. Prompt
We already know how to pause execution in the middle of
a function.
function getName() {
var name = prompt('What's your name?');
return name;
}
But now we can pause execution without freezing the entire
browser.

18. Wait for it...

19. Avoid callback inception
$el.on('click', function(evt) {
$.ajax('/vsearch/pj', function(data) {
dust.render('tl/shared/person', data, function
(err, out) {
$el.html(out);
// Please, make it stop!
})
})
});
remember?

20. yield is the new callback
function *showFeed() {
let data = yield request('/feed');
let dom = yield feedTemplate.render(data);
document.querySelector('#feed-container').appendChild(dom);
}
// To use
runMyGenerator(showFeed);

21. Behind the Scenes - request
function request(url) {
if (cachedResponses[url]) {
return cachedResponses[url];
} else {
return Promise(function(resolve, reject) {
makeAjaxRequest(url, resolve);
});
}
}

22. Behind the Scenes - runMyGenerator
function runMyGenerator(gen) {
let iter = gen();
let yielded;
(function iterate(val) {
yielded = iter.next(val);
if (!yielded.done) {
if ('then' in yielded.value) {
// Wait for the promise to resolve before the next iteration
yielded.value.then(iterate);
} else {
// Next
setTimeout(function() {
iterate(val);
}, 0);
}
}
})();
}

23. Sneak Peak: ES7 Async Functions
async function showFeed(url) {
let data = await request('/feed');
let dom = await feedTemplate.render(data);
document.querySelector('#feed-container').appendChild(dom);
}
showFeed('/feed');

24. Resources
● David Walsh blog by Kyle Simpson
● Understanding ES6 by Nicholas Zakas