Scope & Closures in JavaScript

When diving deeper in JavaScript, Closure & Scopes are terms that not always makes sense, scopes and closure will mostly be part of your technical interview as well (even though most developers are not entirely sure about what they are or how they work).

But long story short, they both are not really something enlightening as you were always (or mostly) using them, so don’t expect to have your Eureka! moment after reading this but hopefully expect to understand and explain them when you need to.

Disclaimer: all below are meant to be a theory standpoint and not a technical view about how to can take advantages of scope and closure (or their risk) as we can have a separate article for that

Scopes

Scope is basically my where-to find variables or functions (yes that simple) and it will state where my var a = 10; exists and is available for usage. Scopes are created either by function or block scope.

Function Scope

A function declaration will create a new scope where variables & functions can be declared. For a function test() I create a basket where variables will reside. If a var x = 10; is executed within function test() then x is available for the test scope.

Note that if not in ‘strict mode’ we were to declare a variable like x = 10; within the scope of test() then this will bubble until the global scope and get allocated and assigned there due to the missing var keyword. If on ‘strict mode’ then this will throw and exception

Block Scope

Block scope is basically a wrapper for execution lines enclosed by { }, var declarations are not affected by block scope as they behave as function scope, whereas let, const and function respects block scope.

Shadowing

Shadowing is a common issue with new JavaScript developers where by mistake you refer to a different scope value not understanding the layers that are being created and how availability is being affected.

Variable x is being shadowed in the test scope
No re declaration exception due to const being block-scope
Variable x is replaced as being handled by function-scope

Closures

Closure is much easier explained when we understand scopes, as closure is basically the enclosing of variables or functions residing on an upper level of our current execution context. Meaning that closure is basically the mechanism in which JavaScript remembers parent scopes even if the code was executed later as a result of a callback.

Variable x is remember even when the code was executed later

Due to this, sometimes closures can create memory leaks if not taken care or cleaning timeouts and intervals.

TL;DR;

Scope is my ‘where to get things’ on my current execution context and we have two types of scope: function and block.

Closure is the mechanism that allow JavaScript to remember parent scopes even when the execution occurs separately or later in time.

Example

The example below shows the creation of a MakeCounter utility that encloses the count variable for each instance created by MakeCounter.