Reiterating JavaScript & Node.js iterators

Reiterating
JavaScript &
Node.js iterators
Luciano Mammino ( )
@loige
loige.link/iter
RomaJS - June 16, 2021
1

View Slide

@loige
loige.link/iter
2

View Slide

How many ways do you
know to "do iteration" in
JavaScript & Node.js?
😰
@loige
3

View Slide

for i / for...in / for...of
@loige
4

View Slide

while / do while
@loige
5

View Slide

Array.forEach / Array.map / Array.flatMap
/ Array.reduce / Array.reduceRight /
Array.filter / Array.find /
Array.findIndex / Array.entries /
Array.values / Array.every / Array.some
@loige
6

View Slide

Object.keys / Object.values /
Object.entries
@loige
7

View Slide

Iterators / Generators
@loige
8

View Slide

Spread operator
[...iterable]
@loige
9

View Slide

Events / Streams
@loige
10

View Slide

Async iterators / Async generators
@loige
11

View Slide

for await...of
@loige
12

View Slide

That was 28 diﬀerent concepts!
😳
@loige
13

View Slide

📝 AGENDA
Iteration protocols... What? Why?
Syntax review
Iteration protocols
Iterator protocol
Iterable protocol
Generator functions
Async iterator protocol
Async iterable protocol
Tips & tricks
@loige
14

View Slide

Let me introduce myself... @loige
15

View Slide

Let me introduce myself...
I'm Luciano (
🍕🍝)
👋
@loige
15

View Slide

I'm Luciano (
🍕🍝)
👋
Senior Architect
@loige
15

View Slide

I'm Luciano (
🍕🍝)
👋
Senior Architect
nodejsdp.link
Co-Author of Node.js Design Patterns
👉
@loige
15

View Slide

I'm Luciano (
🍕🍝)
👋
Senior Architect
nodejsdp.link
Co-Author of Node.js Design Patterns
👉
Connect with me:
(blog)
(twitter)
(twitch)
(github)
loige.co
@loige
loige
lmammino
@loige
15

View Slide

We are business focused
technologists that deliver.
| |
Accelerated Serverless AI as a Service Platform Modernisation
WE ARE HIRING: Do you want to ?
work with us
@loige 16

View Slide

Iteration protocols
what? why?
🤔
@loige
An attempt at standardizing "iteration" behaviors
providing a consistent and interoperable API
Use for...of, for await...of and spread operator.
You can also create lazy iterators
You can also deal with async iteration
You can create your own custom iterators/iterables
17

View Slide

Syntax Review
🧐
@loige
18

View Slide

const judokas = [
'Driulis Gonzalez Morales',
'Ilias Iliadis',
'Tadahiro Nomura',
'Anton Geesink',
'Teddy Riner',
'Ryoko Tani'
]
for (const judoka of judokas) {
console.log(judoka)
}
1
2
3
4
5
6
7
8
9
10
11
12
@loige
for...of
19

View Slide

const judokas = [
'Ilias Iliadis',
'Tadahiro Nomura',
'Anton Geesink',
'Teddy Riner',
'Ryoko Tani'
]
console.log(judoka)
}
1
2
3
4
5
6
7
8
9
10
11
12
const judokas = [
'Ilias Iliadis',
'Tadahiro Nomura',
'Anton Geesink',
'Teddy Riner',
'Ryoko Tani'
]
1
2
3
4
5
6
7
8
9
10
console.log(judoka)
11
}
12
@loige
for...of
Driulis Gonzalez Morales
Ilias Iliadis
Tadahiro Nomura
Anton Geesink
Teddy Riner
Ryoko Tani
OUTPUT
19

View Slide

const judokas = [
'Ilias Iliadis',
'Tadahiro Nomura',
'Anton Geesink',
'Teddy Riner',
'Ryoko Tani'
]
console.log(judoka)
}
1
2
3
4
5
6
7
8
9
10
11
12
const judokas = [
'Ilias Iliadis',
'Tadahiro Nomura',
'Anton Geesink',
'Teddy Riner',
'Ryoko Tani'
]
1
2
3
4
5
6
7
8
9
10
console.log(judoka)
11
}
12
}
const judokas = [
1
2
'Ilias Iliadis',
3
'Tadahiro Nomura',
4
'Anton Geesink',
5
'Teddy Riner',
6
'Ryoko Tani'
7
]
8
9
10
console.log(judoka)
11
12
@loige
for...of
Ilias Iliadis
Tadahiro Nomura
Anton Geesink
Teddy Riner
Ryoko Tani
OUTPUT
19

View Slide

const judokas = [
'Ilias Iliadis',
'Tadahiro Nomura',
'Anton Geesink',
'Teddy Riner',
'Ryoko Tani'
]
console.log(judoka)
}
1
2
3
4
5
6
7
8
9
10
11
12
const judokas = [
'Ilias Iliadis',
'Tadahiro Nomura',
'Anton Geesink',
'Teddy Riner',
'Ryoko Tani'
]
1
2
3
4
5
6
7
8
9
10
console.log(judoka)
11
}
12
}
const judokas = [
1
2
'Ilias Iliadis',
3
'Tadahiro Nomura',
4
'Anton Geesink',
5
'Teddy Riner',
6
'Ryoko Tani'
7
]
8
9
10
console.log(judoka)
11
12
console.log(judoka)
const judokas = [
1
2
'Ilias Iliadis',
3
'Tadahiro Nomura',
4
'Anton Geesink',
5
'Teddy Riner',
6
'Ryoko Tani'
7
]
8
9
10
11
}
12
@loige
for...of
Ilias Iliadis
Tadahiro Nomura
Anton Geesink
Teddy Riner
Ryoko Tani
OUTPUT
19

