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

The "Functions" 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 reviews how functions scope the thread of execution and memory.


Transcript from the "Functions" Lesson

>> Will Sentance: We're about to execute code. I said there's two things to executing code. Two parts to it, one, going through the code as given, line by line, and doing it. Two, having a place to see stuff that shows up, data. That is literally what it takes to run code.

A function being run is like a mini program. Like a mini-app, like it's some code to run therefore, we need those two things. The thread of execution, the ability to go through the code line-by-line and do it. And a little store of data, the memory, to store anything that shows up while we're inside that function.

Any functions, variables, constant stored inside that function only. Those two things together have a very, very profound sounding name. Does anybody happen to know? If I put my arms up like this, what that might be called? A brand new
>> Speaker 2: Execution contest.
>> Will Sentance: My, okay if people are watching this the very first time, this first encounter, they're like, okay.

All right, exactly, an execution context. That is exactly right people. Created to run the code of a function, has two parts, we've seen them already. Thread of execution because we're now gonna be going through the code of multiplied by two line by line and a memory, a little space to store data and functions to get declared inside that function.

So that's right for running multiplied by two before we're able to move on to any further code, we're gonna create a brand new execution context. Here it is, I'm gonna draw the big box. Look at this, this is what it is. We, by the way, see one already.

This was the big one, this is called the global one. This is the one that as soon as we start running our file of code, we create what's called a global execution context for running the overall file of code. That thing is the main program. As soon as we start running a little function, a little mini bit of code, we create a mini program, a mini execution context.

Here it is, I've made this very big. There it is, and it has as I say, two parts. One, the memory, a place to store things that get declared inside multiplied by two. We call it the local memory because it's just, local means nearby. It's just stuff that's gonna be available while we're running the code and multiply it by two, not available out here.

And anything which we announce or declare inside this function, any variable for it, you got it? Stored in here, not in here, all right. So, into this function we go and what is the first thing that we're going to do inside of here? Ethan, what is the first thing we're gonna do inside?

>> Ethan: Declare the const result.
>> Will Sentance: Ethan's almost right, that's the second thing we're going to do. But Ethan, whenever we run code in a function, the first thing we always handle Ethan is what? Before we hit the body the function we handle, we've got some stuff with sort of inserting into the function that's going to show up inside the local memory.

And that is?
>> Ethan: So input number.
>> Will Sentance: Excellent. It's gonna be set to what?
>> Ethan: Three.
>> Will Sentance: He's spot on, to num which evaluated to 3. There it is, label, value. No different to out here. But these ones have special names. What's this one known as people?
>> Speaker 2: Parameter.

>> Will Sentance: And this one here folks?
>> Speaker 2: Argument.
>> Will Sentance: Exactly. So the placeholder input number that's gonna receive when the function ends up being run an actual input, actual value, actual number. That number that gets passed in is known as our argument. The placeholder that awaits it is known as our parameter.

They are fundamentally different. I mean that two sides of the same coin, but they are fundamentally different things. One is the label, one is the thing stored in that label. Okay, then we hit result and assign it, Ethan, what? When it's resolved gonna also have a stored in it?

>> Ethan: Input number times two.
>> Will Sentance: Which is gonna be?
>> Ethan: Six.
>> Will Sentance: Three by two is gonna be six, excellent, thank you. To Ethan and then the final it was an interesting one. We've got Dan, return, actually hold on Dan, I've asked you lots of time. So I'm going to mix it up, I'm going to turn to Jason.

Jason, what is this final line saying here?
>> Jason: It's saying that locate the block of memory that is bound to the label resolve and ship it out of-
>> Will Sentance: Yeah, I like that. I, all right, you really like that. It says, go look at, what does this word resolve mean?

Javachip doesn't know automatically, so it goes hunting for it in our local memory. Finds it's a number six and then takes that number and ships it returns it shoots it out. What's literally gonna happen people is that the call to the running of the invocation doing the same thing or multiply by two and number three is gonna evaluate to.

That means it's gonna literally turn into the value that, people value is this this, this the anything that's stored. Not the label, which we fancy called the identifier, is the thing stored as a value. We're going to evaluate, that is to say we're going to turn this command the thing you can't store into the result value and look at that is that you're going to evaluate into the number six.

And then that output is equal to six and there it is, returned out and assigned to output. My goodness. All right, so our thread of execution. Wove in because by the way in JavaScript, how many threads of execution? That's it, I'd say how many things can we do at a time people?

Well, I've asked two different questions to pronounce is there, how many threads of execution do we have Adam?
>> Adam: Just one.
>> Will Sentance: One, that means how many things we do at a time? What are the odds with the same. Okay, so we have already one thread of execution.

As soon as you want to start and execute a function, we have to have a thread weave in and start running those lines of code and then it's going to weave back out. We can't continue on down the page while we're running that function. We don't do two things simultaneously.

We're gonna see more about that with a synchronous JavaScript to come tomorrow. All right, so our thread of execution weaves in it then weaves back out with into global where we hit what line, wasn't it Mark?
>> Mark: Mark.
>> Will Sentance: Mark, sorry Mark, we hit what line Mark?
>> Mark: Const new output.

>> Will Sentance: Declaring new outputs, there it is. Mark, do we know what to assign new output? Do we know what to store in new output yet?
>> Mark: No.
>> Will Sentance: Because we gonna go and do what?
>> Mark: We have to create another context.
>> Will Sentance: Execution context, we gonna go and execute what function Mark?

>> Mark: Multiply by two.
>> Will Sentance: With the argument of?
>> Mark: 10.
>> Will Sentance: Excellent, I'm gonna push Mark to be as complete as possible with his technical communication. There it is, there's our beautiful execution context. That's better than the last one. And into it we go and I know this is incredibly repetitive, well, that's the nature of function.

We save it once, we can use it again and again, there we go. Into we go and input number everybody, is assigned what, our argument of the value?
>> Mark: 10.
>> Will Sentance: 10, well done, and then result is assigned 10 by two, which is 20. Then we return the value of results out into that global label new output.

And there it is, people. My goodness, all right. That is the core two out of three parts of our JavaScript platform.

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