about iterators in JavaScript iterators
is what the for-loop uses under the hood
to iterate over an array but the for of
loop is actually capable of iterating
over anything sets or maps or your own
custom objects as long as they provide
an iterator for the for of loop to use I
am mpj news or watching function
[Music]
if you are a regular viewer of this show
you might be impressed by my sexy voice
that is because i am i have a cold well
I don’t think it’s a cold actually I
pretty sure it’s sinusitis and I’ve been
having it more or less since this falter
I’ve been having a this fall and this
winter’s my longest bout of being sick
ever and I’m really sick of it so if you
have any tips on dealing with sinusitis
please post them down below I would
really like to know them ah let’s cheer
ourselves up with some JavaScript Aang
why should I care about iterators why
are they in JavaScript we’re going to
explore why it’s good to understand
iterators iterate whores but let’s first
spend a little time exploring what they
are so that we you know get a sense of
what we’re dealing with alright so we
have an array of dragons there are
strings it’s a cool dragon it’s an angry
dragon and then we have this new concept
that you might or might have not seen or
reflected over and it’s c4 oh I would
like to draw your attention to these off
key word it’s not each and it’s not
anything else it’s of that’s important
it’s not in its all that’s crucial by
the way if you’re new to this show it’s
about me looking at like eight lines of
code and then talking about it for our
50 minutes
welcome to the show it’s hilarious so
this is a loop you’ve seen them before
it goes through the Dragons array and
for each dragon it’s going to do things
inside of this block here let me start
quokka so that we can see what this does
my god can’t spell Wacha startled
current file closing this okay cool let
me write drag awesome so you see here
that on the first iteration it’s going
cool rag and then angry dragon the nest
dried kwaka is this great little plugin
that allows you to in-line evaluate
javascript like this it’s super
convenient you probably see me use this
before i use it a lot in comprehension
videos because i think it’s a great tool
however this particular episode is
graciously sponsored by quokka so was
thanks to quark for support in this show
we’re gonna show it off a little bit
extra maybe look at it ah a few extra
features that cool but you don’t see me
normally use in the show if you want to
check it out go to quokka dot fan fan
function comm that link is also in the
episode description okay so how does
this actually work I mean does the for
loop know how to iterate erase no that’s
the great thing for or doesn’t know
anything about erase it has no idea what
an array is the only reason why the for
loop is able to iterate over an array is
because the array provides an iterator
that tells the for of loop how to
iterate it all right so let’s imagine
that we are the four of loop for a
little bit and and like how how is it
that we are accessing this iterator
we’re how do we get it from the array
let’s have a look this is how works
inside this is how the for op loop gets
the iterator from the array it calls see
similar iterator method on dragons it
calls that and that gives it an iterator
well this makes me feel uncomfortable
what like what is this this is this this
is scary because it’s new I don’t like
new things we should divide new things
I’m going to get a cup of coffee yeah if
you haven’t seen symbols before this is
going to look a little bit weird symbols
is not a new programming language
feature they’re very common in other
programming languages you can think of
them as basically unique keys we use
them where we would normally have use
like a weird unique string to avoid
conflict yes that is why symbols are
great if if we didn’t have symbols here
then JavaScript designers would probably
have to invent you know something like
some weird unique string like iterator
yes so that that shouldn’t be in
conflict with add the other like
interface on along on objects however
with this this is completely unique so
we can be completely sure that this
doesn’t exist on on anything else
so if you can actually show you what
this evaluates to let me show you like
that it’s symbol so this is not not some
weird string or anything it’s actually a
completely unique object that you can
use as a as a key year or property on on
objects and this means we can never have
naming conflicts on properties really
handy alright so this is how we get the
iterator but how does the iterator
itself behave
the iterator is expected to have a next
method on it now as you see here if I
have iterator here coca will evaluate it
for me but if I type next here it
it won’t evaluate what the return value
is but there is a cool little feature
called live comments and you saw me use
a couple of seconds ago and I’m gonna
show you show it again you go – – and
question mark you could do that or you
could have done that as well either way
it that makes it evaluate this
expression and display it in line but so
look at what this object looks like so
it gives us an object it’s an object
simple Oh big that has one property
called value and that contains cool
dragon that’s this one the first item
and then it has one other property call
named down which is a boolean stop
jumping help like Mouse passe is having
a life of its own today no idea what I
have a ghost in my computer ok so here
like that’s that’s false in itself I
find this a little bit hard to wrap my
head around so I’m just gonna copy this
and call it er a turn next a couple of
more time is to wrap my head around it
okay so we see here that on the first
call the cool is returns cool dragon and
then turns angry dragon still look down
it says nasty dragon still not done and
then on the final wall it returns the
value is undefined but it is done okay
okay so the way the iterator interface
works is that we just call next until we
like we’re out of items so you can say
that what we did here manually calling
next is what the for of loop
does inside of itself you know under the
hood so what do you see here this is
what the iterator interface in it looks
like it’s it’s an object that array
spits out that you can use to write it
tells tells the outside world how to
iterate itself all right that’s the what
but what about the why let’s go back to
the why why this extra interface why all
this stuff why not just have a like for
each loop that can loop over erase the
reason why it’s an interface is so that
we can iterate over anything with it for
all loop so for instance we could you
know for a construe char of dragons
first dragon and then what is this char
is you see that oh wow
now we can iterate over the individual
characters here and this is because the
string object in JavaScript provides an
iterator for the for of loop to use all
right there’s a bunch of other built-in
objects in JavaScript that provides this
assets and maps and stuff and the Dom
node list can do it as well but the cool
is saying is that we can make our own
custom objects iterable like for the for
all bloop could make them our own
objects for over ball of a ball let me
show you how to do that let’s get rid of
this or code we don’t care about that
I’m going to write some code it doesn’t
have anything to do with a draft at all
it’s not gonna use iterators this is
just gonna be plain code
[Music]
ah I’m trying to use an NPM module but
that MB module is not installed ha quark
to the rescue I can just go Oquawka
install missing package only for quokka
file Oh generate some nice random
numbers for us here excellent
why always mpj going with this it seems
to work now I want to create a new
function called the mix dragon do you do
so as you see here I’ve created a
function called make dragon that creates
a random dragon string it’s tiny fire
dragon sometimes it’s a tiny like dragon
or it’s a tiny ice dragon or it’s a
medium ice dragon or it’s a blue big big
lightning dragon but the random item
function here it seems to me are like a
good candidate from an extraction it’s
mostly it’s not related to the problem
at hand here it we can understand from
its name what it does feels like we
could move it out to another file to
keep it from distracting us because
we’re Apple very little screen real
estate here yeah you see here that I’m
getting a error here cannot find module
random number even though we previously
used Quokka to install for current file
and you might remember that I use quokka
to install only on the current file so
when we’re acquiring like this this
won’t work but we can actually use
Quokka to help worker a install missing
package into project III does and then
it’s screen so you see you’re like well
it installed it into the Pakistan JSON
dependencies very handy cool things
still seem to work after ax our
extraction I can close the sidebar and
like a clubs random item you know what
I am in an extracting mood let’s get
make dragon out of here as well
[Music]
nice still works extract ahead by the
way being able to require in project
files like this that’s a quokka pro
feature NPM modules that’s a free
feature you can use them any way you
like but require multiple files and
projects that’s a true feature
by the way Coker will not only monitor
this file it also monitor the the
external file and they actually show if
I open up the make dragon here open to
the side and like go into this and I go
add a time ability and I save that will
actually update it figure out that this
is dependent on that and then updates it
raters fun live focus really really good
at making sure that you always have that
immediate feedback okay let’s finally
implement that iterator that I was
talking about I’m going to create a
dragon army objects which just provides
an iterator which just provides a bunch
of dragons and then randomly ends
because you know that’s that’s dragon
always for you they’re fickle you don’t
[Music]
and there we go
so this is the actual implementation of
an iterator this is equivalent to the
array bitrate er that we saw before it’s
just that we created this one ourselves
so it’s a dragon or me this is not an
iterator itself but it provides a like
an iterator Factory here so this is this
is a property here like that uses a
symbol iterator as its name and then it
provides this function here which is
supposed to according to the interface
to return an object which contains a
single property that is a function
called the single property call next
which is a function and that function
will return an object which has a value
which is like the iterated value and
then it provides a boolean that says
whether or not we’re done iterating or
not whether the iteration has ended so
as you see here we get like a tiny time
drag and a tiny lightning dragon medium
lightning dragon and the way this works
is that it checks if enough dragons has
been spawned which is just a random
thing and if not enough dragons has been
spawned it returns an object and calls
make dragon as its value otherwise it
just returns an object without value
we’re done is true and that tells the
for of loop that we’re out of Ragan’s so
you see if I just press space here
triggering a koala to reevaluate to see
that or sometimes it’s just one
sometimes it’s two sometimes it’s
zero actually sometimes it’s a lot of
them well you get it so as you can see
here you can play around quite a bit
with an iterator it doesn’t an iterator
doesn’t have to conform to this idea or
like that an array or a set there where
there’s a limited amount of items that
you you iterate over it can just be this
the thing that generates things randomly
for instance like this one you can
basically create your own iterable
collections that behave any way you
goddamn please and we are actually just
scratching the surface here because
iterators can also be a synchronous what
which could allow us to have iterators
that gradually fetch data from an API
for instance on each loop pretty cool
you might also have heard or seen
generators in JavaScript and here’s a
cool part generators is actually just a
thin syntactic sugar over what we have
been doing here today you heard that
right
generators is just a syntactic sugar to
generates crates iterators so iterators
there this very simple building block
but they have huge implications if
you’re interested in knowing more about
you know a sink iteration and and
generators we might make some episodes
on that too because they all that would
be really cool let me know in the
comments if you’re interested but that
is iterators if something about this
video confused you that’s great it means
you’re learning ask any question you
have down below or on the Fun Fun forum
if your patron I or one of your fellow
viewers will try to answer your question
thank you so much to pakka for
supporting the show if you’re interested
in trying quokka you should go to walker
dot fun fun function dot call that link
is also in the episode description the
basic version of coca is free our pro
version is just 50 bucks I think but you
should never pay for your own
software tooling your employer will
almost always pay for your software
tooling if you ask them because you as a
software engineer is very expensive so
anything that makes you even slightly
more productive will be massively
economically beneficial to them to buy
again polka dot pan-pan function comm
check it out
you have just watched an episode of fun
fun function and release these every
Monday morning o 800 DM d if you are
forgetful you can subscribe here so that
you don’t miss it or watch another
episode right now by clicking here I am npj until next Monday morning thank you