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.

js1
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.

js2

Function level Scope:

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

js3
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.

js4


To dive deeper into the concept of variable scopes in JavaScript prior to ES2015, refer to the article https://www.geeksforgeeks.org/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.

js6

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

js7js8

  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

js9

          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.

About the author:

“Harshit is a technology enthusiast and has keen interest in programming. He holds a harshit-jainB.Tech. degree in Computer Science from JIIT, Noida and currently works as Senior Software Developer at MakeMyTrip. He is also a state level table tennis player. Apart from this he likes to unwind by watching movies and English sitcoms. He is based out of Delhi and you can reach out to him at https://in.linkedin.com/pub/harshit-jain/2a/129/bb5

If you also wish to showcase your blog here, please see GBlog for guest blog writing on GeeksforGeeks.



My Personal Notes arrow_drop_up

Improved By : JainHarshit



Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.