ES6: The best parts

ES6 (or ECMAScript 2015 as it is officially titled) offers a lot of new features, here are the ones that you should be using now (if your end product doesn’t lean too heavily on older browsers), and one that you should avoid.

Note

Browser support for these features is obviously a moving target, to verify if the features below have support in a particular browser, refer to this chart.

Arrow Functions

Arrow Functions are a shorthand way of writing out functions. Arrow functions make our code more concise, and simplify function scoping and the this keyword. Using arrow function allows us to avoid typing the function keyword, return keyword (it’s implicit in arrow functions), and curly brackets.

Instead of this:

function foo(x) {
    return x;
}

you would write this:

var foo = (x) => {
    return x;
}

It’s good to note that parentheses are optional when there is only one parameter:

var foo = x => {
    return x;
}

Oddly enough, parentheses are required when there are no parameters:

var bar = () => {
    return 'bar';
}

Object Literal Syntax

Arrow functions, like function expressions, can be used to return an object literal expression. The only caveat is that the body needs to be wrapped in parentheses, in order to distinguish between a block and an object (both of which use curly brackets).

ES5

var createPerson = function (name,age) {
    return {
        name: name,
        age: age
    }
}

ES6

var createPerson = (name,age) => ({
    name: name,
    age: age
})

Even better, if the objects name/values are the same, you can shorten to this:

var createPerson = (name,age) => ({
    name,
    age
})

Odds and Ends

This

The ‘this’ keyword words differently in arrow functions. For example, methods like call(), apply(), and bind() will not change the value of this when being used in an arrow function.

Constructors

Attempting to use the keyword ‘new’ with arrow functions will throw an error. Arrow functions (as methods do) lack a prototype property or other internal methods.

Generators

Arrow functions can not be used as function generators in ES6. Using the yield keyword in ES6 will throw an error. If you need a generator in ES6, use the new generator syntax.

Support

As of this writing, support for arrow functions is widespread in:

  • Chrome
  • Safari
  • Firefox
  • MS Edge

If you need to support Internet Explorer (any version), be advised that you will need to run your code thru a transplier, like Babel.


Method definition shorthand

Method definitions in ES6 get a shorthand syntax.

ES5

var obj = {
    foo: function() {
        // code
    },
    bar: function() {
        // code
    }
}

ES6:

var obj = {
    foo() {
        // code
    },
    bar() {
        // code
    }
}

let and const

Block level scoping is now possible with let. In short, let is the new var. const (short for constant) is an immutable binding of a value. Utilizing an assignment operator, unary or postfix (– or ++) on a const variable throws and error.

How and where to use:

  • Use const for any value that will not change.
  • Use let to define a variable that can or will change.
  • Avoid using var in ES6.

Support

As of this writing, support for let and const is widespread in:

  • Chrome
  • Safari
  • Firefox
  • MS Edge

If you need to support Internet Explorer (any version), be advised that you will need to run your code thru a transplier, like Babel.


Modules

Modules make it easier to reuse blocks of code and import them in to your files. Very similar to javascript module loaders like AMD, CommonJS. Runtime behaviour defined by a host-defined default loader. Implicitly async model – no code executes until requested modules are available and processed.

// modules/math.js
export function square (x,y) {
    return x * y;
}

export var length = 5;
export var width = 6;


// app.js
import * from 'modules/math'
console.log(square(length, width))

Support

As of this writing, support for javascript modules is half implemented. import and export are supported in Chrome and Firefox, but no support exists for the actual loading of the files yet.


Template Strings (Template Literals)

Taking a page out of Mustache’s templating strings, ES6 allows you to finally do away with this:

var msg = 'Age: ' + age + ' | Name: ' + age;

and use this:

var msg = `Age: ${age} | Name: ${name}`;

Using backticks instead of quotes to open and close the string, and using the variables wrapped in parentheses preceded with a $ achieves the desired result.

Also of note, using this you can have a multiline string.

var msg = `Age: ${age}
| Name: ${name}
| DOB: ${dob}
| Address: ${address}
`;

Support

As of this writing, support for template strings pretty widespread. Of course, there is no support in IE, so if you need IE compatability, you will need to run your code thru a transplier, like Babel.


And finally, the one you should avoid:

Classes

ES6 introduces the Class keyword to Javascript. But before you go getting excited (or upset, depending upon your penchant for Object Oriented programming), there are a few things to consider.

First, is that Javascript is and still remains a prototypical language. Just because it now features the Class keyword doesn’t change that fact. Classes in ES6 are just syntactical sugar on top of the prototypical inheritance present in Javascript. As such, by using this syntactical sugar, you are pretending that Javascript operates in a way that it doesn’t. For some smaller instances, this nay be alright, but it can really confuse people who are just getting familiar with prototypical inheritance, and who might expect Javascript to act like a fully object oriented programming language, which it does not.