ES6 – Getting Started Reply

Rick HerrmannES6, or as it is now being called js2015, is the first update to javascript since 2009.  The ES6 spec had been in the works for a while and was finalized in June of 2015.  The new features that have been added are significant and will change the way developers work with the language.  However, because the major browsers do not yet fully support ES6, using ES6 directly in the browser today is not realistic.

But there is a way you CAN start using ES6 on the web today and that is by converting it (transpiling) to ES5.  There are a number of transpilers available today but the most popular right now are Babel and Traceur.  These tools let you use the new syntax and features of ES6 but have your code converted to ES5 – which runs everywhere.

So let’s take a look at what is new in javascript 2015.

A complete list of all of the new ES6 features is beyond the scope of this article, so I’ll cover a few of the things that are easy to get started with.

Variables

The first feature that is easy to use right off the bat is the new ‘let’ keyword.  ‘let’ is the new variable declaration keyword, which essentially replaces ‘var’.  ‘let’ provides block level scoping that did not exist with ‘var’.  Although ‘var’ still exists in the language, in my opinion, there is not much reason to use it any more.

let x = 2;
console.log(x); //2
if(x === 2) {
  let y = 10;  //y is scoped to the if-block
}
console.log(y); //y is undefined

‘const’ is another new keyword which creates a read-only variable.  Attempting to assign a new value to a ‘const’ will throw an error.

Default Parameters

javascript has always been flexible about passing in function parameters.  For example this will work just fine in ES5:

function printLog(message, title) {
 //...
}
printLog('me message');

title will be undefined in printLog.  However, if you want title to have a default value you have to add

title = title || 'default title';

In ES6 this can be simplified to

function printLog(message, title = 'default title') {
 //...
}

Arrow Functions

Arrow functions have a shorter syntax than using the function keyword.  For example, this

var add = function(a, b) {
  return a + b;
}

can be written like this in ES6

let add = (a, b) => a + b;

I find this syntax to be very readable and it will save countless keystrokes.  Another benefit of using the arrow function over a function expression is that arrow functions maintain the context of the ‘this’ reference.  For example, the following ES5 code requires you to save a reference to ‘this’ in a separate variable to have access from the callback:

function timer() {
  var that = this;
  that.count = 0;

  setInterval(function() {
    that.count++;
  }, 1000);
}

But in ES6, the same function can be written as:

function timer () {
  this.count = 0;

  setInterval(() => {
    this.count++;
  }, 1000);
}

So in addition to the more concise syntax the arrow function makes dealing with the often-confusing ‘this’ reference much easier.

Next steps…

These features are easy to get started with and provide some immediate advantages.  I’ll look at some additional ES6 features in future posts.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s