JavaScript the Hard Parts: Closures, Scope, and Execution Context

here we go closure here it is folk this feel free people have throw-in your questions as we go don't get answering questions of each others too much in the chat because normally the answer is just coming up these workshops have been given a hundred times and so they tend to give the answers at some point by design you're not going to get them immediately okay so here we go closure I think people the most esoteric the most obscure concept in JavaScript the one that when I gave this talk at lunchtime talked to the New York Times engineering team half of the senior developers in Java did not get not as closure but the thing that it depends on which I'm going to tell you is how do we return a function from another function and they didn't get it they didn't know it by the end they did they didn't when they came in and that should give you great confidence that even if you find tonight hard you're in the leagues of some of the hardest engineering in JavaScript we've got to try and make sense of it professional level functions we're gonna see that if you get closure you get some of the a most interviewed on questions like hey I build me once build me memoization which is one of the most popular interview questions at Google for the jobs for engineering teams of course we also interview on it's code for code Smith because we want you to come in at that high level when you get into code Smith but it's also a day-to-day really useful set of functions memorization is a whole technique in programming that you ask most developers they're using it if they're following best practices at least once a week and maybe once a day as developers the module pattern I'm working on my hard part's node J s which currently is a blank sheet of paper and a series of slides that I did when I was making you all on Monday listen to my node talk I have got a piece on the module design of node and what do you know it all rests on tonight's concept I couldn't believe it I knew module part and restaurant I didn't realize I guess the nodes modularity if any of you have worked with nodejs you know how you put in some you require stuff in it it all rests on tonight's concept this is the dominant concept in JavaScript we get it you become very powerful JavaScript overs in fact as a guy who's not on tonight could you Eunice Youssef u7e who comes the hard parts came to a lot last year kona how to get hired never went to code smith everyone applied whatever just told me yesterday he got a mid-level job only a bit below the codes but average by just attending the free talks and he said to closure one was the one that gave him the edge that's not me you know you know whatever okay I'm pretty disappointed in applied a coat Smith I'm just happy that this is some stuff that you need to move your job interviews all right let's move on I'm not gonna show the underlying principles of JavaScript here tonight we're gonna get it as we go as many of you I think have been to hard parts before all I will say is that take a quick look at this code here yeah I'm not gonna diagram this piece out but what I'll say is as we run this code so you're gonna store num is three store x 2 as a function cool x two of the input of Nam which is 3 so run mile bumper to label to 3 and then later run more power to number 10 and I'm gonna walk through this code line by line for once because I think most people have seen is before we're gonna walk through JavaScript code on the next slide don't worry but this is the absolute fundamentals but I want to cool one thing to your attention notice that when I run x to my 10 when I run x to with the input of Nam which is 3 the output store in say it's presumably would be so an output would be 6 the output of running it with 10 would be 20 stored in you output note that there is no connection between those two functions being run when I run x 2 the first time here but a 3 and then I run it again with able of 10 the input of 3 is absolutely forgotten the next time I run the function we're gonna see in a moment that means that when that function is run inside of it we get a little store of data well the three is stored inside a multi to the ten is stored inside the running mode number two when they do that there's no connection we do not remember the three no no no no no we do not remember the three when we then run multiply by two again we wouldn't want to we're running it first with three get the output six and move on we run over ten get the output twenty move on we do not remember anything inside our functions between their Runnings if I run more proper to a limit of three no memory of the input of three or the output of six next time I run it with ten brand-new brand new data that's all I'm gonna hold for now we're gonna see more of that I'm not going to diagram that out we're gonna discover well here it says here when our functions get run normally we create a live store of data inside of them we'll see that in a second don't worry which there is a local memory well we'll season we fancy name soon for that function running when the function finishes running it's local data that means a data that's stored just for running the function so I run mode by by two with the input of three three is stored inside a multiply by two before I multiply it by two and return at six that data when the function finishes running the three is deleted the only thing that's held on two is the returned out six input a three return out six the six gets held onto only because it gets returned out and stored outside in output he's the most powerful thing we could do in JavaScript it would change everything about how we run and write code and that would be if we could imagine functions that yes when they finish running delete all the stuff inside of them besides what return that gets returned out we don't want to keep the three because next time I run multiple by two I don't care that I run it was three before no I wouldn't run over ten I don't care about the three before who cares I don't hold on to that so I got the six and I'm done and now we're over ten but there are a ton of times where if I were if I were to be able to hold on to some data in between the running of my functions so I could run x two with the input of three return out six then run it again with unit of ten return out 20 but hold on to some data some informations and stored values as they say in between the runnings it would change everything about how I wrote my code my applications would be transformed and that's what we're gonna do but what I say here but what if our functions can hold on to live data they call it state the live data stored and applicate in our function between their runnings between what is this emoji oh my god this would let our functions have a persistently I want to give it a different name much you know what I'm going to call it a permanent memory a permanent store of data attached to them so when I run x too many times it would have new data but also permanent data attached to it and folk this would change how we write code for example we might be able to limit our function to only run once first and we run it we hold on to a value saying ah you've already run me and we save that and the next time around the function we check that and now we are not allowed to run the function again because the function remembers stuff from the previous time it's wrong you will remember things from previous times was run you'll be like in West world where I'm was Restless even season 2 will read it I gave up but you'll be like your West world they're meant to reset phones are meant to be reset West world cars are meant to be stateless they're meant to not persist State and Michael why do i amusing yourself are you gonna provide some fan that 30 seasons here yeah alright a question would you say it's deleting the Earth's losing the state is it is it just dropping the reference and picking up a new reference or is it literally removing it from memory it's literally an automatically deleting so they're already collecting it's they calling garbage collecting magically deleting all the data side the function Mike loses not to diagram this at this point but you'll see it in a second we're going to see it in this next block here it all starts folks with us returning running a function and rather than returning a number rather than it outputting an array rather than outputting an object outputting 8 another function let's see an action here it is functions can be returned from other functions in JavaScript it stewpot what we're gonna see let's just diagram this house we've got this pretty function here create function we're gonna save it there it is saved we're then actually gonna give it a second label I'm going to show you why in a second then we're gonna run create function and whatever comes out of it's going to be sorting sorting generated funk we're then gonna add parens to the end of generated funk all the hell's going on here ha do not fear let's start diagramming out of people I want to see this diagram doubt line by line and let me know anybody who can't see this : the left-hand corner is very important otherwise I just take a screenshot of it it's what it's showing for your cells okay hopefully you can see that left hand side there alright from here we go so some regulars I'm going to start off with all of you because you know how to talk through this code and new friends try and pick up how it all through the code we're just gonna talk through it as JavaScript runs it jobs or does two things when it runs code goes through the code does whatever it says to do line by line hello sound nice to see you and it's store stuff in memory that means it stores data as it goes for example in this first line we're storing a function we're storing it in memories not being whenever you see the reference to create function later on do not think that Java scripts going back up the page to find it no we're literally gonna grab this whole functions code and store it store it over here in memory to be used later on as JavaScript when we write code to use it so here we go but starting off starting off with line one dewayne as a regular my friend what are we doing there in the very first line of code there in its we are declaring a function called create function excellent and in terms of my memory Duane what's that doing that is going to create a functional level execution context create a fusion context when we execute all yes I'm sorry you are you are creating that in global memory AHA we're storing it I might even know why my even so just for a second and it might be useful to show look at this I'm literally taking that functions code oh look how small it will go that's nice oh right you need to do that and I'm storing it there under the label create function look at that that's what I just did in line one that's what jobs have just did people the first time I realized that ah I had no idea I thought the functions were just kind of sitting there and in our text that we wrote no when jobs which sees the keyword function and it goes what's this mean it says store this function code for later that's really important and by the way when we store a function it has two parts it has its name and then totally separate it has its stored code that's gonna be really important that might mean by the way we could have potentially multiple labels multiple names for the same function code well let's see next line Nathan what's our next line of code line one was storing the whole crate function definition in memory which is just a password for our store of data and functions Nathan what's our next line of code it's pretty hard one we're gonna create a constant called second label in global memory and it'll be assigned the function definition of create function oh what incredible incredible precise technical communication people are gonna appreciate how precise that was it will be assigned the function definition not the label that's the label that's a function definition when you declare a function so this function translator I should have said store its label and store its definition those are two different things meaning we can give it a second label which is exactly what we did here and no people we did not go in the side of create function because we did not run create function we just saved it so second label is now we've now got one label for create function and we have a second label for the code of crave function meaning if I wanted to run create functions definition his code I could actually run it by doing this second label and it would actually go and look second label and it would run the code of the function formerly known as create function or additionally known as great function we have two labels for the same function code so we saved the function and its label in one go in the first block and then we save a new label for the same function code in the second line of code okay so that's right I'm only showing you the second label we're not gonna use that function by this label the second per second a but we're not going to use it by that label I'd want to show you that you can have I want to make it clear there's two parts to a function being stored its label and its definition its code meaning well we'll see we'll see okay excellent thank you to Nathan let's up David washi let's have YC y C can you help me out with the third line of code if you just start me off while you see with the left hand side there just the left hand side what's the left hand side Tina do their YC come on shift a YC I said um so we create another variable general Fung to that one second option yeah what looks good no it sounds good sounds close generated funk is it uncle them variables i understand how we called labels variables in general but it is literally a label that is now fixed to refer to one thing it can't change it so it's not a variable variables where you can change what you've stored associated the label this is a constant where you can no longer change what you stored does that make sense YC okay excellent all right so we've declared the label generated funk but what their head are we gonna store on the right hand side what are we gonna store here that's not like a question mark you try that again what are we gonna store oh I want to make it really big that's fine what are we gonna store on the right hand side here what I don't know well who thinks what you do a pole oh I might do a pole let me go on an untold for it so a pole I had a question on ER that's not oh no I've got to go to Chrome to add a question that doesn't seem like a smart move okay change of mind in my no poles no balls no poles no poles all right what do we think is stored in generators fun raise your hand if you think it's create function hmmm I didn't do my voice 1 up we're gonna use cream function yonas thank you my friend you're so wrong but thank you for getting involved I know you're gonna find the answer very exciting Eunice who thinks it's the command to run create function ah that seems reasonable wrong wrong thank you all for your contributions yonas having you now feeling good company booth who thinks it's the output of running create function and until we get that output is actually nothing stored in generated funk is uninitialized kevin says yes amy hello he magic come on videos as you can show up well she knew that Thank You Tate Nathan says yes let's see who else who else raise their hand Carly says yes alright Michael says yes oh hi Sydney I've seen you all I've seen your multiple applications hello and it looks like you agree with this so yes folk is exactly right sorry Senor your mute is exactly right I listen really good how do plants are named properly I don't get it wrong to need your spot-on so this is what actually happens we do not store anything in generated funk in fact we don't store anything in generated funk until we've headed off to run create function and see what its output is and that's what gets stored in generated funk so this is already important stuff that may seem like earth who cares and I remember now I just believe it matters so much because I've seen too many codes that grads have this level of understanding of JavaScript that gives him an unfair advantage the react becomes easy my node talk I'm worried is I know if you get hard parts you already need the node talk it's just JavaScript so let's see let's map this out this is what actually happens so we declare generator funk exactly as YC said and we're going to have to run to execute create function in order to figure out what its output is and stored that and to generated func now here's the question how do I spot David in Jersey David how do I spot when I run create function what keyword am I looking for that will be the indicator of what the output of create function will be David come on shave day David on a Mac ctrl shift day on Windows ah go ahead David how do I spot what keyword tells me what the output of my function will be David I think Dave is on mute I'm fortunately your new man either but I'm gonna tell you folks well actually maybe I'll call on Sam Sam go ahead man what keyword tell us what the output of my functions gonna be the output great function gonna be here I'm sorry your question is what is the output of the what keyword is gonna indicate always will be output of my functions what's gonna come out the bottom of that parentheses oh it's often the right answer what key word is gonna tell me what the output of my function is oh the return return well done Sam good job man so we've got to go and then actually run create function people oh we're gonna be there in a second don't worry we're gonna run create function because we're gonna have it returned as its output something very mysterious and the return doubt thing is gonna have a super power a super power on which more of our JavaScript code than ever is going to depend on this understanding all right so let's run create function whenever we run a function people we need to create almost like a mini app to run it here it is it's called an execution context that's what I'm doing here I'm executing create function and it needs two things to run it needs a little mini memory of all the stuff that gets created while we're inside and then we're gonna go through its code line by line this is known as the thread which is just a posh way of saying we're gonna go through the code of this function line by line so I did there's gonna go through that code line by line whatever it says to do it's gonna do it if it says install something it's gonna store it in the local memory not in the global memory because we're inside the function okay so let's do that first thing it says to store Kevin an SD what's the first thing if you can jump on but it says for us to store as we go in to create function what if I got my mute on no Kevin you're also not getting any noise Nathan I know turn to you Nathan come you want to try and take out your mic Nathan what's the first thing I'm going to store inside crate function the function sorry x 2 and assigned the function definition of x 2 there it is yeah excellent well done Kevin no not Kevin Mason sorry man ok that function has been stored people that is the whole function here and then here is its label and that's the label stored okay so two parts or no function its label and its rest of its code what are we gonna do with that function who should I call on SHINee I'm calling on you SHINee what are we gonna do Kumar what are we gonna do with that function are we gonna run it are we gonna run x 2 inside a create function or are we gonna do something else take it away SHINee what we gonna do we're gonna passing an argument that's my guess but I might be a super-wrong not far off but what are we gonna do Michael in New York I know we're not gonna run it I imagine we're gonna hold on to it and then returning and it gets rounded some I don't know we saved it and when you evoke in later emanuelle you just jumped on with your video who suggests a confident disposition do you want to jump on a manual and give us the answer what's gonna happen in this line we're gonna sort on the memory the generic memory we gonna do with it folk in this line here so we've saved x 2 we're inside a create function that's what we are right now we're inside the running of create function we save x 2 as a function inside of it we're not gonna what are we gonna do this we're gonna return it it's gonna get stored in generate function ah good job for everybody who contributed to that collective effort for well done Michael would say in the final piece we're gonna return not eat here's what javascript does it sees the line return x - there it is he's more points return more probably - it goes what's that it go so look for it and it sees its this function definition here the code of x - and it's going to grab it and it's gonna return out into the label generated funk and there it is you return out our function into the label generating funky was previously known as what Michael it was previously known as my bye - bye bye - is not gonna be known as anymore because we only returned out its definition not its label it said return we used its label to find its definition we then returned out his code its definition not his label so we better give it a new label Michael what is his new label generated funk generated font fantastic while I'm Michael I'm keeping them color-coordinated this is the same function we didn't copy and you just returned out and gave it a brand new label there it is generated funk okay and now we exit its execution context we're done with it and we head out where we hit what line Kevin in San Diego if you want to jump on we hit line out here what is the lines here to do we're going to declare a variable was or declare a label result a label a constant result which is equal to the output of the invoked function generated funk with what was generated funds old named Kevin generated funks old name was x - x - who feels that i promised you a lot of you feel the generated funk somehow has something to do with create function somehow generated funk some are generated funk has generated from equals create funk create function it doesn't say that it says generated funk equals go run the create function and see what it equals what did it equal whether equals whatever came out the bottom of create function how do you know it comes at the bottom create function we run it and we see what gets returned what gets returned and it says to return the whole function definition of x to return out and store it in generated func generated func has nothing to do with create function after that line it was a one-time running of create function run me once and see what I returned and it returned x too but without his name just not a label it returned the function and that got stored over here as generated funk and the weird thing about JavaScript is it when you declare a label generated func you can then put a function in it and then run that function by that label by just putting friends on the end very strange but you're absolutely allowed to do that and that's exactly what we do in the next line but we declare result and then we say put parens on the end of generated func and what is generated font let's have a look ah it's the functionality formerly known as mod probably two so we create what's known as an execution context which is just like a mini app to run the function and we use the code that was formerly known as x - to run it and into it we go and vote here's where it gets weird we technically had to look back up the code to where it's inside create function where x 2 was saved but wait so remember mod Phi 2 was written JavaScript does not do that in this line that's what I hate about the online version in no not that line in this line y was highlighted we literally grabbed the whole code of x 2 from inside of create function when it was running returned it out and stored it in generated funk in fact I'm going to show that by look at this I'm gonna take this here I'm gonna copy it I'm going to put it over here so we really realize look at that generated funk is just multiplied by two but without the label anymore now it's called generated funk so when we run generated funk we need to go and look at this code over here and see what's the input that we're expecting what's the parameter the placeholder the name that we're expecting to fill in with something Nicole in la-la-land Nicole do you know what we're gonna we're gonna pass in three we're sure of that what's his label gonna be Nicole we're gonna pass in three to the generated function correct what's the label is Abel gonna be SHINee it's result spot-on it's gonna be numb nice work by Nicole and SHINee founder both it's gonna be numb generated funk is really what everybody type it in right now what is generated fun really sucks generated fun what is generated it's multiplied by two nice SHINee thank you for not going by what I just said which was piped in but don't worry we're correct so it's very nice Michael I wouldn't say it's return none by two it's I see where you're going it's the funk I would write these people the function that was formerly known as x to the function definition formally given the label of of x - oh I can't take that we don't I mean good job sound the function definition of x - I like that yes exactly excellent Sam Sam can you put your city up so everyone as I said yeah but I want to take thank you for changing your name details very confused from over budget a via but I'll be the Cu teh excellent alright so that means we go into that function and it says num will be filled in with three so there's num and three and then return nom by three which is no not by 3 by 2 which is 3 by 2 6 and we return it out in two results well done to shinny officer for saying that as well and there it is result is 6 oh my goodness the only thing you might be wondering is among other things is why the hell did we declare x to inside of another function running then return out give it a really useless name generated func only to run it out there anyway why do we not just define a function x 2 in global memory why their hell would we define it inside of the running another function only had to return out and then use it outside of where is born anyway why it's gonna come out people it's gonna give our returned out function the little baby function was born inside when it gets returned out its gonna have a crazy superpower that dominates JavaScript and anybody who's just answered my obviously rhetorical question what are you doing man these are not directly answering Michael it's an interesting perspective yet alright people so let's have thumbs on this you lost me more time so I declared a function I say create function will ignore the second line don't worry about we didn't use it was just make a point so we say a function create function we then declared a label generated punk which is going to have stored in it associated with it assigned to it whatever comes out of running create function not create function itself because of what symbols Sam in Irvine this time you've broken our saw right Sam what symbols tell me this is why ask everyone to vote oh yeah the only way to be we says sober people supporting their code Smith community when they're in the broader community and supporting each other the only way to do it online is to stay 100% focused no watching to see what other games will be finished no washing to see what the consequence of a to no defeat to Tottenham by Chelsea was no watching the see the Suarez scored two goals of Barcelona in the Copa del Rey no watching no instead no watching to see that Liverpool won five nail with to buy money to buy by van bought by Van Dyke no watching no you'll focus on hard parts on which no Sam Sam what was a question I forgot the question oh yes am Sam why do I need why do I know that I have to go run create function and store its results in generated fun run create function so as a result in generated func not stole create function in generated fun why Sam Sam I literally gave you like 20 seconds of me repeating the question so you can unmute yourself hey well I I couldn't hear you for some reason all right so that's right again Sam why Sam do I know that I am storing the output of generator create function in generated func so Sam I'm looking at this line here why do I know I'm storing the output of create function in generated func not Gen not create function itself what symbols tell me I've got to go run create function find his output and stored that in generated func the parentheses no parentheses thank goodness good job Sam let's go through very quickly no breaks this time and then we need to understand it and closure becomes easy get this down close as easy we still create ask a question or I don't know how this works put in a label we in the car give me a second we declared a label generated funk we then ran create function to see what we then ran create function I'm gonna do a brightly colored highlighter here we ran create function store this result in generated func well what is this result call we had to go and run create function it's said to save x two and then not run it but return it out into generated funk and there it was formerly known as x 2 the function stored now in generated funk and we then used it by its new label his new global label generated funk and we run it with the input of 3 that's what we did here passed in 3 is its input that means we're passing 3 into the function formerly known as x 2 part in 3 return out 6 and there it went into results all right people let's have thumbs you lost me and it's tough people I'm clear I have clarifications and well sums I am an e well says she's clear Tay says she's clear shinny a Michael YC hmm folk through your clarifications English that we don't get this this may seem disconnected but if we get this down closer follows so easily but if we don't get this town it doesn't all right people ok no clarifications let's move their hell on wait wait wait I have a question Nicole you have your thumbs up yeah but I I just if you can go back that other slide real quick ok let's just go sorry first sorry ok thank sorry go ahead so I'll just unmute myself to talk so um one thing that I was confused on is when we're doing the second label um when you're doing create function is there like are we doing anything with that second label at all sorry thank you for asking us hopefully everybody know that was just for me to show you that when we don't put friends on the end of who do not put parenthesis on the end of create function we just take the whole of create function and give it another label but that's not what we're interested in or we're interested in is running create function with parens run it returning out the inner function multiplied by two and storing it in generated funk does that make sense Hara yeah but and one more question with that though when you do if you if I were to call create I mean second label and then put a number inside of that like say the same way that I'm doing generated funk can I also do like second label and then put a parentheses inside will be running if I run so if I run this tomorrow what what am i running what function am i running when I run second label this makes sense because not running anything because it's just a function definition well I'll be running what function do create function create function yeah a function so where would I be passing in my three Sahara into the number ometer so it would actually just be ignored okay create x two doesn't get dynamically run by create function when you run create function you're gonna save x to you I'm gonna use it so if you run if you run second label you're really just running create function so you're passing in a three to create function which has no space to receive inputs anyway yeah Michael is right we pretend if he do what he's describing there but it would he's saying I'm create function it returns out x to and then run that x to deliver three but we wouldn't get any of the special powers we want Michael so I mean we probably wouldn't do that Nicole go ahead with your question that answered my question everything I was just curious like what was the difference and then now it's very well explained thank you Google I'm gonna go all right here we go beyond now we get to our final and most important code I say fine we decide when we do one more piece depending on time but most important here here it is this here folk is gonna reveal why we want to return a function from another function at all and we're gonna discover it ain't gonna work at first until we learn another major thing in JavaScript and then it's all gonna come together here we go let's code here gonna save a function by the way I love writing in white on black it's not a kind of guy it's pretty very cool look there we go so we gonna save a function outer I'm gonna run it there I'll be was saving it then we're running it here whatever returns out by the looks of it it's gonna return out this increment counter function into my new function that sounds familiar right my new function is going to now be a new label for the function formerly known as increment counter we're then gonna run my new function and we're on write twice that's gonna run this code here I can already feel there might be some issues that sir let's play it out let's play it out people oh let's grab the code let's grab the code there it is we're going to grab the code down here somewhere there it is all right folks here we go go get some my twin snakes don't get me wrong people only me Ron I've probably advocated for things before that have not the Kali global phenomenon phenomena but there are two things I've been a strong advocate for for a long time and I say this with a grain of salt of the awareness of the ridiculousness of ridiculousness of me saying this but Osuna has been my personal hero two and a half know by now maybe three and a half four years this guy's my personal hero his music is the most beautiful idiot he was the most played musician singer pop star whatever on YouTube in 2018 more than daddy yankee more than I know quaver more than me ghosts more than anybody else or sooner the other thing I've been advocating for a long time are these beautiful creatures and now every single saw you go into they have these magnificent creatures I highly recommend them everybody knows the blue and red ones are the best and I have one right now hey you have one that is sour and one that is sweet exactly I'm with you doesn't that sound amazing all right here we go I can see the Wayans really engaged with my twin snakes red party you don't it did not know about there's no interest in my twins name it's spelled with a Z Michael but almost all they are good so lime one Ginny you're doing great is your first Hall Pass ever knock really it's probably my second well you doing really nicely so what are we doing here's your knee in line one of that code line why we're declaring a function for maybe it's a function expression sorry I don't know that definitions fine function definition that's called outer we're giving a label alger that takes no arguments and withing it where goes that function returns another function scolding you never go inside of the function you never do any job doesn't care about it until it gets what it gets cold or invoke we calling it here huh we calling it in line one are we calling lines away me are we calling it in line one why not no we're not we're not Chinni is a pay me back for my mispronunciation of her name by misunderstanding Irish accents they different no problem Gini all is forgiven now even and so we declare out and we save it in our global that means it's available everywhere memory there it is all right line two Who am I gonna call on Sahara go ahead Zahra what are we doing in the next line so in the next one we're just declaring a new constant my new function what on Zahra we've got a me there a me do you have a Mike I'm gonna call on Amy in a moment if she has a Mike otherwise for now I'm gonna call it Emmanuelle in New York the money well we've declared my new function there it is on the left hand side water money world is the right hand side tell us to do and to render function outer excellent so in the meantime we're gonna have my new function beat uninitialized it's got nothing stored in it because we've got to go and get the result of running out earth so we've got to create a new what's known as execution context there it is with a little local memory oh you know what people I have a nice pretty execution context but I've got pre-made that will make my work much cleaner and I said well where is it there it is they really look at that that's a lot cleaner isn't it that's a lot nicer let's just put this there you go alright so we're running out ur and into it we go and what's the first thing it says to do Dewayne you're up man and then Amy Amy hopefully you're there if you if you're not there people by the way oh please put in your name if you don't have a mic so I don't call on you otherwise everybody gets the joy of sitting for 10 seconds which feels like a long time online without you responding so if you don't have a mic please put it in your name otherwise I will call on you and everybody suffers Dwayne go ahead what's the first thing we tend to do inside about called counter you call these variables Dwayne okay called counter and we are setting the value of zero beautiful so let people as a way of announcing a label where you can change out what you store in it whenever you want so they couldn't variables but they can very first the contras way of declaring a label for something that you're not going to have to change later on it's constant it's fixed all right next line Kevin in San Diego so we have a function declaration of increment counter beautiful there it is stored I'm gonna color it in so we can recognize it and anytime there it is alright and now say me still not said she's got no mic so I feel I can call on her Amy you there and here Amy I'm and also call you on the hardest bit so Amy here we are what's this final line of code here what does JavaScript do sort of talk it out to me bit by bit what is doing in this final line returning from encounter it's going to return out the output of the function outer well that's correct but by definition is inside outer and so whatever it's gonna so what is it going to return out so it says return out something what's it saying to return out well encounter but let's be a bit more precise it says return our encounter and it goes what's increment counter it looks in memory and sees that it's this function the code of increment counter so I guess it's yeah it's er it's let me just highlight it it's white it's this bit here that's what's going to be returned out so let's go ahead and do that let's return that definition out into Amy what global where's the output of out are going to be stored Amy into what global label my new function won't spawn Amy thank you so much there it is so the functionality that was formerly known as increment counter is now known as my new function and we exit out of this execution context Excel from Amy thanks so much and now we hit the all-important line my new function being executed before we do that for I want to add something else to the mix of what goes into JavaScript it's called the call stack and it's pretty it's a bit complicated but all it really is is Java scripts way of keeping track behind the scenes of where am i right now in terms of my code am i inside of outer am I out here in the main file of code am i right where's they call it the thread of execution and I do it in green so it starts out here it goes it sort of weaves its way down and then it goes into outer and then when it finishes in outer it comes back out and then it goes into my new function and then comes back out there goes into my new function again and comes back out so it's way what line of code is being done at any given moment and when I finish on that line or finishing that function where do I go back to and when I finish in a function I delete all of its local memory obviously today so I went into this function went through its code came out while I was inside the cool stack actually tracked so I start off in something called global so I'm always in global that's the main fallout of codes I'm gonna show that we're always in global this whole thing is global that's pretty ugly sorry so that's always on this whole stack so a stack is a way of storing information in the computer where its main purpose is the stall of things where all you care about is what's on the top like a stack of plates you can't remove a random plate I guess it could but in theory you can't you'd only take the top one off but when you do add one on top and then take it off again what was there before should still be there well though that's quite a good way of modeling these execution contexts that means the running of functions when I'm start off in global that's on the bottom that means I'm running the main file of code there it is when I finish with a mate when I fit when I enter a function when I run a function like outer when I run a function like outer I'm gonna add it folk to the top of my call stack the wall I'm inside of outer outer be on top of my call stack and like a stack of plates that's all I really care about the top I'm not doing anything in global I'm only an outer when I've finished in it and we hit return and exit out you might go well Java doesn't know where to go isn't no it doesn't know to go back to global and continue running it does not know to go back and continue running this code here it doesn't know that don't panic it figures it out because when it finishes running outer it pops it it removes it from the call stack and goes where do I go back to don't panic whatever is top of the call stack then it knows where to go back to and it continues writing the code in global global just means the overall file of all the code so when it goes into a function when it runs a function it goes inside of it and it keeps track of the factors inside of it by putting that they call it pushing it to the top of the stack all functions being cooled the cool the car stack and when it finishes running that function it says oh remove that where do I go back to whatever was left below which in this case was global which takes us back out to global so stats are a good way of you could you would model a Russian nested doll as a stack because it's all we care about as a top thing we take it off and what was there before better still be there well that's what this is cool stack very funny very good very did you is that that's very funny good job Michael I appreciate this excellent people do not be confused by Michael it's a car CA ll a cool as we said in the call stack meaning it's a pile all functions being cooled and the top one is on being cold being run right now finishing it you go back to where you were before which is what we're doing here and how we go to hit the running the cooling the execution of what function my new function and we're almost there people we're gonna run my new function here it goes let's call on volume here valla Damir be there does he have a mic yes nobleman how do you pronounce your name correctly okay ah the response every person looks for when they miss pross name bottom a so we hit the running of my new function we are going to create a execution context for it and do what to our cool stack what Amir what is the question what we do here what are we gonna do that stack hold cools as we run my new function what are we gonna do that cool stack so we run in mind you function in manual we're running my new function thank you for all the managers wanna grab me a manual on this one we're running mining function Emmanuel what's that mean we're really running what function are we really running Emmanuel good job Lumiere the money we want to get away what forms are you really running umm the definition of increment counter the definition god I love that precision excellent money well exactly thank you to volunteer as well good answer and so we go into it we create an execution context Nathan we're running my new function so we better put it on top of the gothic whole stack well done into it we go we're running my new function within global folk we are not running my new function inside or Powter outer is dead dead and buried we are running it in global we grab the definition from inside about having to encounter and we ripped it out and stored it in my new function and that's what we're running right now increment counter definition by its new name as Emmanuel rightly said my new function let's get running it what's the first line of code of it says to do a manual what's the first line of code when we run my new function that it says to do well it says to increment counter but wait like I don't understand where we define declare it Oh many well this is fast-moving thinking excellent well where would we look I'm gonna use not gree I use use green but I use that for my thread I'm gonna use pink for my lookup journey that JavaScript does where does it always look first to many well first there where is it always looked first when I run a function and I'm looking with something inside of it where do I was at first by money my new function Sam's right Sam says I look in the local memory right immanuel so I'm running my new function I was look for something in his local memory first did I define it there and yards from Annie well is no correct I did not define this was not in my local memory so it's not in my new function where would he send up next Emmanuel that sounds right to me is it there no no it's not outer it's not my new function there anything to be saved in Global's it's not there damn always in that order finis yeah always local out I feel pretty depressed now because we've got through all of this it's not even working huh it's a shame I don't want tree by the way we'll use as a chance while we feel frustrated and sad you know some people aren't sheep Sam please can you stop pre-empting stop live tweeting this event I appreciate it Sam all right huh I'm puzzled shame it's going to be a really good talk now we have a counter yeah so depressed Sam shinu dost fini no I'm muting using your needs I do alright so I'm very sad I'm very very sad by the way so codes myth is all about the actual outcomes it strongly outcomes but unfortunately the ridiculous legislation that comes out however we have to give out diplomas or Diplo's me nothing the outcomes as well people you know these extraordinary leadership that comes with grads take on is what cannot damn diploma but now in order to have a diploma we have to have no hole to make sure nobody imitates added 401 what's one of these I need one of these right now no problem it is yeah yeah you want one you want one yeah right now dick ulis licensure they don't understand what actually matters waste of my time anyway I think I'd probably break all sorts of rules by complaining about that no you don't nevermind so what a frustrating situation wonderful showing situation whatever strange situation okay yes Nicole is getting impatient what is going on I agree Nicole I mean broadly what is going on why am i complaining about pieces of paper that I think is a very very fair question but also what is going on with this here what's going on here's what happens people I'm not gonna drag it out I'm not gonna drag it out here folk is what happens it's pretty damn cool so it turns out that when I ran out ER an ER it's turned out into my new function increment counter and I'm now running increment counter by its new name my new function and running my new functions of community and coming character which is got this counter plus plus in and yet I can't go back and outer no no no no no no as memories gone as Emanuel said I can't go back up into outer I looked in my new function there's no counter there I looked in boy wasn't gonna there so where is counter it turned out that when I returned out when I returned out increment counter into my new function I brought more than just the function definition I brought all of the surrounding local memory attached on to the function I pulled out the function and I brought with it attached on on the back of the function kind of on the back as a function came out I brought with it all the surrounding memory there it is attached on to the function literally not counter is set to be zero or a sign counter to zero but literally stored in memory counter is zero I call it the backpack let's just draw a little backpack because it's on the back of the function as it comes out as a function comes out it grabs her data and brings out on its back and stores it in the new global label my new function so yeah Emmanuelle was so right first I look in my new functions local memory when I run it but before I go out to global and then find that there's no counter there I first sort of insert myself in the way between my new function and global and I look into that backpack of data and what do I find there counter is zero what do I do to it I increment it so one there it is and then I guess I exit out of my new function and there'd be anything in local memory it would have been deleted let's run my new function one more time and see what happens so we go back out to global we're no longer running the first running of mining function we delete it from the call stack we go back up to global because that's where we're running mining function from and we hit our final running of my new function there it is or our second running of my new function we create oh we've got to create a brand new I should make you all sayers together because it's my favorite thing you're right hidden running my new function we create a brand new you Dwayne the rest of you should be more like Dwayne he's a hero among people look at that I didn't say traditional phrase ma cliff oh hey it was already taped dude ja cliff there it is and we run my new function again let's see people what happens when we run my new function again well firstly imagine what happens on my call stack when I run my new function I'm gonna mute you I trust him only well but I promise don't eat me don't worry in my anyway go ahead for miles I've been over twice three times I mean the third time you might be well go ahead you get main menu function on the top of the call stack Thank You Manuel and we enter its execution context and what's the first line it says to do there are many well and it's yeah X takes counter yeah it's increments can't come to sorry you just i'm emanuele you talk me through where do we look first always where do we look first for counter yeah where do we look for it first time anywhere no memory you find it and do we find counter in local memory oh no sorry we do not nothing in local memory do we look to global next or into the global names global labels next no where do we look and in the function definition of main menu function it's not a different issue that's running definition has attached to it a backpack of data and that data that backpack is where we look we'll get the prompt the posh neighbor backpack in a moment but we look into that backpack where what do we find in manual counter is one counter is 1 and we increment it to tier 2 - wow people we now have access in our function attached to our function definition too data that is permanent there's attached as Emanuel rightly said to our very function definition itself let me make sure this is not imply that it's out there in global we increment one so - there it is in our backpack of data attached to the function my new function our function my new function now has a memory we could use that counter we could say ah you don't allow to run my new function more than two times so go check in the backpack how many times is being run it goes up counter goes up by one each time and if it's over to return out from my function sorry you can't run me again you've already Romney once our function gets a backpack of live data a permanent memory and people is gonna change how we write code we're gonna see how in a moment but first let's talk a bit about this back package the most important concept in JavaScript so you might think it's in global the data counter looks like it's in global no we cannot access it in global we can't go counter in global I can't refer to couch what I hope to look into global and find it no no no no no no it's not actually in global at all I mean it sort of in global its bond or not protected inside mine inside my new function as a label so the wire disagree with you manual that counters in my new functions definition it's that is this my new function is now what two parts its definition and we attached the appended the the appendage of the backpack of data it's those two parts together there and a little plus sign between them it's a function plus you know so didn't live data and you might think what maybe we can do this maybe we can write my new function dot counter nope maybe you can do my new function dot backpack dock counter no maybe even do I know well maybe once we learn the proper neighbor backpack we could refer to it by that no we cannot get access to that backpack Aditi it's only available by running my new function running its code and inside referring to something's not in local memory and then off we wander to the backpack and that's what we can use that data from so we have to make sure that we wrote increment counter correctly so that when it gets returned out it makes reference it has a reference it refers to something that's what counters doing here it asks for something it was looking for something that's not in his local memory and has to go out to its backpack but if we do that people we've given at function 8 permanent memory this memory gets deleted every time which is pretty rough because we want to be able to have data that's stored in between Runnings of functions it's going to turn out to be absolutely vital people in JavaScript for our functions we have a permanent memory it's gonna change it completely Harry right code no longer do we have to hold data in global memory for it to be permanent and we don't like using global memory like putting a label in global memory like results all your team wants to overwrite that with their own results so instead where do you put data you want to hold on to forever but you don't want to pollute the global memory with the names with labels or other people going to want to use don't worry you put it in functions backpacks it's permanent there's a functions permanent but the data is protected from others accessing it well that also means folk is I'm going to talk about a lot more things how is a backpack stored and what are the posh names you can use for the backpack that will get you those miss senior developer jobs I'm not even joking Google's number one question to ask about as I said is about this concept and if you use a too posh names are going to give you for it I think they're going to invite I think they're gonna lay out the red carpet I think they're gonna say you mom are what we've been waiting for we look we waited we heard rumors of an engineer like you who one day would apply we heard rumors we heard myths we thought they were legends and now we see that you are real indeed we're gonna learn those two names that will give you that sort of edge in just a second but first a couple of things about this backpack hold on hold on one thing I should because I think someone asked a question about I want to see people ask a question I don't give us the name of it and how it's created so when we saved increment function hold on when we ran out er went inside of it saved counter saved increment counter immediately on saving increment counter we immediately made a link under the hood to the surrounding local memory through a hidden property on increment counter hidden money for scenes of JavaScript here it is I'm gonna write out a hidden property which was now you do a very small our hidden property at which attached the local memory to increment counter the function definition that was just saved in memory we had it had a hidden property on it square bracket square bracket scope square bracket square bracket you can't do increment counter dot squares where it's forever you can't do that because is a hidden property built into jobs or under the hood that's how it's linked it links to the local memory and then when we've returned our increment counter into a return our increment counter into my new function that is when we run out we return a increment counter into my new function it brings all that local memory that was attached on its scope property with it in its back pack but that also means folk we know I appreciate Dwayne he literally messages per se is bouncing for a second I that means folk that we know or JavaScript knows when we return our increment counter into my new function will return it out we already know all of the stuff that my new function returned that function could ever refer to could ever ask for chance you will come down a second for Shawn all the subject I've asked for in that local memory in that backpack because we can look at the function as its returned out child sure does when we return out this I was gonna tell you that a second was like I'm gonna hold on that thought and I see you've got any questions on it so it's linked in the scope properties when we return out the function we bring the backpack let's talk about what the back that's called let's talk about the fancy name so first name that I love for the backpack is well of course back pack and by the way we know now this is a very popular name because of the wanders off oh no I just because of the wanders off a system it's open it Google do good like you go and we're gonna search closures backpack JavaScript here it is I never understood Josh foreclosures until some explaining to me what 36,000 likes it was 24 thousand likes two weeks ago that is out of control okay so the cart this is a guy out in New York Times very nice guy we love this guy he used to come to our parts he's now the New York Times as an engineering manager he'd come to this hard cost maybe two three times and look at this he refers to the backpack I want to show you that that was not a crazy name anymore because he's becoming he refers to the backpack one two three four five six seven eight nine 10 11 12 13 look at this backpack around he stopped appreciate look at this guy bit big Jeff I cannot the backpack never mind all I want to do understand it but the backpack is an emerging term gonna be in the JavaScript spec the rules of JavaScript very soon do not fear but let's get the fanciest names here's one that I like so some people call the local memory of a function when it's running not local memory they call it variable environment so the variables is the old-school name for labels and it's the environment is anything around me the place in which I do something well these are the variables around me as I run the function they're the data around me so there's a term which I quite like for the backpack which is that that date of that variable environment those data the numbers of stuff you stored around me like counter is zero is closed over kind of protected and when the function gets returned out it closes out when increment counter gets returned out it closes over encloses the variable environment around it and pulls it out into the backpack so some people called it the closed over variable environment all the codes I don't mind that it's alright I'll give you a better name and they leave your name that's gonna blow people away I said did I I think well you know it's maybe won't and that's this so in the backpack is data right these numbers it stuff's always star stored data so it's data that persists permanent or persistent mystic surrounds not being deleted to reference from the function it's linked references means linked its reference from the function by a property on the function as a function pulled out brings with it the property the hidden properties scope that is attached attached behind-the-scenes it'll it is a name of the link to the dates to the backpack so it's persistent reference data through the scope property so persistent scope reference data okay as a special type of scope scope uses a password in computing meaning what data do I have available to me at any given time and one rule of what data are available to me is what is lexical scoping which is where what date I have available to me at any given time with my function when I run it is what dates are I had available when I first that functions refer the same function what data was available around me it's always gonna be around me it always available to me whenever I run that function even if I grab that function and return it out of where that data was obviously available and then I still have access to that data not but let me go back into that function but because I meant to bring the data with me and that's known as lexical scoping which is the rule against a and what it will be available to me when I run my function is what data was there when I was born but my function was born when it was saved initially why cuz I'm gonna bring the data with me on my backpack so it's persistent lexical scope or lexically scoped reference data persistent lexical scope reference data reference yeah okay folks there it is uh thumbs you lost me long time ago this is a hard session people we do it in your times they don't get this that's why in this car and your times gonna wrote this big Asif on it you can click it I've got clarifications yeah this isn't necessary reference eighty exactly my new wails what convocation I look for the hearing it man you well sad wait where's your mind at Sam's clear chin cheese Golan fabrication carnies clear Michael is that it's clear cliff says the Herschel nobody knows what I means cliff I don't know that means everyone knows my knees beside me tase clip chin cheat I told you raising I noticed so I'm gonna come to you first you jump on oh okay thanks I was wondering if and when do they take everything in the function alter and piggyback it into the bank you want to fantastic these a biscuit a question and exactly why I didn't get that answer early because I knew to be someone in the audience who would have that intellectual curiosity to identify that very intriguing question and I know lots of people using as well but thank you shouldn't she be stepping up on that one the answer is no so this is all I started talking about and I thought you know what some will ask it so I'll let you ask it Thank You Sergey so know not all of the data here gets pulled out here it does because only one thing counts as ear but everything else if we'd save something else a potion sheet that was set in here equals seven well when I return out increment counter into my new function at no point inside of increment counter my new function do I mention Shaanxi so why would I store it in the backpack because I can't get to the backpack any other way I'd only get it by running my new function so as I return a function I already know all the stuff I could ever access from the backpack by looking at the function definition and Java does do that new jaws rendering the crow dogs would engine the v8 engine as is known when you return out the function the function is returned out it takes introspecting it looks inside it sees what gets referenced it's either since she wasn't referenced don't hold on to that the backpack leave that behind and deletes it makes engine she and I have a second question but I'm gonna be quick if that's okay um they doesn't matter which order it comes in first like if I put let counter equals zero right on top of return increment counter gonna give me an error no scope bond this scope reference regime is linked to this dates I mean you can change this danger as much as you want what persists is the link it doesn't sort of grab the data and copy it it links to the data so you can add it anytime you want you could add more stuff underneath here and it would pull me through it great question and anywhere I think you had another question what was that the one you were asking manuals clear Shinji and my name is were on same thing great job people with any other questions any other I have one eager my god so in this instance your constants my new function equals outer and you're executing the to give me man I just that's what a precision is so important we have function equals the the calling of the outer function more level about the increment counter the return return of outer which is the functioning from encounter correct and this is why I technical communication matters so much because it makes your own mind more be more precise absolutely I love it in that case in the previous example you had a parameter in that little bat inner function and my question is if you if you called that parameter so if you in this example let's up suppose you had a parameter an increment counter Aisin and you and you pass something into outer in this case would it return the results and and it's so wide to be clear include the premises not quite there so it would not quite right so increment counter if you had a parameter in a function well that would be so we had a parameter in here let's say I don't know Mike then we would want to have because he could encounter his mine who function we wanna make sure we're passing in something here right like right correct so let's say there was a bear as a Mike Mike variable within that function within which function encounter so that it was so that Mike was a viable parameter yeah close the more in it is the closer it is the more it gets priority so the Mike parameter will take priority so have you declared Mike eat equals three here and your backpack would have mike is three but because you've got it as the parameter name here it's in the local memory you pass in three it would take precedence when you pass it here but if you passed in three in outer in in where where it currently sits next to my new function what would occur awesome three here and you heard a mic here well that would have nothing to do with increment counter unless you passed it through will you say we have Mike here as well I'm saying I'm saying you have Mike in increment oh I see okay I think I just answered my own question yeah I mean I think this yeah he would not he would not get passed through the locally one would take precedence okay okay all right people so let's just get rid of that I thought might written all over this right all right let me try the pushback on this okay there we go all right people I think at this point let's see what my friend is staying at a time downstairs or here Oh should we do see what he says because I think because these this but we could talk briefly about this individual backpack I'm gonna least tell you and you can go explore this ourselves which is what have we ran out ER so all this code is the same vote but what if we ran out again stored a brand new increment kind of function into another function oh wow he says I said are you downstairs because there's a restaurant downstairs I like to go to on these nights or even here he says not yet leaving now I don't trust the end times of your talks anymore ha ha ha ha ha hilarious all right so if I ran out all over again thanks Carly what is right what is wrong with all I give you this free content but only the small cost of ongoing going on about Co Smith grad to its outcomes it's the only small costs you pay for this and Carly sends undermining message outrageous Katya after I bought you a food cart II was I was meant to be Carly's talk about why this was what was it sort of mixed room their software engineering aspirations maybe car you also he talked about other becoming some of those age biases in the industry hope you know me say that I think people should know about the age biases that are out there and we talked about some of the strategies to overcome that it was meant to be before hard parts even was my birthday evening it ended up being after hard parts at something like 9:30 10:00 p.m. and it was how I spent my birthday last year so I was very grateful to Carly for for that talking that the opportunity to talk about job search strategy at 10:00 p.m. what more could one ask for a birthday night and people queuing up to have birth injuries no nothing nothing no plans at all so I was very appreciative colleague of that happy birthday Dwayne I know that you are a popular gentleman so I'm sure you unlike me had plenty of plans on your birthday night yes yes so are a same thing correct okay b1 lovely message from Shinji to Duane excellent people here we go so if I ran out or again well maybe we quickly add it on up here yes I didn't squeeze it on let's squeeze it on next copy this and that's very quickly showing I think we can afford to my friend is boy I think muh ETA even so let's do it and if it's to wait he has to wait because become very boring recently so put this on over here squeeze it down oh no there it is oh whoops no no no does that final piece people do not fear there it is okay so we're gonna run out or again I'm gonna do a very small up here folks over you can see it so declare another I'm just continuing my coat my diagramming up here right I'm not actually no doing anything special to Claire another function and it's going to be the return value the output a runny outer so everyone together meaning to Wayne I'm gonna create a brand new context Shinji a voice I'm sorry I mute myself because I was typing and I don't want it sorry I was typing so we're going to pray in the u.s. fusion context for outer we're going to therefore add it to what Nathan and add the cool well till it gets added to the what they call stack pulls that wad um I go into outer and what's the first thing that says me to do Nathan if I go declare a declare a counter variable in local memory set it to equal to zero Oh mom let's keep going with you Nathan next line declare a function increment counter save to local memory and then return that definition beautiful mom but I'm going to ask you does it do anything else when I uh when I hold on so everyone do anything else they're very proud of function anyone want to tell me as soon as I declare a function what immediately it might bond to anyone want to jump in and tell me that Nathan you have an idea as soon as I declare a function we saw it earlier as soon as a function spread what Nathan does it connect itself to surrounding that that's why I wouldn't call it a backpack so so much because it's not being pulled out as the function comes out is that literally just the data like this yeah but it's a lower the score the Yi and a local memory sometimes Dwane they call it the scope I prefer to call the local memory the surrounding local memory immediately as a bomb exactly one annoyed we now in the final line of running outer to what Kevin what are we doing the final I'm running outta who saved increment counter you saved counter we've had a great town to immediately get a connection to its surrounding local memory before we do what Kevin before we return we let's learn the increment counter function out into Kevin what global label in this case another function there another function excellent there it is into another that's called another function and so now people the big moment of truth we call another function once we cool another function again we've called my new function once we've called my new function again we call another function once we call it again the first time we call my new function that counter went up to one suppose we console.log did suppose inside of my only function you're a console log counter after we incremented it so what will be CNN console if we were to console log the values of counter from running my new function once my any function again another function once another function again everyone throw it in the chat feel free if somebody wants to raise their hand I'll call on them let's have call on let's call on let's call on Michael Michael rerun my new function once mighty function again another function once another function again what are we gonna see we run out her to get another function and it's back pack you've run up yeah we should've brought out the back pack with it shouldn't we you should have pulled up a back pack with it and it came out it came so there it is we run connected on to the function you write we brought we brought out increment counter into another function we pulled out his backpack data with it with counter is zero so Michael if I ran my new function once mighty function again another function wants another function again what Michael and I see in my console one two one one two what and why would that be because the backpack is tied sues that specific function each time exactly we get one backpack for my new function that came out of the outer cool the first time I first increment counter with its own unique local memory and then we ran out all over again got a brand new local memory in which we had another counter which was set to zero we pulled out the Fontan we return the function out brought out the counters are in the backpack ran another functioning crate of that counter to one another function again go into that counter from 1 to 2 in the backpack distinct functions with independent permanent memories people this becomes as you write more advanced code a major factor in how you organize and structure your code every single function is no longer just code to run run me and create a little local memory that's temporary now it's code to run and data stored attached to it unique to that function and people encoding all we really do is save data and run code on it so it's pretty damn powerful when you can combine that in a function under one label a label becomes something labeling a function and its store of data that changes how that's like that's a good dream the two things we do in coding which is run code on data we get to combine them in one function code to run by putting parens on the end of the function name and then dates are attached there can only be accessed from inside that function I mean tell me what more I need to write code that's it and that's why in the end so much of JavaScript basically does this everywhere iterators asynchronous JavaScript module pattern modularity no they all if ease which I immediately invoked function expressions they all depend on function getting its own persistent store of data bundled up on it in a backpack very nice Michael let me ask a quick couple of other questions is a responded my ETA question uses quick couple other questions what if instead of defining counter in outers respective local memories so that they end up in the returned out functions backpacks it pulled out what about instead if we define counter inside of increment counter so each time I ran my new function mind if I'm trying upon to another function I had a counter of zero in my local memory what would I have seen in my console for those four runnings anyone want yet Shinji Shinji shiny's anyone else want to jump in on that one what she needs repeat Oh Davis is one two one two ha so David when I run my new function if my counter so increment count haven't returned out into my new function so I run my new function I'm gonna start off by saying let counter equal zero so I have a counter equal zero in my memory now a new counter plus plus goes to one and I caused a log it I get one close that as fusion context the next one let counter equals zero counter in the local memory increment it to one the local memory always starts from scratch David so it would be every time would be 1 and then 1 and then 1 what about folk what about folk here's an interesting one what if instead of defining counter an increment counter and in fact we're not going to define it even in outer we're gonna define it globally counter equals zero would be up here in global memory what now would happen if I were to run my new function my new function another function other function people throw it in the chat very nice hammer do always a pleasure to see you shout out to shout out to Nigeria how many do i hope you listening to my all-time my emerging favorite artists right now Kenny I'm gonna make you all of this at any other moment do not do not exit the video chat teni is changing music she won some big Nigerian cut a competition last year she is a queer inspiration I adore her very special all right people there we go so folk good job everyone in the chat let's look how you all did lovely one two three four one two three four well done yes Michaels is one two one two sorry Zed one two one two Duane's as one do you want to places what do you want to shinny yes what one do you want to Nathan's one do you want to very nice people and then once we go the local one we have one one one one all right folk so let's have a look at the final slide what does closure let us do and Michael you asked about performance there this has no real you study the same coding most things Michael that you doing coding aren't really about computer performance so much as they're about developer performance maybe your coat idea better organized more reliable easier to work with because the hardest thing in model development ain't performance gain fishin see most of the time computers to deal with the problem we're trying to solve is the developers needed as much organizing structure as we can get and this is the most important way of doing it alright so oh we're doing well for time so here we go closure gives our functions persistent memories first thing we can do with this helper functions like once and memorize so if I now have a function like my new function that remembers things about the previous running it remembers that last time it was Ronnie incremented counter to one next time it's running creditor to next time is running remembers it's now being run two times because it's got a counter at 2 so we could write code even my new function that says if I am Ron more than once in other words if counter is greater than 1 it has been run before any credit of 1 don't allow me to run my code so you can imagine a once if I'd version of x 2 so I'd run it with 3 first time in return at 6 it would increment a counter in the backpack to 1 next time I run it with 10 he doesn't return out 20 he would return out sorry you've already run me once because it looked in the backpack and saw cabs already won once you find functions limiting them to only run once is a super powerful and standard practice Engineering if you're building a tic-tac-toe game you don't want to allow someone to run the function when they click on the cell in tic-tac-toe to change it from oh and then to X and then - oh and no limits once so you want to find a function so we only run once on that cell and how do you do it you do it by storing in the backpack you've already run it once memorization a big part of computer science actually which is actually about the performance I'll tell you back the stuff about performance here as well about performance how wasteful are we when we have a really slow function like nth prime F prime would take in a thousand and return out the thousands prime number takes in I don't know 155,000 returning out one hundred and fifty five thousands prime number I mean it's gonna take a long time so if in your app you've had to work that out and you've already run the function with the input 155,000 you do not want how to run it again with the input of 155 thousand you want to have it as when you run it with one hundred of you five thousand rather than having to recalculate it the first time you ran it with 155 thousand you yes did the complicated calculations it took a couple of seconds but before you return that the result you stored 155 thousand and the results as key and value in an object in the backpack so next time you run run its prime with 155 thousand as the input don't do all the hard work look straight in the backpack see the result sitting there from when you last ran it grab it in one step return it out not millions of steps not billions of steps but one step it's not as memorization it is a absolutely standard practice in modern life it's the computers you need from us arts degree in the first you know year or two you will cover memorization in a big way it's the most important optimization to save you read doing hard work you've done already it relies on storing data in the backpack so next time we run the function it's got a little persistent memory of it's hard results from previous runnings you've done it once you have to do it again very powerful super powerful function memorization next thing unless you do it raids and generators we have too much time to talk about this but it's one of my favorite modern concepts in es6 if you want to build it eree scissors way of accessing data other than for loops collections are data like arrays you don't have to go and grab each element one by one it wouldn't be nice to add a function that kind of saw under the hood of it the online data and when you run the function it grabbed it from the backpack each value and gave it to you rather have to go to a for loop and get each element one by one they're known as iterators all iterators are the Dilton versions are functions with a backpack of data where your underlying collection of data is stored very powerful generators which are even more powerful edge craters where you start can hold on if I'm just gonna think of my data as a flow towards me when I run a function it gives me data run a function that gives me the next value and it goes with get dates from the stored memory it has comes to me well I wouldn't be calling I could control that flow of data you've opposed streams do you know about flows of data being given to you in a language rather than ham you don't get them well generators are flows of data to you you'd have to go and get where you can dynamically change them as they come out to you and if you want to have them dynamically change based on interactions with a database they're known as async await async await the most powerful new feature and JavaScript rests under the hood on closure oh I didn't tell specialist said the backpacks actual name oh I mean that not the batch for me the name everyone uses for it everyone calls it the closure sorry everyone it's called the closure it's an important thing I don't like that name for it but people call the backpack the closure and the whole concept is called closed you're doing quite light but I if people call the backpack they should put it in the closure yeah sorry about that people there we go forgot to mention that bit all right there we go closure that's the backpack the backpacks all right finally module pattern or pod with a modal pattern preserves state for the life and application with absent yeah so if you're writing clean code you do not want to store in global memory the label the variable results because your whole team wants to overwrite and a hundred thousand lines of code 200 developers the VP of engineering she don't like it when he called it all the same thing so where do you store your permanent labels because you want to saw data for the whole of your app where do you store them you saw them in the backpacks in the closure and it's known technically of the module pattern a bit more organized way of doing it a tyrannous JavaScript promises a signal wait they all rest under the hood on the backpack known as closure all right folks it's been lovely having one of you I have two things to share with you whoa oh it's the end and on Thursday night's hard part's is always followed by a wonderful drinks and pair programming and meeting other developers who are aspiring already in industry or in code Smith right now let me just go and get my beers my way of celebrating which one should I choose you might ask let's have a look well we have a two rows lil heaven well I'm already answer question I want this one okay session IPA that was answered I like session like I don't know as a session idea that my favorite so there the lower alcohol IPAs but also lighter that let's hoppy I think I love the whole penis but I tend to like a little bit lighter and say well I'm 4.8% yeah for were never sent the IPA is gonna be more than that this is a lovely for 9% ah wonderful all right so two things add one what next Korea workshops is my favorite favorite workshop to give how'd I get hired as a software engineer if you've been to it you've enjoyed it um I so told you I think this guy you say have told me he's got a mid-level job between the six-figure job without going to codes MIT ooh but he said hard parts but more importantly how to get hired that workshop was the critical factor so hard right now also not gonna code Smith also attended how to get hired twice Tommy Leslie her resume is significantly improved have I got anything from it no besides the pure pleasure of knows hard is it worth it probably just about yes kisara is clearly a delightful person but it's pretty borderline I received no monetary compensation oh well life goes on I hope you're doing well Sahara and I always celebrate your achievements very nice good how to get hired what else is there we just saw closures I would recommend I enjoyed the iteration was a bit boring honestly at least it reinforces closures IOP is very good he thinks good these are these Bauer we call them build away about Bauer there they're good notes what are they very good their buddies are very good there in my film they just don't follow the hard path model around of the hood they're getting a taste with building with reacts they're getting a taste with building with note it's fun CSX Online has video recordings of talks like this and then a bunch of coding challenges around this material and folk even if you've enjoyed hard parts the real value is when you do the coding challenges that's where it's really at oh one more or two more things actually one if you want to pay a program tonight with people we don't we have a way of doing this we need a dynamic shared code pad where if any of you want to code pair program tonight you could put your names in let's just quickly do that hasn't really created Google Doc and you can put your emails in there and if you want to go chat I'll just put it this is good idea actually I like this it was a it was the brilliant - was it you came up this last time I was great woman Walker her name is she's fantastic she's in CSP right now I was her name a Fiat no I can't write name if you today okay so jess HP j HP closures feb 27 is good doc so anyone who wants to connect after this can put their email in and your chat in here basically it's gonna be editable by anybody there you go here's the link if anybody wants to go and work together through it is a West Coast IPA no I like the East cuz I pays to be sure one sweet one sour indeed wise words Michael wise words indeed stone brain Greek green fat oh very nice yeah yeah very nice balance point I know believe me people I'm not a connoisseur but I've tried all of these very my favorites okay so the final thing to add if you want to go to that dock and put your names or whatever into chat with each other I'm not gonna be involved in that um but feel free oh I could have one other thing there's this great person called Tracy she is the actually the happens to partner the wife of Erik Kirsten who is the guy who helps negotiate up the salaries I can't deny that cosmas average salaries probably lifted up by about $7,000 because he negotiates with every cat every graduate their salary arc a very positive way is an exact wording to get this area up to the right point when they get an offer so his wife actually also it also works coach Smith I mean they both working there right I say his wife you know the two of them work there to get him there and right and she is a career advisor for people who are trying to get into Cohn Smith or just trying to succeed in general so if you do want to get her advice put your phone number DM me it directly in here put your phone number in directly to me the final thing I'm gonna add is this if you are trying to get into code Smith if you're not Sahara I saw her if you're not so I know if you are trying to go into come--the we you know fair fair enough right the bar you can see is fairly high I mean it is I believe anyone can get into code Smith it just takes some people a year or two and some people getting within two weeks he saw a friend here at the stop Ben what's his name Ben Ben Ben Ben Ben you CLE what his name Hawley been Hawley he got two codes without decide to learn to code like five weeks earlier three weeks earlier was ridiculous but he got so good so far okay fine he gone to Google Palantir Facebook uber and to Sigma under the any was offers were burned below 200k should have said that I don't know his office work removes I said that who knows all right so if you're trying to get in how do we do it well it's through this thing called the fast track application I believe I have a link to it hold on people here it is 7j 6 5 7 j 6 5 so if we go to I never know how to do this and you got a code Smith by the way people if you haven't watched the performance on the Oscars by idea Gaga Stephanie and Bradley Cooper oh my gosh I as I'm watching it I'm doing spontaneous applauses each time I watch a scene by myself Oh unbelievable right so this how you doing gonna close without such a ploy / whatever that code was 7 what is it and the cities were hidden application that doesn't the guarantees you interview is like a coding challenges it removes the essays there it is so there's the optional transcode fast track application skip the essays and just show us your coding skills with special coding challenge guaranteed interview a non tech review followed by ten of interview and then the admissions decision so it guarantees you if you're not doing for that people I strongly recommend you go for this or this how this is our outcomes from the previous round the average salary was lower but very excited to take this now 110 oh yeah 115 New York I didn't find LA I don't know why must be higher in New York for a reason if you don't want to try in the program yet CS prep is a good place I in my view code Smith is hard to get into for a reason it means it works but I do believe anyone can get into it because we have all these free workshops so that people can I've never liked the fact that people go to these programs get a junior developer job afterwards have you seen the percentage of people getting jobs out of my favorite programs I was shocked my belief is you can do that without paying eighteen thousand or fifteen thousand dollars you've got a code Smith when you've got that level and you want to get that mid senior level that doesn't mean as so many people do you have to do another program boot camp about a quarter of codes most students have done another program boot camp and that's a shame there is a scholarship for that up to four and a half thousand dollars if you've done on the program to kind of compensate people for the roughness pain to another program but you don't have to just come to hard pots every single week and even if you never applied a code Smith I don't mind I just make sardonic mean comments she's regrettable I will never do that again Sahara you're amazing you're a wonderful person and I'm super glad that you're achieving so much I really really love it but if you do try and get in it's all about attending these free workshops and regardless is so welcome all of you even if you learn on the program you're always welcome to all the free workshops because in the end what is life path the pleasure of explaining things to others and empowering others it is probably the only thing that is objectively a pleasure besides running and music besides exercise the music an objectively healthy pleasure there are other pleasures food it's not a healthy well the good stuff drugs definitely healthy other pleasures not that healthy teaching others always healthy all right people there we go and also as wise inspiring speeches I was hoping I'll leave that one to fester folk I hope you made connections in the Google Doc I don't know if you did but hopefully you did if you want to pair program certainly do so in there get in touch with each other and otherwise focus been a pleasure I look forward to seeing many of you tomorrow in New York City at codes with headquarters in Tribeca and then next Thursday I'm in Los Angeles for two weeks and I'll see you all in Venice Beach in LA next Thursday I'm very excited I don't know why I'm so easy to back there right now real looking forward to it see you tomorrow Duane see you tomorrow I see looking forward to seeing the first time in person Ginny I hope you make it tomorrow in person Oh Chinese code walls sorry again China's code people was what was it that was it 6/7 j6 v 7j 65 coat smith apply such 7j 65 and if you're intimidated by getting in apply to CS prep and go for a scholarship because that there's a lot softly to see us perhaps especially if you from a non-traditional background meaning particularly people of color non-binary queer like my self women those who are non-binary there's lots of scholarships or CS prep and Perko Smith alright so it's been a pleasure it's been a real pleasure I will see all of you my friend is downstairs peace out folks have a lovely evening all of you and see you all very very soon thank you great contribution it's really good work everyone thank you on

Channel: Codesmith

Views: 53,207

Keywords: javascript, closure, learn to code, learn javascript, software engineering, csx, web development, coding, programming, scope, execution context, intro to coding, intro to javascript, learn coding, objects and looping, javascript looping, introduction to javascript, introduction to coding, coding fundamentals, coding foundations, javascript fundamentals, javascript basics, coding bootcamp, software engineering immersive, javascript functions

Id: ZVXrJ4dnUxM

Length: 114min 12sec (6852 seconds)

Published: Wed Mar 20 2019