View Slide

const judokas = [
'Ilias Iliadis',
'Tadahiro Nomura',
'Anton Geesink',
'Teddy Riner',
'Ryoko Tani'
]
console.log(judoka)
}
1
2
3
4
5
6
7
8
9
10
11
12
const judokas = [
'Ilias Iliadis',
'Tadahiro Nomura',
'Anton Geesink',
'Teddy Riner',
'Ryoko Tani'
]
1
2
3
4
5
6
7
8
9
10
console.log(judoka)
11
}
12
}
const judokas = [
1
2
'Ilias Iliadis',
3
'Tadahiro Nomura',
4
'Anton Geesink',
5
'Teddy Riner',
6
'Ryoko Tani'
7
]
8
9
10
console.log(judoka)
11
12
console.log(judoka)
const judokas = [
1
2
'Ilias Iliadis',
3
'Tadahiro Nomura',
4
'Anton Geesink',
5
'Teddy Riner',
6
'Ryoko Tani'
7
]
8
9
10
11
}
12
const judokas = [
'Ilias Iliadis',
'Tadahiro Nomura',
'Anton Geesink',
'Teddy Riner',
'Ryoko Tani'
]
console.log(judoka)
}
1
2
3
4
5
6
7
8
9
10
11
12
@loige
for...of
Ilias Iliadis
Tadahiro Nomura
Anton Geesink
Teddy Riner
Ryoko Tani
OUTPUT
19

View Slide

const judoka = 'Ryoko Tani'
for (const char of judoka) {
console.log(char)
}
1
2
3
4
5
@loige
for...of (with strings)
20

View Slide

const judoka = 'Ryoko Tani'
for (const char of judoka) {
console.log(char)
}
1
2
3
4
5
@loige
for...of (with strings)
R
y
o
k
o
T
a
n
i
OUTPUT
20

View Slide

const medals = new Set([
'gold',
'silver',
'bronze'
])
for (const medal of medals) {
console.log(medal)
}
1
2
3
4
5
6
7
8
9
@loige
for...of (with Set)
21

View Slide

const medals = new Set([
'gold',
'silver',
'bronze'
])
for (const medal of medals) {
console.log(medal)
}
1
2
3
4
5
6
7
8
9
@loige
for...of (with Set)
gold
silver
bronze
OUTPUT
21

View Slide

const medallists = new Map([
['Teddy Riner', 33],
['Driulis Gonzalez Morales', 16],
['Ryoko Tani', 16],
['Ilias Iliadis', 15]
])
for (const [judoka, medals] of medallists) {
console.log(`${judoka} has won ${medals} medals`)
}
1
2
3
4
5
6
7
8
9
10
@loige
for...of (with Map)
22

View Slide

const medallists = new Map([
['Teddy Riner', 33],
['Driulis Gonzalez Morales', 16],
['Ryoko Tani', 16],
['Ilias Iliadis', 15]
])
}
1
2
3
4
5
6
7
8
9
10
@loige
for...of (with Map)
Teddy Riner has won 33 medals
Driulis Gonzalez Morales has won 16 medals
Ryoko Tani has won 16 medals
Ilias Iliadis has won 15 medals
OUTPUT
22

View Slide

const medallists = {
'Teddy Riner': 33,
'Driulis Gonzalez Morales': 16,
'Ryoko Tani': 16,
'Ilias Iliadis': 15
}
for (const [judoka, medals] of Object.entries(medallists))
}
1
2
3
4
5
6
7
8
9
10
@loige
for...of (with object & Object.entries)
23

View Slide

'Teddy Riner': 33,
'Ryoko Tani': 16,
'Ilias Iliadis': 15
}
for (const [judoka, medals] of Object.entries(medallists))
}
1
2
3
4
5
6
7
8
9
10
@loige
for...of (with object & Object.entries)
Teddy Riner has won 33 medals
Driulis Gonzalez Morales has won 16 medals
Ryoko Tani has won 16 medals
Ilias Iliadis has won 15 medals
OUTPUT
23

View Slide

'Teddy Riner': 33,
'Ryoko Tani': 16,
'Ilias Iliadis': 15
}
}
1
2
3
4
5
6
7
8
9
10
@loige
for...of (with object literals)
24

View Slide

'Teddy Riner': 33,
'Ryoko Tani': 16,
'Ilias Iliadis': 15
}
}
1
2
3
4
5
6
7
8
9
10
@loige
for...of (with object literals)
^
TypeError: medallists is not iterable
at Object. (.../05-for-of-object.js:8:32)
ERROR
24

View Slide

const countdown = [3, 2, 1, 0]
// spread into array
const from5to0 = [5, 4, ...countdown]
console.log(from5to0) // [ 5, 4, 3, 2, 1, 0 ]
// spread function arguments
console.log('countdown data:', ...countdown)
// countdown data: 3 2 1 0
1
2
3
4
5
6
7
8
9
@loige
Spread operator
25

View Slide

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
@loige
Spread operator
25

View Slide

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
@loige
Spread operator
25

View Slide

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
@loige
Spread operator
25

View Slide

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
@loige
Spread operator
25

View Slide

