Scopes in Javascript with DevTools

Shaurya Jain — Thu, 24 Mar 2022 13:05:49 +0000

An overview for Scopes in JS with the help of DevTools.

Before we start let's quickly go over some basic terminology.

var : Use to declare function-scoped /local-scope or globally-scoped variable, optionally initialising it to a value.

let: The let statement declares a block-scoped local variable, optionally initialising it to a value.
Redeclaration is not possible, but reassignment is possible.

const: Constants are block-scoped, The value of a constant can't be changed through reassignment, and it can't be redeclared.
However, if a constant is an object or array its properties or items can be updated or removed.

block: when we want to treat the multiple lines of code as one aka compound statement we put it in '{}', a block is used with if..else, switch, loops But '{}' used with function is not block scoped but function-scoped.
In strict mode, starting with ES6, functions inside blocks are scoped to that block. Prior to that, block-level functions were forbidden in strict mode.

closure: A closure is the combination of a function bundled together with references to its surrounding state (the lexical environment).

Scope: The current context of execution. The context in which values and expressions are "visible" or can be referenced.

Scope in Browser DevTools

We will be focusing on var, let and const and how they are scoped.

Types of Scope in JS

Fig : Showing Local, Closure, Script and Global present in Scope.

Global :

A var variable declared outside a function, becomes Global.

Script :

let and const variables declared outside a function or block, goes in Script.

When JS code Executes, in memory allocation phase var, let and const are given undefined values.

The catch is, we can access the var variable before initialising its value in the code execution part, till then it will give undefined.

But let and const will not behave the same and will give an error (ReferenceError) and are only accessible once they are defined, this is known as Temporal Dead Zone (TDZ).

Despite the pros and cons both Global and Script scope are at the same level i.e., they are present in the Global Execution Context (GEC).

Script and Global scope is always present via Scope Chaining.

Fig : var, let and const declared at Global Scope.

Fig : Script and Global are created in scope.

Functional Scope :

Any variable defined inside a function becomes Local to its function and is not accessible outside. var, let and const all become Local scoped.
Functions and blocks defined within the function have access to it.

Fig : var, let and const declared in Function.

Fig : Local is created in scope for var, let and const.

Block :

let and const variables defined inside a conditional statement or loops come under Block scope. For var variables, if a block is defined outside the function
it goes to Global scope and if it's inside a function it goes in the Local scope of the function. Also, if there is any name conflict with var outside the block, it will overwrite the outside var value.
Block scope is destroyed once its execution is completed.

Fig : var, let and const declared in Block at Global Scope.

Fig : Block is created in scope for let and const. While var a overrides the global value.

Fig : var, let and const declared in Block in Function.

Fig : Block is created in scope for let and const. While var moves in the Local scope of Function.

Closure :

It's created for functions and contains the references of values
which are not defined in the function's Local scope or in Global or Script, but are present in the functions in which this function is defined.
It will only form Closure with those values which are used in this function.

Fig : Function being returned from a Function and forming a Closure in scope.

Fig : Scope of Higher Order Fucntion.

Fig : Scope of Returned Fucntion, forming Closure with the Local scoped values of Higher Order Fucntion.

Fig : An Example of 3 level Nested Function forming Closure.

Fig : Scope of grandparent Function.

Fig : Scope of parent Function, Forming forming Closure with grandparent's Local scoped values which are used by it or by its child function.

Fig : Scope of child Function, Forming forming Closure with parent's as well as of grandparent's Local scoped values which are used by it.

Fig : Example showing Closure is a refrence to the value and not an Actual value.

Fig : Closure Formed with grandparent has the new value of var a.

Fig : Higher Order Function with a Block.

Fig : Parent scope just before block completion.

Fig : Child function forming Closure with only var a from block as it was moved to Local scope of parent and let and const being Blocked scoped were destroyed.

DEV Community: Shaurya Jain