A Rundown of the Best New Features in ES2015

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

The arrow and spread operators, the new class syntax, the let and const keywords are very visible additions to JavaScript, and their usage has spread like wildfire. These new language features reduce the amount of boilerplate code developers write, simplify JavaScript code and make developer intentions clearer. And browser support is particularly good including most modern browsers including Microsoft Edge. This article will give you a rundown of the best new features in ES2015.

ECMAScript is the scripting language standardized by ECMA International – a standards setting body - as ECMA-262. This organization has the very difficult task of setting the standards for JavaScript implementations. The ECMAScript standard has gone through several editions. A new version of the standard has been published this summer. You may have heard it called ECMAScript 6 (ES6), ECMAScript 2015(ES2015), Harmony or even JavaScript 2015. I will use the term ES2015 for the rest of this article.

The new language features introduced in ES2015 improve JavaScript by making it simpler, more readable and less error-prone. This article will introduce block-level scoping and the new let and const keywords which simplifies scoping, making code easier to understand, the new class syntax that reduces the amount of boilerplate code you have to write to create object-oriented style inheritance, and the new arrow and spread operators which reduce the amount of keystrokes developers have to do.

Block Scoping - 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.

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:

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:

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

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

Block Scoping - Introducing let & const

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

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

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

const foo = 'JS';
console.log(foo); // Prints 'JS'
if(true){
  letfoo = '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'

Introducing let and const in ES2015 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.

Continue reading %A Rundown of the Best New Features in ES2015%

by Rami Sayar via SitePoint