Press "Enter" to skip to content

Iterators in JavaScript using Quokka

good morning today we’re going to talk

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


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


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


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


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


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

Please follow and like us: