00:00:00
what's going on guys welcome to a new
00:00:02
series called javascript under the hood
00:00:04
and the idea for this series is to look
00:00:07
at the inner workings of javascript and
00:00:09
what actually happens when we execute
00:00:11
our code so we'll be talking about stuff
00:00:13
like the execution context how
00:00:15
javascript handles memory the call stack
00:00:19
asynchronous javascript and some other
00:00:21
stuff as well it'll probably be about
00:00:23
five or six videos maybe even more if i
00:00:25
can think of some other ideas and if you
00:00:27
guys really like this and i think this
00:00:29
is fine for beginners as well as
00:00:32
seasoned developers that might not know
00:00:34
a lot of this stuff
00:00:35
and i don't know everything but what i
00:00:37
do know i'm going to put into this
00:00:38
series of videos okay so hopefully you
00:00:41
enjoy it in this particular video part
00:00:43
one we're going to look at the thread of
00:00:45
execution we're also going to talk about
00:00:47
the call stack i'm going to show you how
00:00:49
that works in both a diagram as well as
00:00:52
in the browser itself all right so let's
00:00:55
go ahead and get into it
00:00:57
[Music]
00:01:02
alright guys so i thought that we could
00:01:04
start off by talking about the threat of
00:01:06
execution so javascript is what we call
00:01:08
a single threaded language and to be
00:01:11
more specific a thread is a single
00:01:13
sequential flow of control in a program
00:01:15
so it's basically like a like a process
00:01:18
and over here i'm not the best diagram
00:01:20
maker but just bear with me so here we
00:01:23
have one single thread okay this dotted
00:01:25
line and everything that happens
00:01:28
everything that's executed in javascript
00:01:30
happens line by line okay so here i just
00:01:33
have some console logs but it could be
00:01:35
anything any code and in order for
00:01:38
operation two to start operation one has
00:01:41
to complete and so on you know all the
00:01:43
way down the line
00:01:44
now
00:01:46
you might see people say that javascript
00:01:48
is an asynchronous language it's not at
00:01:51
its core it works just like this it's
00:01:53
synchronous however we do have
00:01:55
asynchronous capabilities we have web
00:01:57
apis that can help us um do things
00:02:00
asynchronous so if operation 2 for
00:02:03
instance is going to take a while in a
00:02:05
while in programming is you know one or
00:02:07
two seconds then we can go off and do it
00:02:10
and we can keep going on the main thread
00:02:12
and then what happens is when that
00:02:14
asynchronous operation is complete it'll
00:02:17
send a callback or a promise and and get
00:02:20
push it back into the call stack okay so
00:02:23
and we'll talk about that in part three
00:02:24
how that works but right now what i want
00:02:27
to do is just drill it into your head
00:02:28
that javascript is synchronous
00:02:30
everything happens line by line on a
00:02:33
single thread okay now a thread has a
00:02:36
call stack and a memory heap we're going
00:02:38
to talk about memory in a later episode
00:02:41
and since we only have one thread we
00:02:42
have a single call stack and i think
00:02:44
that it's important for you to
00:02:46
understand how that works so we're going
00:02:48
to talk about that next
00:02:50
so a call stack keeps track of our
00:02:52
functions it's basically a stack of
00:02:54
functions it manages what we call the
00:02:56
execution context now i'm going to talk
00:02:59
all about execution context in the next
00:03:01
video so don't worry about that just yet
00:03:04
just know that at the bottom of the call
00:03:06
stack is our global execution contacts
00:03:09
that's always going to be at the bottom
00:03:11
and then we have our functions stacked
00:03:13
on top all right now stat a stack is a
00:03:16
data structure okay so it doesn't have
00:03:19
to be the javascript call stack you can
00:03:21
create any kind of stack just like an
00:03:23
array or a queue
00:03:25
and stacks are lifo which stands for
00:03:28
last in first out what that means is the
00:03:31
last thing in is always going to be the
00:03:33
first thing out okay so
00:03:36
to give you a better picture of that
00:03:38
let's take a look at some sample code
00:03:40
here and what that would look like on
00:03:41
the call stack
00:03:43
so we have three functions first second
00:03:45
and third they just console log but of
00:03:47
course they could do anything and we're
00:03:49
calling them all on the on the global
00:03:51
scope right
00:03:53
so if we look at the stack what this
00:03:54
will look like is we'll have the first
00:03:56
function that runs first it's to get put
00:03:59
on top of the stack okay so in this case
00:04:02
it'll be right on top of the global
00:04:03
execution context and then first will
00:04:06
pop off once that completes once it's
00:04:08
done executing then we hit second that's
00:04:11
going to get pushed on and this is the
00:04:12
terminology for these data structures as
00:04:15
it gets pushed on and popped off but
00:04:17
second will get put on then it will get
00:04:19
popped off and then third will run so
00:04:21
that gets pushed on and popped off so
00:04:24
very simple it's a very
00:04:25
a stack is a very simple easy to
00:04:28
understand data structure
00:04:30
now i just want to take a look at
00:04:32
another piece of code and show you how
00:04:33
the stack would work in this case so
00:04:36
here we have our first second third
00:04:38
functions but we're only calling first
00:04:40
in the global scope okay and then in
00:04:43
first is where we're calling second and
00:04:45
then in second is where we're calling
00:04:47
third so in this case
00:04:49
first would get called gets put on the
00:04:51
the stack all right and then in first
00:04:54
second gets called now first is still
00:04:57
running so that's gonna stay on the
00:04:58
stack but then second gets called that's
00:05:01
gonna get put on the stack while we're
00:05:03
in second third gets called so second is
00:05:05
gonna stay there then third gets put on
00:05:08
okay once third is done executing it
00:05:10
gets popped off then seconds done gets
00:05:12
popped off then first gets popped off
00:05:15
all right so what i want to do now is
00:05:17
show you that exact example in the
00:05:19
browser so i just have just an index
00:05:22
html i'm including a main.js file and we
00:05:26
have the first example that i showed you
00:05:29
where we have first second third we call
00:05:31
them all on the global scope and in the
00:05:34
console of course it's just going to log
00:05:35
this but what i want to do is go into my
00:05:38
sources tab
00:05:39
and and kind of step through this and
00:05:41
show you how this works line by line
00:05:44
because in sources we can see the call
00:05:46
stack all right now
00:05:48
you're going to want to if you're
00:05:50
following along you don't have to
00:05:52
there's really no reason to but we're
00:05:54
going to place a break point here or
00:05:56
debugger at i'm sorry we're going to put
00:05:58
it down here
00:05:59
we're going to put that at first okay so
00:06:02
once i reload it's going to just
00:06:04
pause right there you can see there's
00:06:06
nothing logged in the console so we've
00:06:08
paused now let's go to the call stack
00:06:12
and you can see this anonymous so this
00:06:14
is actually our global execution context
00:06:17
okay so you saw that in a diagram now i
00:06:20
can click this arrow right here to step
00:06:22
into the function so i'm going to do
00:06:24
that
00:06:25
and now we're in the first function and
00:06:27
you can see that it got put on top of
00:06:29
the stack
00:06:30
okay now if i go through so that you can
00:06:33
see it logged first and then if i go
00:06:35
through again it's going to finish up
00:06:36
the function and then it gets popped off
00:06:39
of the stack okay so remember it's it's
00:06:41
last in first out so now we're at second
00:06:44
i'm going to hit the arrow again
00:06:46
second gets pushed on the call stack
00:06:49
go through it gets pushed i popped off
00:06:52
and then third i'm gonna run that that
00:06:55
gets put on you can see it right here
00:06:57
third and then we'll go through it
00:06:59
log and then it gets popped off okay so
00:07:02
it's the exact thing that i showed you
00:07:04
in the diagram
00:07:06
now i'm going to go ahead and take off
00:07:08
this breakpoint
00:07:09
and just reload and then i'm just going
00:07:11
to change this up to the second example
00:07:14
so in the first function we're going to
00:07:16
call the second and then in second we'll
00:07:19
call
00:07:20
third
00:07:21
and then we'll just get rid of
00:07:23
these two here so we're just calling
00:07:25
first in the global scope now in the
00:07:27
console it's going to do the same exact
00:07:29
thing as the the the first example
00:07:32
however if i go into sources we're going
00:07:34
to go ahead and put a break point right
00:07:36
at the right at first where this this
00:07:38
whole thing starts and then let's reload
00:07:41
okay so it's paused right now but you
00:07:43
can see we we have created the global
00:07:45
execution context it's in our call stack
00:07:48
and i'm going to go into the first
00:07:50
function so i'll click this arrow here
00:07:52
now you can see that first has got it's
00:07:54
now pushed on to the stack
00:07:57
all right then we're going to go
00:07:59
do the console log and then once i click
00:08:01
this again it's going to run second
00:08:04
so notice now first is still there right
00:08:06
because we're still in the first
00:08:08
function because that's where second is
00:08:09
called so second is now on the stack
00:08:13
in second we then call third so click
00:08:15
the arrow
00:08:16
call third now third gets pushed on to
00:08:19
the stack
00:08:20
and now we'll go ahead and execute third
00:08:23
now it gets popped off second execute
00:08:26
that gets popped off and then first
00:08:29
okay so it's always last in first out
00:08:32
okay so that that's a pretty basic
00:08:35
example of how the call stack works
00:08:38
and i would suggest that as you're
00:08:41
building projects just just pop in the
00:08:43
sources tab and take a look at the call
00:08:45
stack obviously it'll be much more
00:08:47
complicated when you're working with an
00:08:49
actual project than our little script
00:08:51
here but i think it will it'll help you
00:08:53
out it'll help you debug your code um so
00:08:56
hopefully you guys enjoyed this in the
00:08:58
next video in part two we're gonna go a
00:09:01
level deeper and talk about the
00:09:02
execution context
