An Introduction to Functions, Execution Context and the Call Stack (FULL VIDEO - Parts 1-3)

welcome in this video we are going to lay out the foundations of how JavaScript executes we're going to see the execution context comprising memory and the thread of execution we're going to see how those execution contexts are tracked by JavaScript with the pool stack we're going to do all of this to understand the foundations of the language that are gonna let the hard parts that follow follow much more naturally this is a place to begin welcome to the video series I'm glad to have you along good alright so starting off to get ourselves we're gonna get to the hard part in a serious way but it get ourselves there we have to build out the foundations of fundamentals the principles of JavaScript this is how when we take a block of code what we do we run code over the first time I saw running code what is it doing it's taking words that have meaning in some application in its faces application is the JavaScript engine that interprets those words and users and instructions uses them as instructions to tell our computer in this case particularly our web browser what to do well how does that process work well let's see but nobody's foundation is going to feel very very pedantic almost very overly specific but they're gonna know how else to understand all the hard parts to come so here we go what happens when Jobs would execute in other words runs takes my code and starts doing it what actually happens further it parses through line by line nopales it's reliable I mean it it parses I'm easing into it says what this would mean what this would mean essentially yes okay and it's only allowing my line correct and what a lot of the time is it telling is actually doing when it's taking a line what's it doing Schuyler story seeing that you declare variables okay clear function storing stuff in memory exactly two main things we do when we run our code we store stuff in memory and in order to encounter that stuff to be sort of memory we're gonna go through our code line by line take it and run it executed and that taking of the code on my line is known as a thread of execution that is it's a thread weaving its way through and executing the code line by line as I say a lot of the time it's hitting code that's saying saves after memory so we're gonna map that out ourselves on the whiteboard here we go line one we're gonna map it out we're gonna see exactly what it does and we're gonna represent the thread of execution that means going through the code line by line on this side here and then we're going to store any of the variables or functions we declared on the right hand side here this is go beyond memory and memory we're going to represent these all on the whiteboard so we can really follow ourselves exactly how our code is executing and miss nothing if we have that there's nothing we we can't interpret other than we can't understand if we are going through the way that JavaScript engine actually eight seems a code there's something we can't understand all right so line one Lois you have the honor what are we doing I'm very so the first line we are declaring a constant variable called num a constant called num and setting to the value of three three excellent besides e next size and function declaration and we're saving the function in February and call x to perfect and I'm gonna represent that so I'll label well I declare a function it's tempting to think it's a sort of JavaScript just seize that line of those function good but it doesn't he's gonna grab that label x - it's going to grab that label and it's going to use that as a label for all the functionality the whole function definition the whole set of instructions from the keyword function over it and it's gonna capture that and store it under the label x - all right next line skyla so we're gonna declare a variable name so that you go through the street name so no you did not go to the third line visually on the page why do you not go inside of the x - function first Skylar because we did not call the function our thread of execution grabs anonymous 3 graveled y2 as funds and grabs name as well and it never goes inside my bobby - unless we call x - we never go inside it alright so they go name is declared and stored is well all right so what is this thing we've done here as soon as we start writing our code we create what is known as an execution context a word we may hear many times it is the most profound thing we do in JavaScript what is it doing we've seen it we've seen both things it does it's the process of go it's the power of going through our code line by line and doing whatever it says to do and the memory which we store any variables or functions to get declared announced those two things together are known as an execution context a context means as a space a space in which to execute code and in order to execute our code we need the thread of execution that goes through the code and takes it line by line as a memory in which to store that stuff and those two together and as a context in which we execute accurately space in which we had an execution context and it start we start off as soon as we start our code with a global one that means it's going to take we're gonna see in a minute what's called a function level execution context when we start running a function we think we thread weaves inside and starts running the code inside that function line by line and we create a little memory just for the stuff inside that function but for now we're in the global execution context I mean it's of the stuff that we declare in memory when we first start running our application it's gonna be available anywhere inside of our application so we're gonna prove this the global memory and this is that global execution context and we can always think of it like running like the whole applications a big function which we can sort of think of as being global when running the whole application code we went through it line by line we didn't write it out we just all the stuff in memory but think of it's going through and hitting the code line by line in our thread alright so as soon as I write a code we create a global execution context comprising a thread of execution going through our code line and a live memory of stuff actually stored spent on people thing we call a function we go back up the page to the function R when we encounter that function we grabbed it and we stored it in memory it's that place and we go look for anything that we then later on refer to posh name for the global memory is the global variable environment environment means the things around me so it's the variables that are available around me and my code the global variable environment all right above it excellent so the thread as I say this posh thing that the posh name from going through the code line by line we go through it in order from top to bottom of our page I never skip a line and I never suddenly grab this line down here and go perhaps it we go in order line by line that means it is synchronous in order of encountering top to bottom down the page that is all what do we follow and single threaded one thing at a time I am not starting to execute a function and continuing to do that while simultaneously continuing down the rest of my code at the same time if I ask you to function my thread is not continuing down the code down the rest of the page I'm gonna go inside of that function and start executing the code inside of it it is single threaded one line at a time one thing at a time in order all right so now we talked about the most important piece of what is important tool in a Java Script kit which is the function functions are a way of wrapping up some instructions some code to be done later on and we give them a label for now because then the code we've written our label for now which saves us having to write all that code out I run it so we just wrap it up give it a label and then we refer to it later on and say go run that functionality okay let's see that so we have declared numbers three mod father two as a function what is our next line of code to declare to run Phillip we declare a variable named output output excellent and we set it equal to the evaluated result of multiplying by two aha so we declare output but we we don't yet know what's gonna be stored in output so you called it the evaluator it's all you're basically saying this right hand side here the calling of x two is going to go and do some work and it's going to get a result that means it's got a value a to a result so it gets some some output and that is then what's gonna be stored in output perfect all right very nice I know that how do I know that I haven't yet finished my work on the right hand side here well symbols tell me that on the right hand side here there's work to be done the parentheses or parentheses they say go look for that function code x - yeah go look for it go look for x 2 will be passing in the number 4 but the parameter is the number for this the returned output the return value this function call is gonna be stored in output perfect alright now we know that this right hand side is not finished doing its work yet because we can't stall x - friends fall in output that's all it's store here we're going to go and do the work of running this whatever gets returned out whatever the output is we're going to store in in output when we call a function it's going to do a bunch of work inside of it and whatever gets returned out it's going to almost fully replace this function invocation is function calling and then that's when we saw an output so for now we don't yet know what to put an output but jars from never leaves anything on there's never a label without a value there's always some value on the right hand side never moves on that putting some weight what value does it default to define not know some foam IVs not it defaults to undefined we don't yet know what to store and output yet so just leave it undefined and now go and start running the code inside this function and by the way anything we store why didn't we declare inside this function put another memory just for that function and upload the memory but a little memory just for that function it sounds a lot like we've got to spin up an execution context just like we do for our overall code now for the function code the code inside that function x 2 we're gonna do what is called a function level or local that's called local no cool because a local execution context there it is and just like we had for our overall execution of our code a global memory where everything was stored we were going through the code 9 by 9 we hit we hit Ponce number equals 3 we hit x 2.is to quit and then we hit output well we don't get to continue with our thread for now our thread is gonna weave its way in and start running the code inside multiplied by 2 now that's leaving the thread and that local memory together are known as an execution context a space in which to run our code of x 2 so what is the first thing that we're gonna do inside that x 2 function Skylar so you're a declared variable result that's the second thing we're gonna do definite what's the first thing we're gonna do so you could actually say input number if were number two for so input number is our wort Louis that's your crown parameter that's to say that when I define x 2 I said you want to be able to use me multiple times and you want to use my x to function at immortal times but you don't yet know what number you want to multiply by 2 so leave a placeholder input number and then when you run me when you excuse me when you invoke me call me the only the same thing but you do that with parens anyway to rip up the array we're gonna see the day to run make sure you fill back in put number placeholder parameter blank in with an actual value which is what Louis or which is our our argument argument your M when we call the function we have an argument that's our actual value that we stick in when we run the function perfect Skylar will get society result we declare is already assigned to it the Abela reserve for next year I love it which is a good job hmm gifted and now it's kind of keep me going Latins so then you're gonna return that result variable the result let's say the value of results so in JavaScript seeds return result it goes what is result oh it's eight and returns that value out into what Skyler perfect return eight into output and a thread now weaves its way back out to global and how do we know to exit x - what keyword tugs to exit for the return return this is what hinge the runaway moreover to function returns us back out to the global execution content a thread was was going through and now it's back out where it encounters one line for that declaring a new variable problem aha new output which would have the return value of the call to multiply by two with the input of ten correct ten and that would spin up another execution context we're not going to go into it for now when you output would default to undefined until it gets the return value until it gets a return value of all of our cool to multiply by two what we can see here though whatever that would return we return it out into new output we can see here though is that there's there's a layer of complexity in these execution contexts contacts contacts in contexts so many hard consonants in contexts there's a level of complexity here there is the we can visually see who's Schuyler who said I finished running x 2 i returned eat out into the global execution context and the global variable output now Scylla can see that because you can see x 2 is to the right-hand side of the output constant he can visually see when I finish inside x 2 is execution context return to the execution context in which I was previously in but JavaScript doesn't have that sort of visual sense of how these boxes are working where it has to track which execution context I'm in at any one time am i inside x to the call to the bonfire to function am i inside the call this this next call to more power to function am i inside the global sort of cool the global execution context if I were to run another function inside and multiply by 2 where you have to keep track of where it is and where to go back to when it finishes where it is so if I'm inside the called mob number 2 multiplied by 2 but I'm finished because I called Robert 2 in global I want to be able to know to go back to global and JavaScript has a special sort of data store to track that journey where it is where it was and therefore where it's gonna be bad to and that structure anyone know what it's known as Z back to stat call stack has a stack of calls to functions when when we call a function we create an execution context so it's a stack of pools of function you call it the cool stack cool stack perfect and it is a great way of representing here's a great way of representing our functions being cooled inside of each other I start off in global so stat is something from our world of programming from computer science and it's just like an array an array says I want to store data it's a list where I care about the order of the data and I also want to do a grab piece of data at position 7 a position to a stack is perfect for tracking our execution context because stacks I only care about adding something on top of it like a stack of plates and something I can take a random place out I only care about anything to talk about and then when removing that plate the next plate down is still there that's all I care about same thing here I only care about having something x 2 inside a global and then when I finish writing modify - no need to go back out we really move more to move back out to global it's a really great way of representing our calls to functions and the first first one we had therefore to our stack of calls is a global execution context and we never leave that one as long as our application is running it's always there on the bottom when I start executing x - I add it on top not to pry hmm bye to invoked with 4 that is for when I am inside so while I was inside of this x 2 function so even was on top of my all sag and when I step out of it what do we think happens that my model had to fudge on the course that Philip it pops up I remove the cool and the posh name for removing from the call stack is to pop it off to pop the pool to Montano to off the porter name for adding it is to push push it on pop it off alright and if I do what run more part so again with ten that would be added on the call stack again and if I had to call another function inside of here that would be done added one layer above to my call stack alright so my call stack is my final piece of the core fundamentals of how add JavaScript code executes when you next to the function you print in us usual context which all that is all that station context is nothing sad too profound but what it is is our thread of execution meaning we take the code of x two and we start going through it line by line by line storing stuff in memory as we go and as I say local memory by the way sometimes known as a variable environment in which everything inside that function anything gets to find is stored inside that function circle memory and the execution context we keep track of those with that whole stack how cool to the function is tracked a call to the function is tracked on a stack of calls and this people is all of fundamental building blocks of JavaScript execution this is it we've seen law okay as I say we keep track of our calls in a call stack folks we now have the underlying principles we can see straight away I know that calling x to a limit of four returns to output eight I didn't need to do it for one second but when I have these foundational pieces built out with clarity and completeness all the hard parts follow more naturally so this was our hard part's preamble now we move on to hard parts part one for real callbacks and higher-order functions

