ECMAScript 6: The Next Version of Javascript (Variables and Scoping)

Share on Facebook0Tweet about this on Twitter0Share on LinkedIn4

 

ECMAScript 6 or ES6 is an upgrade to the next version of Javascript. ES6 brings a lot of very exciting features that will enable writing more structured, modularized and maintainable code natively.

 

In this post, I will be covering the following topics:

• ES6 Availability and Features

• ES6 Variables and Scoping

• Benefits of using ES6 variables

ES6 Availability:

ECMAScript 6 was released in 2015 and major browsers started implementing ES6 features slowly. You can go here to find out which ES6 (ECMAScript 6) feature is available within each browser today. At the time of writing this blog, there are lots 0f ES6 features implemented for all the major browsers already :).

 

Screen Shot 2016-07-23 at 12.00.24 PM

 

In order to support your ES6 code to all the browsers, you might want to use a transpiler. Babel is currently one of the popular Javascript transpilers at the time of this blog post. A transpiler basically will transform your ES6 into ES5 for the older browsers.

 

ES6 Features:

• ES6 offers two new ways of declaring variables (let, const) that will help us avoid uncertainty in our code, especially the variable scoping issue.

 

• Modules, classes, and other features can be implemented natively without any third party libraries.

 

• Some of the features such as Classes are syntactic sugar that means behind the scene the code is implemented in an old way. However, I find it is very elegant to read and understand.

 

• Generators, proxies etc. are the other brand new feature only available in ES6.

 

• ES6 features enable you to build complex applications that are more maintainable and JS engines to compile and run the code faster.

 

Now, let’s look next at ES6 Variables and Scoping.

 

ES6 Variables (let and const):

Until ES5,  there was one way of declaring variables using the keyword var.  In ES6,  let and const keywords are used to create a variable instead of var. Variables declared with the var keyword are function-scoped variables, which means these variables are living inside the function block.  On the other hand,  let and const are block scoped, meaning that this variable exist within the current block.

 

Here is the sample code with “var” (function-scoped).

 

var sum = 3;

function add(a, b) {

if (false) {
var sum = a + b ; // this variable exist inside the whole add() function block
return sum;
}

return sum; // this will return undefined
}

console.log(add(1,2)); // undefined

 

When you invoke an add() function in the code above, the variable “sum” that resides inside the if statement will be initialized because it is  function-scoped even though the if statement is false. That will create a lot of issues.

 

Here is the sample code with “let” (current block-scoped).

 

let sum = 13;

 function add(a, b) {

  if (false) {
    var let = a + b ; // this variable exist inside if statement block
    return sum;
  }

   return sum; // this will return 13
 }


console.log(add(1,2)); // 13

 

When you invoke an add() function in the code above, this time, the variable “sum” that resides inside the if statement will be initialized only if the statement is true because it is block-scoped. At this time, the variable “sum” will be set to the value that was declared in the first line. Pretty cool eh!

 

OK, you may now wonder, when do I have to use the keyword “const“. You have guessed it, whenever you want to create a variable that is immutable or unchangeable, you can use “const“. I would highly recommend you to use “const” in the creation of all variables. You will surprisingly see that you will declare a lot of constant variables in your code.  In contrast,the “let” keyword can be used to declare a variable that can be mutable and changeable.

 

IMPORTANT:

When you write a code with ES6 next time, you will be tempted to use the “var” keyword to create a variable. I would highly recommend you to avoid thevar” keyword completely in your new code to avoid unnecessary scoping issues.

 

Conclusion:

Now you know ES6 availability and features and the benefit of using ES6 variables and scopes over “var”.

 

There you have it! I hope you enjoy!  Feel free to check out and enrol in our online Javascript and Jquery course. Contact us for one FREE virtual online class from anywhere.

 

Leave a comment if you have any questions or suggestions. If you like it, don’t forget to share it with your friends. Thanks for reading!

 

 

Share on Facebook0Tweet about this on Twitter0Share on LinkedIn4

About the author
Raja Thangarasu

Raja loves building Web and iOS Applications. He is always curious to explore latest technologies and concepts. He's working as a UI Developer and he is teaching various technologies at SoftAuthor. He likes to write blogs and create youtube videos when he has time to share his knowledge to the world. Visit his website for more information about him.

Sign up for our blog updates and newsletters!


100 % privacy. I hate spam as much as you do!