JavaScript ES2015: Block Scoping


Prior to ES2015, JavaScript supported only function level scoping unlike other languages like C++/Java which has block level scoping. With ES2015, in addition to function level scoping, JavaScript also supports block level scoping with the help of “let” and “const” keywords.

But before we get into details of ES2015 stuff, let’s discuss what we exactly mean by phrases “function level scope” and “block level scope”.

Block Level Scope: Simple example using C++

For example, in C++, we have declared a variable ‘message’ inside if-condition. When we print the string message inside if condition itself, it works without any problem.

But what if we try to print the string after the closing braces of if-condition? It throws an error saying “message” is not declared in this scope.


Function level Scope:

Now let’s look at the function scope in JavaScript.

In the code snippet above, we have declared and defined a variable message inside the if-condition. Then we print that value using console.log(). We get the output as expected.

The tricky part is the fact that we are also able to print the value of variable ‘message’ outside the if-condition. This is because in JavaScript functions declared using keyword ‘var’ have function scope by default. JavaScript runtime looks for closest enclosing function relative to the variable declaration and sets it as the scope for that variable.

But how does JavaScript runtime does this? Well it is worth mentioning here that JavaScript runtime internally changes our code and moves all variable declarations to the starting of the function. This is known as variable hoisting.  So our code in the current example is effectively changed to below code snippet.


To dive deeper into the concept of variable scopes in JavaScript prior to ES2015, refer to the article https://tutorialspoint.dev/slugresolver/understanding-variable-scopes-in-javascript/

So now when we are clear with what is function scope and block scope, let’s see how ES2015 achieved block scopes in JavaScript. From ES2015, in addition to keyword‘var’, two new keywords are available to declare variables.

  1. Let: Variables declared using ‘let’ keyword are similar to variables declared using ‘var’ keyword with just once difference. Variables declared using ‘let’ will have block scope and will not get hoisted to the starting of the function. So if we try to access those variables outside their block scope, we’ll get a reference error saying variable is not defined.


          Also variables declared with “let” keyword can be redefined but not redeclared.


  1. Const: Variables declared using “Const” keyword are similar to variables declared using “let” keyword with an additional feature that once declared and defined, their value cannot be changed. Primary use of Const variables is to make read only constants like


          Also, it is compulsory to define const variables at the time of declaration itself.js10

So in this tutorial, we looked upon two new keywords which can be used to declare variables in JavaScript. Once you start using these keywords while declaring variables, there will be rare cases where you will need to use the ‘var’ keyword again. So get your hands dirty with these new keywords and let me know your views in comments.


This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment



load comments

Subscribe to Our Newsletter