import {
DynamoDBClient,
paginateListTables
} from '@aws-sdk/client-dynamodb'
const client = new DynamoDBClient({});
for await (const page of paginateListTables({ client }, {})) {
// page.TableNames is an array of table names
for (const tableName of page.TableNames) {
console.log(tableName)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
@loige
for await...of (async iterable)
26

View Slide

import {
DynamoDBClient,
paginateListTables
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
import {
DynamoDBClient,
paginateListTables
1
2
3
4
5
6
7
8
9
10
11
}
12
}
13
@loige
26

View Slide

import {
DynamoDBClient,
paginateListTables
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
import {
DynamoDBClient,
paginateListTables
1
2
3
4
5
6
7
8
9
10
11
}
12
}
13
import {
1
DynamoDBClient,
2
paginateListTables
3
4
5
6
7
8
9
10
11
}
12
}
13
@loige
26

View Slide

import {
DynamoDBClient,
paginateListTables
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
import {
DynamoDBClient,
paginateListTables
1
2
3
4
5
6
7
8
9
10
11
}
12
}
13
import {
1
DynamoDBClient,
2
paginateListTables
3
4
5
6
7
8
9
10
11
}
12
}
13
}
import {
1
DynamoDBClient,
2
paginateListTables
3
4
5
6
7
8
9
10
11
}
12
13
@loige
26

View Slide

import {
DynamoDBClient,
paginateListTables
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
import {
DynamoDBClient,
paginateListTables
1
2
3
4
5
6
7
8
9
10
11
}
12
}
13
import {
1
DynamoDBClient,
2
paginateListTables
3
4
5
6
7
8
9
10
11
}
12
}
13
}
import {
1
DynamoDBClient,
2
paginateListTables
3
4
5
6
7
8
9
10
11
}
12
13
}
import {
1
DynamoDBClient,
2
paginateListTables
3
4
5
6
7
8
9
10
11
12
}
13
@loige
26

View Slide

import {
DynamoDBClient,
paginateListTables
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
import {
DynamoDBClient,
paginateListTables
1
2
3
4
5
6
7
8
9
10
11
}
12
}
13
import {
1
DynamoDBClient,
2
paginateListTables
3
4
5
6
7
8
9
10
11
}
12
}
13
}
import {
1
DynamoDBClient,
2
paginateListTables
3
4
5
6
7
8
9
10
11
}
12
13
}
import {
1
DynamoDBClient,
2
paginateListTables
3
4
5
6
7
8
9
10
11
12
}
13
import {
DynamoDBClient,
paginateListTables
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
@loige
26

View Slide

Iteration Protocols
😵 💫
@loige
27

View Slide

Iterator protocol
In JavaScript, an object is an iterator if it has a next()
method. Every time you call it, it returns an object with the
keys done (boolean) and value.
@loige
28

View Slide

function createCountdown (start) {
let nextVal = start
return {
next () {
if (nextVal < 0) {
return { done: true }
}
return {
done: false,
value: nextVal--
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@loige
Countdown iterator
29

View Slide

let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
}
1
let nextVal = start
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
14
@loige
Countdown iterator
const countdown = createCountdown(3)
console.log(countdown.next()) // { done: false, value: 3 }
console.log(countdown.next()) // { done: true }
29

View Slide

let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
}
1
let nextVal = start
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
14
let nextVal = start
1
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
}
14
@loige
Countdown iterator
29

View Slide

let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
}
1
let nextVal = start
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
14
let nextVal = start
1
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
}
14
return {
}
1
let nextVal = start
2
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
13
}
14
@loige
Countdown iterator
29

View Slide

let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
}
1
let nextVal = start
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
14
let nextVal = start
1
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
}
14
return {
}
1
let nextVal = start
2
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
13
}
14
next () {
}
1
let nextVal = start
2
return {
3
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
12
}
13
}
14
@loige
Countdown iterator
29

View Slide

let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
}
1
let nextVal = start
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
14
let nextVal = start
1
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
}
14
return {
}
1
let nextVal = start
2
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
13
}
14
next () {
}
1
let nextVal = start
2
return {
3
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
12
}
13
}
14
if (nextVal < 0) {
}
1
let nextVal = start
2
return {
3
next () {
4
5
6
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
}
14
@loige
Countdown iterator
29

View Slide

let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
}
1
let nextVal = start
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
14
let nextVal = start
1
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
}
14
return {
}
1
let nextVal = start
2
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
13
}
14
next () {
}
1
let nextVal = start
2
return {
3
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
12
}
13
}
14
if (nextVal < 0) {
}
1
let nextVal = start
2
return {
3
next () {
4
5
6
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
}
14
return {
done: false,
value: nextVal--
}
1
let nextVal = start
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
8
9
10
11
}
12
}
13
}
14
@loige
Countdown iterator
29

View Slide

let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
}
1
let nextVal = start
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
14
let nextVal = start
1
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
}
14
return {
}
1
let nextVal = start
2
3
next () {
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
13
}
14
next () {
}
1
let nextVal = start
2
return {
3
4
if (nextVal < 0) {
5
6
}
7
return {
8
done: false,
9
value: nextVal--
10
}
11
12
}
13
}
14
if (nextVal < 0) {
}
1
let nextVal = start
2
return {
3
next () {
4
5
6
7
return {
8
done: false,
9
value: nextVal--
10
}
11
}
12
}
13
}
14
return {
done: false,
value: nextVal--
}
1
let nextVal = start
2
return {
3
next () {
4
if (nextVal < 0) {
5
6
}
7
8
9
10
11
}
12
}
13
}
14
let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@loige
Countdown iterator
29

View Slide

Iterable protocol
An object is iterable if it implements the @@iterator*
method, a zero-argument function that returns an iterator.
* Symbol.iterator
@loige
30

View Slide

