Iterators in JavaScript using Quokka.js

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 [Music] [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 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 when executed let it up 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 [Music] 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 know how many dragons are gonna show up [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

Channel: Fun Fun Function

Views: 94,709

Rating: 4.8593469 out of 5

Keywords: programming, coding, javascript, computer science, software engineering, software, functional programming

Id: W4brAobC2Hc

Length: 21min 7sec (1267 seconds)

Published: Mon Apr 16 2018