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
function
today is one of those days where I’m
tired
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
[Music]
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
before
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