let nextVal = start
return {
[Symbol.iterator]: () => ({
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@loige
Countdown iterable
31

View Slide

let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
}
1
let nextVal = start
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
}
15
16
@loige
Countdown iterable
for (const value of countdown) {
console.log(value)
}
// 3
// 2
// 1
// 0
31

View Slide

let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
}
1
let nextVal = start
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
}
15
16
let nextVal = start
1
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
}
15
}
16
@loige
Countdown iterable
console.log(value)
}
// 3
// 2
// 1
// 0
31

View Slide

let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
}
1
let nextVal = start
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
}
15
16
let nextVal = start
1
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
}
15
}
16
return {
}
1
let nextVal = start
2
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
15
}
16
@loige
Countdown iterable
console.log(value)
}
// 3
// 2
// 1
// 0
31

View Slide

let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
}
1
let nextVal = start
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
}
15
16
let nextVal = start
1
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
}
15
}
16
return {
}
1
let nextVal = start
2
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
15
}
16
})
1
let nextVal = start
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
14
}
15
}
16
@loige
Countdown iterable
console.log(value)
}
// 3
// 2
// 1
// 0
31

View Slide

let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
}
1
let nextVal = start
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
}
15
16
let nextVal = start
1
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
}
15
}
16
return {
}
1
let nextVal = start
2
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
15
}
16
})
1
let nextVal = start
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
14
}
15
}
16
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
1
let nextVal = start
2
return {
3
4
5
6
7
8
9
10
11
12
13
})
14
}
15
}
16
@loige
Countdown iterable
console.log(value)
}
// 3
// 2
// 1
// 0
31

View Slide

let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
}
1
let nextVal = start
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
}
15
16
let nextVal = start
1
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
}
15
}
16
return {
}
1
let nextVal = start
2
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
})
14
15
}
16
})
1
let nextVal = start
2
return {
3
4
next () {
5
if (nextVal < 0) {
6
7
}
8
return {
9
done: false,
10
value: nextVal--
11
}
12
}
13
14
}
15
}
16
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
1
let nextVal = start
2
return {
3
4
5
6
7
8
9
10
11
12
13
})
14
}
15
}
16
let nextVal = start
return {
next () {
if (nextVal < 0) {
}
return {
done: false,
value: nextVal--
}
}
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@loige
Countdown iterable
console.log(value)
}
// 3
// 2
// 1
// 0
31

View Slide

Can an object be both an
iterator and an iterable?!
🤨
@loige
32

View Slide

const iterableIterator = {
next() {
return { done: false, value: "hello" }
},
[Symbol.iterator]() {
return this
}
}
1
2
3
4
5
6
7
8
@loige
Iterator + Iterable
33

View Slide

next() {
},
return this
}
}
1
2
3
4
5
6
7
8
}
1
next() {
2
3
},
4
5
return this
6
}
7
8
@loige
Iterator + Iterable
iterableIterator.next()
// { done: false, value: "hello" }
for (const value of iterableIterator) {
console.log(value)
}
// hello
// hello
// hello
// ...
33

View Slide

next() {
},
return this
}
}
1
2
3
4
5
6
7
8
}
1
next() {
2
3
},
4
5
return this
6
}
7
8
next() {
},
1
2
3
4
5
return this
6
}
7
}
8
@loige
Iterator + Iterable
console.log(value)
}
// hello
// hello
// hello
// ...
33

View Slide

next() {
},
return this
}
}
1
2
3
4
5
6
7
8
}
1
next() {
2
3
},
4
5
return this
6
}
7
8
next() {
},
1
2
3
4
5
return this
6
}
7
}
8
return this
}
1
next() {
2
3
},
4
5
6
7
}
8
@loige
Iterator + Iterable
console.log(value)
}
// hello
// hello
// hello
// ...
33

View Slide

next() {
},
return this
}
}
1
2
3
4
5
6
7
8
}
1
next() {
2
3
},
4
5
return this
6
}
7
8
next() {
},
1
2
3
4
5
return this
6
}
7
}
8
return this
}
1
next() {
2
3
},
4
5
6
7
}
8
next() {
},
return this
}
}
1
2
3
4
5
6
7
8
@loige
Iterator + Iterable
console.log(value)
}
// hello
// hello
// hello
// ...
33

View Slide

Generators
A generator function "produces" an
object that is both an iterator and an
iterable!
🤯
@loige
34

View Slide

function * createCountdown (start) {
for (let i = start; i >= 0; i--) {
yield i
}
}
1
2
3
4
5
@loige
35

View Slide

yield i
}
}
1
2
3
4
5
}
1
2
yield i
3
}
4
5
@loige
// As iterator
35

View Slide

yield i
}
}
1
2
3
4
5
}
1
2
yield i
3
}
4
5
}
1
2
yield i
3
4
}
5
@loige
// As iterable
console.log(value)
}
// 3
// 2
// 1
// 0
// As iterator
35

View Slide

yield i
}
}
1
2
3
4
5
}
1
2
yield i
3
}
4
5
}
1
2
yield i
3
4
}
5
yield i
1
2
3
}
4
}
5
@loige
// As iterable
console.log(value)
}
// 3
// 2
// 1
// 0
// As iterator
35

View Slide

yield i
}
}
1
2
3
4
5
}
1
2
yield i
3
}
4
5
}
1
2
yield i
3
4
}
5
yield i
1
2
3
}
4
}
5
yield i
}
}
1
2
3
4
5
@loige
// As iterable
console.log(value)
}
// 3
// 2
// 1
// 0
// As iterator
35

View Slide

Well, what about async
iteration?
@loige
36

View Slide

