Scoping in Javascript
Scoping is important because we want to as much as possible follow the Principle of Least Privilege when writing programs — that is, if you don’t need to reveal your variable to the rest of your program, then keep its scope isolated. This important for many reasons, including reducing the chance of creating bugs/side effects, and increasing the efficiency of garbage collecting of variables while your program is running.
There are many articles out there on this topic so I wanted to really quickly break it down in a way that makes sense to me in 2020 (because things do change as technology and browser support change in the JS community).
One Scope To Rule Them All
There is really one type of scope if you are writing JS in ES6, and that is the block scope, or local scope. Function scope behaves the exact same as block scope, as long as you are using the ES6let
keyword to declare your variables.
The reason that so many articles are written on this topic is that before the introduction of let
and const
keywords in ES6, variables declared with the var
keyword would actually operate differently if declared or initialized in a function or in a block. A great example of this discrepancy is below : did you know that you can actually access ‘i’ from outside your for loop? This is because of the weird behavior of var
. For the rest of the article I will use the keyword let to define my variables.
for(var i = 0; i < 10; i++){
console.log(i);
} console.log("i : " + i) // prints "i : 10"
Before we get into what block scope is, let’s talk about the global scope.
Global Scope
Variables that are not scoped at all are referred to as being in the “Global Scope” that is essentially saying that they are accessible at the root of the document. This is pretty easy to understand — they are accessible inside any function, and any block on the page.
var global = "global";
var i = 0;while (1 < 10) { console.log(global); // prints "global" ten times
i ++; }
If you define a variable without using any keyword, inside a block, it will default for the global scope, unless you specify ‘use strict’ at…