JavaScript’s Scope Chain for Dummies

When you’re first learning JavaScript fundamentals, there’s a lot that can scare you off and/or confuse you — like the multiple ways to write functions or the fact that functions are treated as first-class objects. I came from a background in Ruby where neither of these concepts really exist, so trying to grasp the JS way of doing things took some time.

The scope chain is another example of this, but much like the other concepts I mentioned, I soon began to see how beneficial and groundbreaking this functionality actually was, and all the potential it unlocked. In this article, I’ll explain the idea of the scope chain in plain English, so hopefully you too can know and love the nuts and bolts of scope in JavaScript.

The scope chain is a fundamental aspect of JS and it’s imperative to understand it if you want to master the language. To start, let’s take a look at some example code:

let variable = 'hi';
function hello() {
   console.log(variable)
}
hello();

As you might expect, the function will log the string ‘hi’ to the console. This is the simplest example of how the scope chain works! The variable was not defined within the function, and yet the function has access to it. Pretty straightforward.

What’s going on behind the scenes is a bit more complicated, though. When a variable is used (not declared!), the JavaScript engine first looks for it in the current scope (in this case, within the declared function). If it can’t locate it there, it then moves onto the outer scope (just outside of the declared function). If the variable declaration cannot be found in the outer scope, then the JS engine continues this pattern (aka “moving up the chain”) until it reaches the global scope. This is exactly how the function above was able to log the variable which was defined in the global scope!

With all of this in mind, let’s take a look at a more complex code example:

let variable = "hi";
function printVariable() {
   console.log(variable);
}
function print() {
   let variable = "hello";
   printVariable();
}
print();

Knowing what we know about the scope chain, what do you think will be logged?

If you guessed “hi”, you’d be correct! Even though a variable with the same name was declared within the print() function, the JS engine is still going to refer to where the called function was declared, and what variables are available within it via the scope chain.

Another term to get familiar with is lexical scope or static scope. Without going into too much detail regarding JS’s execution context (although you should read about that elsewhere!), this means that scope is defined when the code is compiled, not at runtime. The alternative to this would be considered dynamic scope, which is when a variable is equal to the most recent value assigned to it. In other words, if JS had dynamic scope, the code example above would have printed out “hello” instead.

When working outside of basic examples like these, scope can get confusing — but just remember: when in doubt, follow the scope chain!