Async Iterator protocol
An object is an async iterator if it has a next() method. Every
time you call it, it returns a promise that resolves to an
object with the keys done (boolean) and value.
@loige
37

View Slide

import { setTimeout } from 'timers/promises'
function createAsyncCountdown (start, delay = 1000) {
let nextVal = start
return {
async next () {
await setTimeout(delay)
if (nextVal < 0) {
}
return { done: false, value: nextVal-- }
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@loige
38

View Slide

let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
@loige
38

View Slide

let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
}
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
14
@loige
const countdown = createAsyncCountdown(3)
console.log(await countdown.next()) // { done: false, value: 3 }
console.log(await countdown.next()) // { done: true }
38

View Slide

let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
}
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
14
let nextVal = start
1
2
3
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
@loige
38

View Slide

let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
}
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
14
let nextVal = start
1
2
3
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
return {
}
1
2
3
let nextVal = start
4
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
13
}
14
@loige
38

View Slide

let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
}
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
14
let nextVal = start
1
2
3
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
return {
}
1
2
3
let nextVal = start
4
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
13
}
14
async next () {
}
1
2
3
let nextVal = start
4
return {
5
6
7
if (nextVal < 0) {
8
9
}
10
11
12
}
13
}
14
@loige
38

View Slide

let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
}
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
14
let nextVal = start
1
2
3
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
return {
}
1
2
3
let nextVal = start
4
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
13
}
14
async next () {
}
1
2
3
let nextVal = start
4
return {
5
6
7
if (nextVal < 0) {
8
9
}
10
11
12
}
13
}
14
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
@loige
38

View Slide

let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
}
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
14
let nextVal = start
1
2
3
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
return {
}
1
2
3
let nextVal = start
4
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
13
}
14
async next () {
}
1
2
3
let nextVal = start
4
return {
5
6
7
if (nextVal < 0) {
8
9
}
10
11
12
}
13
}
14
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
if (nextVal < 0) {
}
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
8
9
10
11
}
12
}
13
}
14
@loige
38

View Slide

let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
}
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
14
let nextVal = start
1
2
3
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
return {
}
1
2
3
let nextVal = start
4
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
13
}
14
async next () {
}
1
2
3
let nextVal = start
4
return {
5
6
7
if (nextVal < 0) {
8
9
}
10
11
12
}
13
}
14
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
if (nextVal < 0) {
8
9
}
10
11
}
12
}
13
}
14
if (nextVal < 0) {
}
1
2
3
let nextVal = start
4
return {
5
async next () {
6
7
8
9
10
11
}
12
}
13
}
14
let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@loige
38

View Slide

@loige
39

View Slide

Async Iterable protocol
An object is an async iterable if it implements the
@@asyncIterator* method, a zero-argument function that
returns an async iterator.
* Symbol.asyncIterator
@loige
40

View Slide

return {
[Symbol.asyncIterator]: function () {
let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@loige
41

View Slide

return {
let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
}
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
17
}
18
@loige
41

View Slide

return {
let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
}
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
17
}
18
return {
1
2
3
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
@loige
for await (const value of countdown) {
console.log(value) // 3 ... 2 ... 1 ... 0
}
41

View Slide

return {
let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
}
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
17
}
18
return {
1
2
3
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
@loige
}
41

View Slide

return {
let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
}
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
17
}
18
return {
1
2
3
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
let nextVal = start
1
2
3
return {
4
5
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
@loige
}
41

View Slide

return {
let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
}
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
17
}
18
return {
1
2
3
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
let nextVal = start
1
2
3
return {
4
5
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
return {
}
1
2
3
return {
4
5
let nextVal = start
6
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
15
}
16
}
17
}
18
@loige
}
41

View Slide

return {
let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
}
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
17
}
18
return {
1
2
3
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
let nextVal = start
1
2
3
return {
4
5
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
return {
}
1
2
3
return {
4
5
let nextVal = start
6
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
15
}
16
}
17
}
18
async next () {
}
1
2
3
return {
4
5
let nextVal = start
6
return {
7
8
9
if (nextVal < 0) {
10
11
}
12
13
14
}
15
}
16
}
17
}
18
@loige
}
41

View Slide

return {
let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
}
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
17
}
18
return {
1
2
3
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
let nextVal = start
1
2
3
return {
4
5
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
return {
}
1
2
3
return {
4
5
let nextVal = start
6
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
15
}
16
}
17
}
18
async next () {
}
1
2
3
return {
4
5
let nextVal = start
6
return {
7
8
9
if (nextVal < 0) {
10
11
}
12
13
14
}
15
}
16
}
17
}
18
if (nextVal < 0) {
}
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
10
11
12
13
}
14
}
15
}
16
}
17
}
18
@loige
}
41

View Slide

return {
let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
}
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
17
}
18
return {
1
2
3
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
let nextVal = start
1
2
3
return {
4
5
6
return {
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
}
15
}
16
}
17
}
18
return {
}
1
2
3
return {
4
5
let nextVal = start
6
7
async next () {
8
9
if (nextVal < 0) {
10
11
}
12
13
}
14
15
}
16
}
17
}
18
async next () {
}
1
2
3
return {
4
5
let nextVal = start
6
return {
7
8
9
if (nextVal < 0) {
10
11
}
12
13
14
}
15
}
16
}
17
}
18
if (nextVal < 0) {
}
1
2
3
return {
4
5
let nextVal = start
6
return {
7
async next () {
8
9
10
11
12
13
}
14
}
15
}
16
}
17
}
18
return {
let nextVal = start
return {
async next () {
if (nextVal < 0) {
}
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@loige
}
41

View Slide

async function * createAsyncCountdown (start, delay = 1000) {
yield i
}
}
1
2
3
4
5
6
7
8
@loige
42

View Slide

yield i
}
}
1
2
3
4
5
6
7
8
}
1
2
3
4
5
yield i
6
}
7
8
@loige
}
42