Channel: Codesmith

Views: 25,678

Rating: 4.9652777 out of 5

Keywords: functions, execution context, the call stack, javascript, learn to code, learn javascript, programming, coding, fullstack javascript, software engineer, learn code, web developer, web development, react, redux, node, coding bootcamp la, coding bootcamp ny, coding bootcamp nyc, software engineering, javascript functions, javascript objects, basic javascript, intro to coding, intro to javascript, learn coding, objects and looping

Id: exrc_rLj5iw

Length: 22min 30sec (1350 seconds)

Published: Mon Jun 11 2018

Reddit Comments

[u/redditxplorer]

Will Sentance is awesome. If you get a chance to take his frontendmasters course, take it.

[u/Jocelot]

will is definitely one of the best out there.

Edit: Here are some notes for the Hard Part course he has in frontendmasters

[u/sivartt]

thumbnail looks like criminal's mug shot

[u/skankhunt_4]

watch his frontendmasters courses, he teaches technical literacy, something really rare in the community.

[u/yudhiesh]

The guy that made me understand what closures are.

[u/throwaway_away2017]

This looks great. I thought I'd share this great playlist from Akshay Saini too because his explanation of execution context and call stacks is great (I think). It helped fill in a lot of gaps for me. Namaste Javascript

[u/calson3asab]

Im waiting for his upcoming react course in frontendmasters

[u/yamayeeter]

Their asynchronous programming section with this guy is good as well

[u/captmomo]

https://youtu.be/8aGhZQkoFbQ I found this one very useful.