Understanding Javascript Variables & The Scope Chain
One of the best features of JavaScript is the incredible versatility the programming language offers developers. Case in point, Javascript allows developers to declare variables in three different ways, either with var, let, or const.
Prior to ES6, var was the standard and only way to write variables in Javascript. However, with the rollout of ES6, developers gained two new and improved ways to declare variables through let and const.
As I’ll explain in this blog post, selecting the correct variables for our program and having a firm understanding of the scope of those variables is critical in ensuring that our code works accordingly and unwanted bugs are prevented .
Let’s break down the differences between the three JavaScript variables!
What is Var?
In JavaScript, we use the var keyword by simply declaring the variable name and assigning the value. We can reassign a variable declared with var as many times as we like.
Although var was ubiquitous before 2015, this is no longer the case and as a best practice there is no reason to use var in our code today. One of the most significant downsides to var is that we can declare a variable twice. As a result, this can cause confusion in our code if we loose track of the value of the declared variable and can thus lead to potential bugs.
In the example below, you can see that var dog has been declared twice without throwing an error.
What is Let and Const?
Unlike var, let and const will throw an error if we try to declare a variable more than once.
While let only allows us to declare a variable once, it does, however, also give us the ability to reassign a variable as many times as we like. This feature of let is especially useful if we have a counter or some sort of loop that requires us to increment or modify the value of our variable.
In the following example, I created a for loop that increments the let dog variable by one until the condition is met:
As a best practice, const should be used as our default variable. A good rule of thumb to follow is to always default to const and if necessary change the variable to a let later on.
Declaring a variable as const ensures that our variable cannot be redeclared nor reassigned. The importance of this point is that when declaring a variable with const, we know that that the variable will always contain the same value.
Therefore, we can rest assured that the value of const remains the same throughout our code.
As mentioned earlier, when it comes to var, there’s really no need to use it anymore given that let and const are better ways to write variables in Javascript (i.e. more control over declaring values/reassignments). We just need to make sure to familiarize ourselves with how var works, since we may encounter this variable in code written before ES6.
Now that we have an understanding of the major differences between these three types of variables, let’s talk about the importance of execution context and scope in Javascript and why it matters in regards to our variables.
Making Sense of Scope
In Javascript, scope refers to the concept of where our declared variables and methods are available within our code. The execution context is defined as the environment in which our code is run and every execution context creates a new scope that includes all the variables and/or functions declared within that context.
In other words, depending on where our variables and functions are declared in our code the context will determine which variables and functions are visible and accessible to utilize in other parts of our code.
On a high level, we have three important types of scopes: global scope, function scope, and block scope.
Global scope is defined as the context that implicitly wraps all of the JS code in our program. This means that our variables and functions are accessible everywhere. We can think about global scope as the top level outer scope of our Javascript file; as an important sidenote, if a variable or function is not declared inside a function or block, then it’s in the global scope.
In the example below, the const birthday is in the global scope and thus is accessible within the myBirthday function.
Function scope on the other hand occurs when we declare a new function, which effectively creates its own execution context and means we’re no longer in the global scope. It’s important to recognize that we can reference functions and variables declared within its own scope, as well as those of the global execution context. However, outside the function, we cannot declare anything inside our function.
The const mySign was declared within the function execution context, thus it is inaccessible outside the function.
Similarly, a block statement also creates its own scope*(ES6 provides partial support for block scope). To circle back to our variables, variables declared with var are not blocked scope which means we can access var outside the block statement, whereas const and let are block scope.
Now that we have a baseline understanding of scope, let’s delve deeper into how our scope chain operates.
Bringing it all Together: Scope Chain
When our Javascript code is run in the browser, our Javascript engine looks through our variables and if it cannot find a variable declared locally, it will then look at our code’s outer scopes until it finds a value (if one is provided, otherwise we will receive a reference error).
As mentioned earlier, all variables and functions declared in outer scopes are accessible in the inner scope through the scope chain.
In this example, the inner function thirdCar finds the value for const car1 and const car2 by looking up the scope chain.
Most importantly, the scope chain only works in one direction. An outer scope does not have access to variables or functions declared in an inner scope. Furthermore, two functions declared in the same scope do not have access to anything declared in the other’s scope.
Conclusion
Upon first glance, understanding how variables and scope works in JavaScript can be a bit daunting. While the remarkable versatility the program offers in terms of writing variables grants us a greater range of possibilities, this versatility can also lead us to bugs.
Thus it is critical to have a key understanding of JavaScript variables and scope, to ensure that our code is working as we intended.
Take it from personal experience, one of the best ways to fully solidify these concepts, is to practice declaring and assigning your own variables. So don’t feel afraid to get out there and start coding!
