Future of JavaScript – ECMAScript 6 (ES2015) Block Scoping

  • Article

This tutorial series will take a look at the future of JavaScript. It will take an in-depth look at ECMAScript 6 (ECMAScript 2015), the latest version of the standard for JavaScript. Throughout the series, you will learn about new language features and what you can build with them. You are expected to have an understanding of JavaScript.

Level: Intermediate to Advanced.

Part 2 - Let's Talk About Scoping

Welcome to the second part of the Future of JavaScript tutorial series. We will be discussing the introduction of block scoping, let & const and why this will make your code less prone to errors. NOTE: If you’re unfamiliar with scope, binding and contexts, be sure to read these great articles.

Let's Talk About Scoping Prior to ES2015

New and even seasoned JavaScript developers have fallen prey to the scoping system in JavaScript. Even expert developers coming from other languages have also fallen prey. Until only very recently, JavaScript variable scoping could only have been bound at the function-level. In other words, every time you declared a variable, whether it was declared in an if statement or a for-loop, the variable scope was set to the function-level.

 1234567
 
 var foo = 'Canadian Developer Connection';console.log(foo); // Prints 'Canadian Developer Connection'if (true) {  var foo = 'BAR';  console.log(foo); // Prints 'BAR'}console.log(foo); // Prints 'BAR'

Function-level variable scoping was particularly troublesome if you have picked up the habit of reusing variable names. If you were a Java, C# or C++ developer, this was probably already ingrained in your coding habits especially when it came to placeholder variables such as the index variable in for-loops or the name of an object re-instantiated in different parts of the function.

JavaScript hoists variables to the top of the function no matter where they were declared in the function enforcing a function-level variable scoping. This phenomenon is called “hoisting” and is frequently an interview question for candidates for front-end web developer positions. The following code:

 12345678
 
 var foo = 'JS';if(!bar) {    console.log(foo + ' ' + bar);    // Prints ‘JS undefined'}var bar = '2015';console.log(foo + ' ' + bar);// Prints ‘JS 2015'

is really executed like this:

 123456789
 
 var foo, bar;foo = 'JS';if(!bar) {    console.log(foo + ' ' + bar);     // Prints 'JS undefined'}bar = '2015';console.log(foo + ' ' + bar);// Prints 'JS 2015'

ECMAScript 6 introduces block-level scoping using two new syntax keywords; let & const.

Introducing Block-Level Scoping with let & const

ECMAScript 6 allows you to scope at the block-level using two new keywords. Variables declared in different blocks e.g. if blocks, for-loop blocks, while-loop blocks, anything with a curly braces {} surrounding them, even naked curly braces {}, will be bound only to that scope. To declare a variable as scoped to the block-level, you use the ‘let’ keyword instead of `var`.

 1234567
 
 let foo = 'JS';console.log(foo); // Prints 'JS'if (true) {  let foo = 'BAR';  console.log(foo); // Prints 'BAR'}console.log(foo); // Prints 'JS'

ES6 also introduces a construct for single-assignment variables scoped to the block-level. This is done through the new ‘const’ keyword. Variables declared with ‘const’ can only be assigned once and is very useful for declaring “magic” variables such as Pi or the Boltzsmann constant or other variables that should never be modified past the initial assignment.

 123456789
 
 const foo = 'JS';console.log(foo); // Prints 'JS'if (true) {  let foo = 'BAR';  console.log(foo); // Prints 'BAR'}// foo = 'BAR';// The above line causes an error due to the variable being const.console.log(foo); // Prints 'JS'

Why you should care?

Introducing ‘let’ and ‘const’ in ECMAScript 6 allows developers to be more explicit in declaring variables and reduces the potential for scoping errors. In most cases, especially if you were already aware of ‘hoisting’ and function-level scoping, you can replace your usage of ‘var’ with ‘let’ without any other significant change to your code. You’ll save yourself serious headaches and make it easier to bring in developers who know other languages. There’s no excuse. So… JUST DO IT!

P.S. You might need to transcompile your code down to make sure you it works on older browsers that don’t have support for ES6. This topic will be covered in a future article.

What's Next?

In the next parts of this tutorial series, I will be discussing different language features such as classes & modules, generators & iterators, block scoping, arrows, and more. I will also be sharing strategies for how best to manage a transition to ES6 either through transcompilation or using shims for different features. Stay tuned for the next edition!

You can always reach me through Twitter or LinkedIn.