The document discusses JavaScript generators, which are functions that can pause mid-execution and resume later. Generators allow functions to behave like iterators by yielding values. Generators can be used as iterators to produce data incrementally, as observers to cooperatively multitask asynchronous tasks, and as coroutines to pause execution and resume it later. Async/await is similar to generators but uses promises instead of yield expressions to pause execution.

1. www.luxoft.com
Generators Flexibility in Modern Code
Andrii Orlov

2. www.luxoft.com
ES6 introduced a new way of working with
functions and iterators in the form of Generators
(or generator functions).
A generator is a function that can stop
midway and then continue from where it
stopped.
In short, a generator appears to be a function
but it behaves like an iterator.
What is a generator?

3. www.luxoft.com
Simple generator function
function* gen() {
yield 1
yield 2
yield 3
return 4
}
const generator = gen()
generator.next() // {value: 1, done: false}
generator.next() // {value: 2, done: false}
generator.next() // {value: 3, done: false}
generator.next() // {value: 4, done: true}
generator.next() // {value: undefined, done: true}

4. www.luxoft.com
Function !== Function*

5. www.luxoft.com
ITERATORS
(data producers)
OBSERVERS
(data consumers)
COROUTINES
(data producers
and consumers)
For-of loops,
spread operator
Observer pattern Cooperatively
multitasked tasks
Roles generators can play

6. www.luxoft.com
What is an iterator?
interface iteratorResult {
done: boolean,
value: any
}
Iterator is a way to pull data from a data structure on one-at-a-time fashion, it needs to
implement the iterator interface (which has three methods - next(), return() and
throw()).
An iteratorResult that returns from the iterator next() method needs to follow this
interface:
So each time we call next() on an iterator we should get {value: the current
iteration value, done: false/true}

7. www.luxoft.com
Generator as iterator
function* gen() {
yield 1
yield 2
yield 3
return 4
}
const generator = gen()
for(let value of generator) {
console.log(value); // 1, 2, 3
}
const spreadValues = […generator] // [1, 2, 3]

8. www.luxoft.com
Generator as observer
function createObserver(iterator) {
return {
next(value) { iterator.next(value) },
error(err) { iterator.throw(err) },
complete() { iterator.return() }
}
}
function* observerGenerator() {
try {
while(true) {
let value = yield
console.log(`next -> ${value}`)
}
} catch (err) {
console.log('error')
}
console.log('completed')
}
function observable(observer) {
for(let i = 0; i <= 10; i++) {
observer.next(i)
}
observer.error()
observer.complete()
}
observable(
createObserver(
observerGenerator()
)
)
Observer Observable

9. www.luxoft.com
Generators as coroutines. “CO” library
import co from 'co'
const fetchJSON = co.wrap(function* (url) {
try {
let request = yield fetch(url)
let text = yield request.text()
return JSON.parse(text)
}
catch (error) {
console.log(`ERROR: ${error.stack}`)
}
})

10. www.luxoft.com
Generator + Promise = Async/await ???

11. www.luxoft.com
Async/await vs generators
async function fetchJSON(url) {
try {
let request = await fetch(url)
let text = await request.text()
return JSON.parse(text)
}
catch (error) {
console.log(`ERROR: ${error.stack}`)
}
}
import co from 'co'
const fetchJSON = co.wrap(function* (url) {
try {
let request = yield fetch(url)
let text = yield request.text()
return JSON.parse(text)
}
catch (error) {
console.log(`ERROR: ${error.stack}`)
}
})
Async/await Generators

12. www.luxoft.com
Thank you!