View Slide

yield i
}
}
1
2
3
4
5
6
7
8
}
1
2
3
4
5
yield i
6
}
7
8
yield i
1
2
3
4
5
6
}
7
}
8
@loige
}
42

View Slide

yield i
}
}
1
2
3
4
5
6
7
8
}
1
2
3
4
5
yield i
6
}
7
8
yield i
1
2
3
4
5
6
}
7
}
8
yield i
}
}
1
2
3
4
5
6
7
8
@loige
}
42

View Slide

@loige
43

View Slide

When to use async iterators
@loige
Sequential iteration pattern
Data arriving in order over time
You need to complete processing the current “chunk”
before you can request the next one
Examples
paginated iteration
consuming tasks from a remote queue
44

View Slide

Tips & pitfalls
☠
@loige
45

View Slide

import { createReadStream } from 'fs'
const sourceStream = createReadStream('bigdata.csv')
let bytes = 0
for await (const chunk of sourceStream) {
bytes += chunk.length
}
console.log(`bigdata.csv: ${bytes} bytes`)
1
2
3
4
5
6
7
8
9
10
@loige
Node.js readable streams are async iterators
46

View Slide

let bytes = 0
}
1
2
3
4
5
6
7
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
@loige
46

View Slide

let bytes = 0
}
1
2
3
4
5
6
7
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
@loige
46

View Slide

let bytes = 0
}
1
2
3
4
5
6
7
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
let bytes = 0
1
2
3
4
5
6
7
}
8
9
10
@loige
46

View Slide

let bytes = 0
}
1
2
3
4
5
6
7
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
let bytes = 0
1
2
3
4
5
6
7
}
8
9
10
}
1
2
3
4
let bytes = 0
5
6
7
8
9
10
@loige
46

View Slide

let bytes = 0
}
1
2
3
4
5
6
7
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
let bytes = 0
1
2
3
4
5
6
7
}
8
9
10
}
1
2
3
4
let bytes = 0
5
6
7
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
@loige
46

View Slide

let bytes = 0
}
1
2
3
4
5
6
7
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
let bytes = 0
1
2
3
4
5
6
7
}
8
9
10
}
1
2
3
4
let bytes = 0
5
6
7
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10 console.log(`bigdata.csv: ${bytes} bytes`)
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
@loige
46

View Slide

let bytes = 0
}
1
2
3
4
5
6
7
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
let bytes = 0
1
2
3
4
5
6
7
}
8
9
10
}
1
2
3
4
let bytes = 0
5
6
7
8
9
10
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10 console.log(`bigdata.csv: ${bytes} bytes`)
1
2
3
4
let bytes = 0
5
6
7
}
8
9
10
let bytes = 0
}
1
2
3
4
5
6
7
8
9
10
@loige
46

View Slide

What about
backpressure?
😩
@loige
47

View Slide

import { once } from 'events'
const destStream = new SlowTransform()
const canContinue = destStream.write(chunk)
if (!canContinue) {
// backpressure, now we stop and we need to wait for drain
await once(destStream, 'drain')
// ok now it's safe to resume writing
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@loige
48

View Slide

if (!canContinue) {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
@loige
48

View Slide

if (!canContinue) {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
@loige
48

View Slide

if (!canContinue) {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
@loige
48

View Slide

if (!canContinue) {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
}
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
14
@loige
48

View Slide

if (!canContinue) {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
}
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
@loige
48

View Slide

if (!canContinue) {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
}
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
if (!canContinue) {
}
1
2
3
4
5
6
7
8
9
10
11
12
13
}
14
@loige
48

View Slide

if (!canContinue) {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
}
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
if (!canContinue) {
}
1
2
3
4
5
6
7
8
9
10
11
12
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
@loige
48

View Slide

if (!canContinue) {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
}
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
if (!canContinue) {
}
1
2
3
4
5
6
7
8
9
10
11
12
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
@loige
48

View Slide

if (!canContinue) {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
}
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
if (!canContinue) {
}
1
2
3
4
5
6
7
8
9
10
11
12
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
1
2
3
4
5
6
7
8
if (!canContinue) {
9
10
11
12
}
13
}
14
if (!canContinue) {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@loige
48

View Slide

But if you are dealing with streaming
pipelines it's probably easier to use
.
pipeline()
@loige
49

View Slide

import { pipeline } from 'stream/promises'
import { createReadStream, createWriteStream } from 'fs'
import { createBrotliCompress } from 'zlib'
const compress = createBrotliCompress()
const destStream = createWriteStream('bigdata.csv.br')
await pipeline(
sourceStream,
compress,
destStream
)
1
2
3
4
5
6
7
8
9
10
11
12
13
@loige
50

View Slide

await pipeline(
sourceStream,
compress,
destStream
)
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
await pipeline(
9
sourceStream,
10
compress,
11
destStream
12
)
13
@loige
50

View Slide

await pipeline(
sourceStream,
compress,
destStream
)
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
await pipeline(
9
sourceStream,
10
compress,
11
destStream
12
)
13
1
2
3
4
5
6
7
8
await pipeline(
9
sourceStream,
10
compress,
11
destStream
12
)
13
@loige
50

View Slide

await pipeline(
sourceStream,
compress,
destStream
)
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
await pipeline(
9
sourceStream,
10
compress,
11
destStream
12
)
13
1
2
3
4
5
6
7
8
await pipeline(
9
sourceStream,
10
compress,
11
destStream
12
)
13
1
2
3
4
5
6
7
8
await pipeline(
9
sourceStream,
10
compress,
11
destStream
12
)
13
@loige
50

View Slide

await pipeline(
sourceStream,
compress,
destStream
)
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
await pipeline(
9
sourceStream,
10
compress,
11
destStream
12
)
13
1
2
3
4
5
6
7
8
await pipeline(
9
sourceStream,
10
compress,
11
destStream
12
)
13
1
2
3
4
5
6
7
8
await pipeline(
9
sourceStream,
10
compress,
11
destStream
12
)
13
await pipeline(
sourceStream,
compress,
destStream
)
1
2
3
4
5
6
7
8
9
10
11
12
13
@loige
50

View Slide

await pipeline(
sourceStream,
compress,
destStream
)
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
await pipeline(
9
sourceStream,
10
compress,
11
destStream
12
)
13
1
2
3
4
5
6
7
8
await pipeline(
9
sourceStream,
10
compress,
11
destStream
12
)
13
1
2
3
4
5
6
7
8
await pipeline(
9
sourceStream,
10
compress,
11
destStream
12
)
13
await pipeline(
sourceStream,
compress,
destStream
)
1
2
3
4
5
6
7
8
9
10
11
12
13
await pipeline(
sourceStream,
compress,
destStream
)
1
2
3
4
5
6
7
8
9
10
11
12
13
@loige
50

View Slide

In Node.js we can convert any Event
Emitter to an Async Iterator!
😱
@loige
51

View Slide

import { on } from 'events'
import glob from 'glob' // from npm
const matcher = glob('**/*.js')
for await (const [filePath] of on(matcher, 'match')) {
console.log(filePath)
}
1
2
3
4
5
6
7
8
@loige
52

View Slide

}
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
}
8
@loige
52

View Slide

}
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
}
8
1
2
3
4
5
6
7
}
8
@loige
52

