Lesson 5: Scope
Scope can get dicey, so I’ll dive right in and do my best to explain what I’ve learned.
Scope is variable visibility; if code can modify or access a variable, it is in that variable’s scope. Scope is the accessibility of functions, variables, and objects in some particular part of your code during run time.
There are two types of scope:
Global Scope
- There’s only one global scope throughout a document
- A variable is in the global scope if it is defined outside of a function
Local Scope
- Variables are defined inside of a function and they have a different scope for every call of that function
Sometimes you need to manipulate the scopes of your JavaScript depending on what you’re looking to do. (Source: Todd Motto)
To be able to manipulate the scope, there are three methods you can use, and you will have to understand how this works (oy, I know, right?). Very briefly, this refers to the context of the function, object, or variable that uses it (this will come up again in a sec! Look here or here if you want a bit more information).
When we manipulate the scope, we are really just changing how the function is called, and the .call, apply, and bind methods help us do that.
First up, the call method. The call method is a core function invocation primitive. What the heck do all those words mean? Well, it means that when you call a function, you’re really calling the call function on that function. Take a look.
See? So you’re saying: “Hey greet function, I’m using call to call you!” All function calls do this, and this process is called desugaring, which, as I understand it, is when a function is decomposed into its core, primitive parts. I will circle back to this in a sec.
First, take a look at this example for the call method.
Here, we have the person object; thegreet function is a member function of that object, meaning that since the greet function is inside that object, it is a part (a member) of it. What the call method is doing is saying “On the person object, call the function greet. In that function, the this is Samanta and the thing being passed is neighbor. Gimme the result!”
Okay, so! Back to desugaring! In the above screenshot, the blue text is the same as you’ll see below- the only difference is that the below is desugared. The first parameter of .call is the value of this, which is the person in this case (Samantha).
NB: this can be set to anything you want when you use the call method.
Now, onto the apply method. The apply method is very similar to the call method, with the exception that it takes in an array after the first parameter for this, instead of a number of parameters. Check out the call method below- notice how greet.call has separate arguments (Samantha, Maya, Angelina).
Now, check out the apply method and notice how the second parameter is an array, instead of separate arguments.
NB: The difference between call and apply comes up a lot in job interviews! An easy way to remember them is to remember that they are alliterative: for call, you need to count your parameters (call, count). For apply, you need an array (apply, array).
And lastly, the bind method! The bind method sets the context of something to the provided value. In other words, bind sets this to something. Here’s what I mean:
What this is showing is that the name ‘Noah’ is being applied to this (because it is being bound to greet). Also notice thatgreet.bind(‘Noah’) in boundGreeting is a whole new function. So, when you call boundGreeting and stick in ‘Christian’ and ‘Ben,’ the value for this is ‘Noah,’ and ‘Christian’ and ‘Ben’ are thing1 and thing2.
Scope is….hard. But I’m glad this is here for reference when I inevitably get confused again!
Next is ES6, woo!
