Scope Chain in Javascript

"Do your chain hang low?
Do it wobble to da flow?
Do it shine in the light?
Is it platinum, is it gold?
Could you throw it over ya shoulder?..."

Sorry I couldn’t help myself! I use to jam to that back in the day. I unfortunately, do not own any chains but Javascript on the other hand has a pretty impressive chain and it can hang as low as you like. Before we jump into talking about Javascript’s scope chain we need to understand the concept of scope and the different types in javascript.

What is Scope?

In the simplest form, scope is the variables and functions Javascript can access at a certain point in your code. There are three types of scope.

Global Scope

Global Scope is when you declare functions or variables globally. This gives you access to these variables and functions anywhere inside your code.

var name = ‘Tripp’
function sayName(){
    return name
}
console.log(name)
//returns ‘Tripp’ and also prints ‘Tripp’

Local/Functional Scope

Functional Scope applies when you create a variable inside of a function. You have access to this variable anywhere in the function but do NOT have access to the variable outside of the function.

function spellName(){
let name=‘tripp’
for(letter of name){
console.log(letter)
}
//Will print out each letter of name variable

console.log(name)
//returns reference error. This is because we are trying to access the variable outside of the function that it was declared in.

Block Scope

Block scope give your access to everything that is inside a block {}. This applies to the keyword let and const. IMPORTANT: var does not have block scope.

//example of creating a block
    let dog = ‘Ada’
{
    let name=‘Tripp’
    let dog = ‘Taz’
    console.log(dog)
//prints “Taz”. Has access to the dog variable inside of the block. Chooses to print “Taz instead of “Ada” because of scope chain… More on that shortly.
}
    console.log(dog)
// prints ‘Ada’. Block scope prevents access to the dog variable ‘Taz’ inside of the block.  It does have access to the global scope of dog ‘Ada’ and prints it. 

Scope Chain

Now that we understand that scope is what variables and functions javascript has access to at a certain point in our code, let's talk about the scope chain. The scope chain is how Javascript looks for variables. Javascript will go up the chain looking for variables when you call for them. It will start locally and work its way up the chain to the global scope. If Javascript does not find the variable in any of the appropriate scopes on the chain it will throw a reference error.

IMPORTANT: Javascript only works up the chain and never down.

When you call for a variable Javascript will look in the most restrictive scope it has access to and then work up to the least restrictive global scope. Javascript will never start in the global scope and go down the chain to a block scope to find a variable.

In the image above sums up everything we have discussed so far. There is the Global scope represented by the largest box. It has the variable globalVar declared. The next box firstFunc() represents a new local/functional scope and has the variable firstVar declared and a function secondFunc(). Then the last box is secondFunc() and has the variable secondVar declared. At what points are each of the variables accessible?

Where can I access globalVar?

globalVar is accessible in any of our functions. This is because it has global scope. If we used globalVar in secondFunc() Javascript would check locally if the variable is there. Since secondFunc() is inside of firstFunc() we can go up the chain and look in firstFunc() for globalVar. Since it is not there and we can no longer work up the functional scope chain it will then look globally. Bingo it now has access to globalVar

Where can I access firstVar?

FirstVar can be access inside of firstFunc() or inside of secondFunc(). In the picture, secondFunc() is calling firstVar. It preforms the same search as before. Looks locally in secondFunc() and then proceeds to look inside of firstFunc since secondFunc() is inside of its scope. If we try to access firtVar from the global scope we will get a reference error since Javascript will not work down the chain.

Where can I access secondVar?

You can only access secondVar inside of the secondFunc(). Remember we can only go up the chain and never down the chain. Global scope and firstFunc can not look into secondFunc() scope because it is further down the scope chain.

Summary

Scope and scope chain are very important topics to understand in javascript. It can be confusing for beginners but once you understand, it becomes second nature. Here are some simple rules to live by.

1. Scope is what variables and functions Javascript has access to at a certain point in code
2. Scope chain is how Javascript looks for variables in different scopes
3. Javascript will only work up the chain (from most restrictive to least restrictive scope).
4. Whenever you see { } you are generally starting a new scope.

I hope you find this helpful!

Comments

[Nando]

short and simple, this would've helped in my noob days. good stuff.