Press "Enter" to skip to content

Async iterators (for await … of) in JavaScript

good Monday morning previously we have

looked at iterators and today I would

like to look at synchronous iterators a

synchronous iterators are pretty much

the same as normal iterators the

difference is that they return promises

I am your host MP J and you are washing


today is one of those days where I’m


but in a very good way I’m feeling you

know relaxed I’m feeling okay about it’s

recording a mellow videos like my my

energy level is going to be low but a my

mood it’s going to be high and my voice

is going to be a lot like this it’s

going to be mmm hello I feel a little

bit like a night time radio host hello

Wayne wire why are you calling out this

fine Monday night what’s on your mind

if you are not familiar with promises

this video is going to confuse the hell

out of you

so luckily I’ve made an episode on that

if you’re not familiar with them you can

check it out in the episode description

there’s a link to it also this video

builds a bit on top of the H raters

video so it might be a little bit

confusing if you haven’t watched that

there’s a link to that one in the

episode description as well alright

first I’m going to show you a fake

database that have written for this

episode it’s not very big it has two

tables customers and foods doesn’t hold

a lot of data either each table just has

three rows so let me create a store here

store create store this is all fake and

then I just go store get and which table

cost customer customer one what’s that

that’s a customer his name is John and

then just wait what about customer three

that’s that’s Kim is there a customer is

there a customer for no there isn’t

what’s the favorite foods of Kim food

okay it’s Apple and carrots

what’s the is there fourth row no it’s

undefined what’s the favorite food of

John cakes and waffle let me just

quickly show you the code for the fact

database it’s just it’s great store it

has this constant with a bunch of

fake beta and then there’s a get method

to get like the data from the tables

here it’s just a fake thing alright so

I’m going to write something that uses

iterators abnormal iterators we’re not

going to use a sink iterators quite yet

we are going to create a customer’s

object which is responsible for getting

the customers and gluing them together

with their favorite food so it’s a kind

of like a data access object and here’s

the interesting part we’re going to make

this customers object iterable so that

we can for all our customers


so this iterator is just like the ones

we’ve seen in previous episodes except

that it uses this this fake database

that we’re we’re using so it it has a

customer so it has this customers object

it has this simple iterator property

which is a factory function which will

return another object which is this

iterator and the iterator has a property

called next which is just function that

you can call to get the next customers

it just keeps iterating here until it

doesn’t have any customers like it finds

that the fourth customer always oh it’s

empty and the nutrients done but before

it it’s done returns these these

iteration objects which that had has a

value property which I wasn’t to be the

customer and it also has a done property

which might be whoops which is false if

it’s not done iterating but done when

it’s like at the end of this stuff we

want iterate over which is the customers

nothing here should confuse you if it

does go back and check the first iterate

your video again linked in the episode

description however we are now going

into mordor we are going to use a sync

iterables and that is a feature that is

so new that it’s not in no js’ yet oh my

god that makes me so anxious new things

just makes me like the I feel sharp

pains going down my arm I don’t worry

about it you should you should just

remember what Wayne Gretzky said I skate

where the puck is going to be not where

it’s been hmm I’m suspecting here that

you are going to say that we need bauble

to make this work yes that’s true but

most development teams are using bobble

anyway and many people are watching this

from the future so this might even need

bubble might just work for you but this

is not the future so we are going to

install the NPM it’s unfair install and

this is a really catchy name bobble

transform a sink generator functions and

we also Li need a bubble preset latest

while we’re at it and let’s have a look

inside the package.json

and depending on your development set up

you might detect this to webpack data

plugins we’re using quokka

– that’s a nifty inline evaluation

plugin like you see me using we’re gonna

configure that don’t tell Bob all I’m

gonna use JSON I’m gonna tell it to use

the es 2017 preset and we wanted to use

the plug-in like it myths was an array

and we want this thing here – and now I

should be able to just restart quokka

actually we haven’t actually tried this

that’s for all hang on a for Const

customer all customers customer see what

that gives us all right that works so

iterating over stuff in databases like

this that’s that’s interesting but this

is synchronous and pretty much

everything in JavaScript is a sink so

how can we make this a sink well I

happen to have written and a sink store

I’m just gonna show that to you this is

exactly the same it’s yes that I’ve

added this fake delay here 500

milliseconds delay and then it wraps

that in a promise so it’s it’s

it just and the same thing but delayed

and it’s probably best and the delay is

here like it just it’s a sub promise it

just wraps set timeout in a promise

interface okay let’s go back to the

queued right now by the way this is

stuck in an infinite loop because

nothing is working and can I just

comment that out for a little bit

alright so in order to embark on our a

sync journey we’re going to make our

next function of our iterator and sync

function if you are unfamiliar with the

a sync keyword and the the you need to

familiarize yourself with that as well

otherwise this will all be wah

so there’s actually a video on that in

the episode description as well having

our next function a sync

that’s nice because it allows us to

await these is now a sync methods from

the store and that’s everything we need

to do in order to make our iterable

customers a synchronous now these are

synced raters because an a sync function

always returns a promise so that’s

that’s the interface

oh it’s realizing mike has dropped

that’s professional or me

however while customers are now properly

a sync iterable our for loop here does

not know about like it doesn’t know how

to do a sync iteration however there is

a new thing called a for await that

actually does however we’re not quite

done because you know like doesn’t make

sense to use a wait outside and a

synchronous function like we’re just

like we’re just using it for await

playing to hear and that doesn’t really

make sense we need to do it an a sync

a sync function sorry mobile users but

we need to zoom out a little bit a

little bit for the benefit of some very

precious screen real estate and I’m

going to just do this here and I’m gonna

execute this if he in line evaluated

function something and it executes it

works it works it works

so you see here that even though the

fake store is now synchronous we now

we’re still have able to iterate over

them using the for await keyword and we

get the customers just like we did


what the for await keyword does is it’s

not particularly magical really let me

let me actually just write that out

without the for loop let’s let’s

iterator let’s get this iterator let’s

create an iterator or symbol off the

right door let’s get that out let me

comment count out the for awaiting for a

while and then we have like iterator the

right door nope next it’s gonna give us

a a promise or I like a promise of an

iteration in a see here that it has a

value and a false and with it with the

first customer here as the value so like

Const customer as one and then we just

do a wait make lamp and value it does

does that give us the customer yeah and

then we just do

like this summer three like that gives

us the customer that that is what what

the for awake loop does under the hood

it’s it’s not particularly complicated

well it’s wrong on me to say it’s not

complicated there are a lot of moving

parts here but it’s not super magical or

anything like that oh it’s it’s actually

super magical waste

never mind this is what it does that’s

the for a weight of keyword and and sink

iterators if anything confused you then

that’s good it probably should because

there’s new things so please post that

comment down below and me and a fellow

viewer will surely help you out you have

just watched an episode of fun fun

function I release these every Monday

morning Oh 800 GMT but you will forget

that so you should subscribe so that you

don’t miss it

or what the hell you just watch another

episode right now by clicking there I am

mpj until next Monday morning stay curious

Please follow and like us: