Scoping in javascript

In order to learn a language thoroughly it is essential to understand how the language's scoping rules are defined. In this blog I would like to summarize how javascript scoping works to solidify my understanding. I will go over what scoping is, how it works in javascript, and the different types of scopes in javascript.

What is scope?

From wikipedia:

In computer programming, scope is an enclosing context where values and expressions are associated.

Scoping allows you to organize and enclose your variables and expressions in a certain environment. In most cases scope is used to encapsulate and hide information from other parts of the program. This keeps your application safe from modification by other people. For instance in jQuery or other javascript libraries the library authors done want people to be able to modify variables internal to the library so they enclose their library in a scope.

How is javascript scoped?

Javscript is said to have lexical scope. This is also known as static scoping because you are able to resolve the scope of variables by parsing the program text. In javascript this is done by analyzing the nesting of function blocks. As seen in this example.

Also note that if you define a variable in a nested scope that has the same name as an outer scope the variable will reference in the inner most scope. As seen here.


Whats with the var?

The var keyword is used to say this variable belongs to the current scope. Without using this keyword in a function the variable will be put into the global scope. To see this in action see the following code sample.

As you can see when not using the var keyword your variables will "bleed" into the global scope. This is one of the biggest issues when debugging javascript. Always var your variables to avoid pulling your hair out.

Where did the global scope come from?

By default every javascript program will execute in a global context or scope. For most javascript this is the window object because the javascript is executing in a browser. To show how this works lets modify the previous examples a bit.
As you can see when you do not define a variable with var then your variable will end up in the global scope which can then be referenced outside of your function with or without referencing the name of the global scope.

There are other types of scope in javascript....

When we use the var keyword we are actually putting variables in the local scope. This scope is only accessible to itself and nested functions. See this code sample:

As you can see the variable created with the var keyword is not accessible outside of the function. On the other hand you can use the this keyword. The this keyword is used to reference the current execution context and will be available as a public variable as seen here.

However one of the most important features of the this keyword is the fact that you can change the current execution context. The are 3 ways to change the current execution context: call, apply, bind. These are often used to change execution context when executing a callback. Take a look at the following:
As you can see if you do not use call,apply or bind then this in the callback will not reference the button firing the event. To make this work you can do the following. Using call you can pass in this as the first parameter and then a list of the arguments to the function. This will set this of the callback function to the this that is passed into the call function.

Alternatively you could use apply. The only difference is the arguments that are passed to the function are defined as an array. As seen here: . Lastly there is bind which returns a copy of the function with this and the arguments bound which you can then call later.

With bind you have to be careful because it is only implemented in the new versions of javascript. The final scope you need worry about in javascript is block level scope. This creates a new scope in if and for blocks by using the let keyword. See the following code sample. As you can see the code creates a new variable x using let which makes it local to that if block. Be careful when using this becuase it is only available in newer firefox versions.

In this article we examined how javascript handles scoping. We learned that javascript is lexically or statically scoped which means we can figure out the scoping rules by looking at the nesting of the functions. We learned that when no scope is given when creating a variable then it will be put in the global scope, usually this is very bad. We learned that we can create local variables to the current scope by using the var keyword. We learned that when using this it is referencing the current scope, and can also be changed by calling call,apply, and bind. Finally we learned that we can create block level scoping by using the let keyword in some browsers. Obviously scoping is a very important language topic and is essential knowledge before using a language.