View Slide

}
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
}
8
1
2
3
4
5
6
7
}
8
1
2
3
4
5
6
7
}
8
@loige
52

View Slide

}
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
}
8
1
2
3
4
5
6
7
}
8
1
2
3
4
5
6
7
}
8
}
1
2
3
4
5
6
7
8
@loige
52

View Slide

}
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
}
8
1
2
3
4
5
6
7
}
8
1
2
3
4
5
6
7
}
8
}
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
}
8
@loige
52

View Slide

}
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
}
8
1
2
3
4
5
6
7
}
8
1
2
3
4
5
6
7
}
8
}
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
}
8
}
1
2
3
4
5
6
7
8
@loige
52

View Slide

}
//
⚠
DANGER, DANGER (high voltage
⚡
): We'll never get here!
console.log('ALL DONE! :)')
1
2
3
4
5
6
7
8
9
10
11
@loige
53

View Slide

}
//
⚠
⚡
1
2
3
4
5
6
7
8
9
10
11
//
⚠
⚡
1
2
3
4
5
6
7
}
8
9
10
11
@loige
53

View Slide

}
//
⚠
⚡
1
2
3
4
5
6
7
8
9
10
11
//
⚠
⚡
1
2
3
4
5
6
7
}
8
9
10
11
}
//
⚠
⚡
1
2
3
4
5
6
7
8
9
10
11
@loige
53

View Slide

import glob from 'glob'
const ac = new global.AbortController()
matcher.once('end', () => ac.abort())
try {
for await (const [filePath] of on(matcher, 'match', { signal: ac.signal })) {
console.log(`./${filePath}`)
}
} catch (err) {
if (!ac.signal.aborted) {
console.error(err)
process.exit(1)
}
// we ignore the AbortError
}
console.log('NOW WE GETTING HERE! :)') // YAY!
😻
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@loige
54

View Slide

try {
}
} catch (err) {
console.error(err)
process.exit(1)
}
}
😻
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
@loige
54

View Slide

try {
}
} catch (err) {
console.error(err)
process.exit(1)
}
}
😻
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
@loige
54

View Slide

try {
}
} catch (err) {
console.error(err)
process.exit(1)
}
}
😻
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
try {
} catch (err) {
1
2
3
4
5
6
7
8
9
10
11
}
12
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
@loige
54

View Slide

try {
}
} catch (err) {
console.error(err)
process.exit(1)
}
}
😻
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
try {
} catch (err) {
1
2
3
4
5
6
7
8
9
10
11
}
12
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
console.error(err)
process.exit(1)
}
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
15
16
17
18
}
19
20
😻
21
@loige
54

View Slide

try {
}
} catch (err) {
console.error(err)
process.exit(1)
}
}
😻
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
try {
} catch (err) {
1
2
3
4
5
6
7
8
9
10
11
}
12
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
console.error(err)
process.exit(1)
}
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
15
16
17
18
}
19
20
😻
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
@loige
54

View Slide

try {
}
} catch (err) {
console.error(err)
process.exit(1)
}
}
😻
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
try {
} catch (err) {
1
2
3
4
5
6
7
8
9
10
11
}
12
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
console.error(err)
process.exit(1)
}
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
15
16
17
18
}
19
20
😻
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21 console.log('NOW WE GETTING HERE! :)') // YAY!
😻
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
21
@loige
54

View Slide

