JavaScript: The Birth Of Block Scope

In JavaScript, Traditionally there were Global and Local scopes. Any variable that is declared inside a function has Local Scope. Any variable that is declared outside any functions has Global Scope.

Before getting on to the block scope, let's discuss how the scope chain works.

Scope Chain

In the below example, the sibling functions func2 and helper have access to the variables declared in their common parent function func1 and the Global context.

Image for post
Image for post
The Scope Chain

The scope chain always flows downwards.

Let's see how the JavaScript engine looks for a variable when required.

Task #1: Access variable a from within the context func2

Is variable a exist in func2? — No.

Does func2 have any parent lexical environment? — Yes. func1!

Is variable a exist in func1? — No.

Does func1 have any parent lexical environment? — Yes. The Global context.

Is variable a exist in the Global context? — Yes! Returning a.

Task #2: Access variable d from within the context func2

Is variable d exist in func2? — No.

Does func2 have any parent lexical environment? — Yes. func1!

Is variable d exist in func1? — No.

Does func1 have any parent lexical environment? — Yes. The Global context.

Is variable d exist in the Global context? — No.

Does the Global execution context have any parent lexical environment? — No! It is a Reference Error!

In JavaScript, a variable can be accessed if it exists in the current lexical environment or in the preceding lexical-environment-chain which extends on to the global context. Every search ends in the Global context.

Shortcomings With The Broader Scopes

In the above example, the variable a has a Global Scope. It is never advised as it allows any function to access or even modify the value.

The function scope can also get really bloated. Nothing stops a programmer from writing a function with thousands of lines. In the below example, the incrementors i and j are visible throughout the function func1 which technically may not end.

The usage of var also makes the variables accessible even before their declaration. That is hoisting and that is for another discussion.

Block Scope

With the introduction of let and const in the ES2015, the scope of the variables is reduced to the block they exist in. A block is anything wrapped around a pair of curly braces {}, mostly a loop or a conditional statement.

The reduced scope leads to reduced noise and pollution. var is going to be there in JavaScript maybe forever to allow the legacy systems to run. So, it is good to embrace let and const to create a pollution-free JavaScript environment.

Written by

Full Stack Developer. JavaScript, React, Node, GraphQL.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store