Check out a free preview of the full JavaScript: The Hard Parts, v2 course

The "Single Threaded Execution Review" Lesson is part of the full, JavaScript: The Hard Parts, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Will introduces what will be covered in the next few sections, then goes on to review how JavaScript executes code through a single thread.

Preview
Close

Transcript from the "Single Threaded Execution Review" Lesson

[00:00:00]
>> Will Sentance: I think it is worth starting off people with some words about where this a sync is gonna take us. Promises we're gonna cover promises. If you've seen v one of hard parts, then you remember that it's, we got, I think, to the traditional ES5 callback model. And we saw the callback queue is all these sort of pieces.

[00:00:20]
In ES6, probably the most significant additional feature was promises. Under the hood, so they're not going to be radically different to the callback model. Then we're gonna see the key feature of what I think makes JavaScript the most powerful and popular language. A certainly in the web world, and that is it's a synchronicity.

[00:00:41]
This is what makes dynamic web applications possible. This is what means that when you're clicking lots of slack emoji responses. What else would we do? When you're clicking all those slack emoji responses, they're not all being updated on your local machine on your computer. It's so that's all being sent over the internet, thousands of miles away coming back confirming and then somehow all happening simultaneously in a single threaded language.

[00:01:11]
Already that might give you pause for thought of the event loop which is gonna turn out to be Joshua's way of teeing up what's going to run and what he's running and what's going to run next. And then some really interesting these the micro task queue that I wanna shout out Jake Archibald, our fellow British friend, who is one of the people who talked about the market ask you and it really important who likes you and the web browser features.

[00:01:34]
But we're back where we started. We are going to get back in the saddle so to speak by reminding ourselves how jobs would excuse regular code. Okay, here we go, people. We're back. We're back. We're back. So line one is over to Kayla line one, what are we doing here?

[00:01:56]
Remember there's two parts running code going through it line by line and saving stuff as we go. So Kayla, the line one, what are we doing in our very first line here?
>> Kayla: We're defining constant norm and setting the value to three
>> Will Sentance: Beautiful where's that being saved?

[00:02:10]
Where's that data being saved?
>> Kayla: In global memory.
>> Will Sentance: Fantastic. So norm is assigned a value of 3 in global memory beautiful. Let's go over to Todd, what are we doing Todd in the next line?
>> Todd: Our defined function multiplied by two.
>> Will Sentance: Fantastic, and that is to say we're taking its label, that's its identifier, and then taking all the code of it including the parameter as a placeholder, that's gonna be filled in with data and we end up using this code.

[00:02:33]
Sort of with a value in using this code, and we are saving it all in one go, fantastic. Next line. Let us have Matt left hand side.
>> Matt: You are gonna define the constant output in the global memory.
>> Will Sentance: Beautiful everybody is so pro at this point. It is very nice.

[00:02:52]
Define the constant output of memory. Matt, what am I gonna store in that constant output?
>> Matt: The result of multiplied by two.
>> Will Sentance: The result of coding multiplied by two. Beautiful, so for now, everybody it is?
>> Audience: Uninitialized.
>> Will Sentance: Very nice, taken care of specially. All right, so let's not get calling multiply by 2 with the input of norm which is the value, 3, its output, it's returned value is going to be stored into outputs.

[00:03:24]
And we're gonna create, everybody, a brand new?
>> Audience: Execution context.
>> Will Sentance: Fantastic in line with me as well. There we go. And Andrew we go folk. Yeah, very nicely shaped. There it is and into its local memory our first thing stored as a value three assigned to what parameter name, Jeff?

[00:03:48]
>> Jeff: Input number.
>> Will Sentance: Input number, yes folk. There it is input number then Dan told me through the body of the function
>> Dan: We are defining constant result.
>> Will Sentance: Results
>> Dan: And we're assigning the value of input number multiplied by 2
>> Will Sentance: Which is?
>> Dan: 6
>> Will Sentance: And then we do what?

[00:04:07]
Dan
>> Dan: We return out the value assigned to label result.
>> Will Sentance: Very nicely put, exactly. And adding comes into the global constant, output, there it is, perfect. People, I wanna just talk about, though, look at the journey of the thread of execution. I'm gonna do in green from now on.

[00:04:27]
When we hit this line here, the of multiply by two. Our thread of execution, remember, that's the half of what we need to run code. We need the ability to run code, sort of this left-hand side here, and the ability to store stuff, those two parts. When we started running multiply by2.

[00:04:43]
So we started running our code, our thread of execution was going down. It hit label output, and then go run some more code. So our thread of execution had to be used to run the code of that function. Into it we went and until we finished inside this function, where we allow to move on to the next line of code and global?

[00:05:05]
No, because JavaScript is a synchronous language, JavaScript is a synchronous language that means we do each line, we finish it, when we finish that we go next line, okay. So into we went and we did all the code inside of it and until we finished with it, we did not exit out to the next line.

[00:05:25]
And when we did, at that point we closed this execution context and we moved on. And then we hit our next line in global. But you could imagine the language where we would have run our code, our thread would have gone into multiplied by two run it and we'd have continued our thread of execution in global.

[00:05:41]
But not in JavaScript. In JavaScript, if we have a line of code to do, we have to do it. It's the only line of code we can do and we had to finish on it before we move to the next line, okay?
>> Will Sentance: Already you might be thinking hold on, what if that line is a really slow line?

[00:05:58]
Suppose that lines a line that might be speaking to Twitter, over the Internet really slowly. All right, next line we hit is declaring new output. Adam in the back, what are we gonna do in order to get our value or in order to finish this line of code, the final line of coding, what do we gotta go and do?

[00:06:24]
What is this final line telling us to do? Declare new output.
>> Adam: Assign it to evaluation and multiply by two with an input of ten.
>> Will Sentance: Absolutely, so, that means we gotta go and execute this function. Create a new execution context for it very quickly create a new execution context into it we're gonna go and in local memory, we are going to have input number, assigned to 10 result, we know this right?

[00:06:56]
Result will be 20 and the return of value result out into new output. Our thread of execution, our single thread of execution, the single do one thing at a time while inside of here, can we be running any further code? No, and when we're finished with that we can come out.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now