try {
}
} catch (err) {
console.error(err)
process.exit(1)
}
}
😻
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
try {
} catch (err) {
1
2
3
4
5
6
7
8
9
10
11
}
12
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21
console.error(err)
process.exit(1)
}
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
15
16
17
18
}
19
20
😻
21
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
😻
21 console.log('NOW WE GETTING HERE! :)') // YAY!
😻
1
2
3
4
5
6
7
8
try {
9
10
11
}
12
} catch (err) {
13
14
console.error(err)
15
process.exit(1)
16
}
17
18
}
19
20
21
try {
}
} catch (err) {
console.error(err)
process.exit(1)
}
}
😻
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@loige
54

View Slide

NOTE:
If you know ahead of time how many
events you need to process you can
also use a break in the for...await loop.
@loige
55

View Slide

LAST TIP:
Can we use async iterators to handle
web requests a-la-Deno?
🦕
@loige
56

View Slide

import { createServer } from 'http'
const server = createServer()
server.listen(8000)
for await (const [req, res] of on(server, 'request')) {
res.end('hello dear friend')
}
1
2
3
4
5
6
7
8
9
@loige
57

View Slide

server.listen(8000)
}
1
2
3
4
5
6
7
8
9
1
2
3
4
server.listen(8000)
5
6
7
8
}
9
@loige
57

View Slide

server.listen(8000)
}
1
2
3
4
5
6
7
8
9
1
2
3
4
server.listen(8000)
5
6
7
8
}
9
server.listen(8000)
1
2
3
4
5
6
7
8
}
9
@loige
57

View Slide

server.listen(8000)
}
1
2
3
4
5
6
7
8
9
1
2
3
4
server.listen(8000)
5
6
7
8
}
9
server.listen(8000)
1
2
3
4
5
6
7
8
}
9
}
1
2
3
4
server.listen(8000)
5
6
7
8
9
@loige
57

View Slide

server.listen(8000)
}
1
2
3
4
5
6
7
8
9
1
2
3
4
server.listen(8000)
5
6
7
8
}
9
server.listen(8000)
1
2
3
4
5
6
7
8
}
9
}
1
2
3
4
server.listen(8000)
5
6
7
8
9
1
2
3
4
server.listen(8000)
5
6
7
8
}
9
@loige
57

View Slide

server.listen(8000)
}
1
2
3
4
5
6
7
8
9
1
2
3
4
server.listen(8000)
5
6
7
8
}
9
server.listen(8000)
1
2
3
4
5
6
7
8
}
9
}
1
2
3
4
server.listen(8000)
5
6
7
8
9
1
2
3
4
server.listen(8000)
5
6
7
8
}
9
server.listen(8000)
}
1
2
3
4
5
6
7
8
9
@loige
57

View Slide

EASY PEASY LEMON SQUEEZY!
🍋
But... wait, aren't we processing all
requests in series, now?
😱
@loige
58

View Slide

server.listen(8000)
// ... AS LONG AS WE DON'T USE await HERE, WE ARE FINE!
}
1
2
3
4
5
6
7
8
9
@loige
59

View Slide

server.listen(8000)
}
1
2
3
4
5
6
7
8
9
1
2
3
4
server.listen(8000)
5
6
7
8
}
9
@loige
59

View Slide

server.listen(8000)
await setTimeout(1000)
}
1
2
3
4
5
6
7
8
9
10
11
@loige
60

View Slide

server.listen(8000)
}
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
server.listen(8000)
6
7
8
9
10
}
11
@loige
60

View Slide

server.listen(8000)
}
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
server.listen(8000)
6
7
8
9
10
}
11
1
2
3
4
5
server.listen(8000)
6
7
8
9
10
}
11
@loige
60

View Slide

server.listen(8000)
}
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
server.listen(8000)
6
7
8
9
10
}
11
1
2
3
4
5
server.listen(8000)
6
7
8
9
10
}
11
server.listen(8000)
}
1
2
3
4
5
6
7
8
9
10
11
@loige
60

View Slide

@loige
61

View Slide

Let's stick to the basics...
😅
@loige
62

View Slide

const server = createServer(async function (req, res) {
})
server.listen(8000)
1
2
3
4
5
6
7
8
9
@loige
63

View Slide

})
server.listen(8000)
1
2
3
4
5
6
7
8
9
})
1
2
3
4
5
6
7
8
server.listen(8000)
9
@loige
63

View Slide

})
server.listen(8000)
1
2
3
4
5
6
7
8
9
})
1
2
3
4
5
6
7
8
server.listen(8000)
9
})
server.listen(8000)
1
2
3
4
5
6
7
8
9
@loige
63

View Slide

@loige
64

View Slide

Conclusion
🤓 @loige
Iterable protocols are a way to standardize iteration in JavaScript and Node.js
Async iterators are ergonomic tools for sequential asynchronous iteration
But don't use them for everything!
Consuming data from paginated APIs or reading messages from a queue
are good examples!
Handling web requests or events from an emitter might not be the best
use cases!
65

View Slide

Want to learn more?
@loige
- possibly a great book
😇
- In-depth article on all things iterators
- Finding a lost song with Node.js &
async iterators
nodejsdesignpatterns.com
nodejsdesignpatterns.com/blog/javascript-async-
iterators/
loige.link/async-it
66

View Slide

If you enjoyed this talk, you
might also enjoy
😛
nodejsdp.link
@loige
Let's connect:
(blog)
(twitter)
(twitch)
(github)
loige.co
@loige
loige
lmammino
loige.link/iter
67

View Slide

Reiterating JavaScript & Node.js iterators

Reiterating JavaScript & Node.js iterators

Luciano Mammino

More Decks by Luciano Mammino

Other Decks in Technology

Featured

Transcript