Preparing for ECMAScript 6

The Standard ECMAScript 5 (referred to as ES5) was originally published late 2009 and has since moulded JavaScript to become one of the worlds most important languages.

ECMAScript 6 is the upcoming version of the ECMAScript standard and expects ratification some time around June 2015. ES6 is a significant update to JavaScript, and the first update to the language since 2009. Implementation of these features in JavaScript engines is well underway as we speak. Let’s dive in and see what ES6 is all about.


The Better Parts

Doug Crockford lists out the following as some of the better parts to the ES6 specification with a few I find of great use – specifically template literals (think handlebars).

  • Proper Tail Calls : Improves performance and uses less memory. Also enables a whole new kind of programming.
    function factorial(n, acc = 1) {
        'use strict';
        if (n <= 1) return acc;
        return factorial(n - 1, n * acc);
    }
    
    // Stack overflow in most implementations today,
    // but safe on arbitrary inputs in eS6
    factorial(100000)
  • Ellipsis (a.k.a “rest” or “spread” operator) : A great way of writing functions that deal with a number of arguments.
    function f(x, y=12) {
      // y is 12 if not passed (or passed as undefined)
      return x + y;
    }
    f(3) == 15
    
    function f(x, ...y) {
      // y is an Array
      return x * y.length;
    }
    f(3, "hello", true) == 6
    
    function f(x, y, z) {
      return x + y + z;
    }
    // Pass each elem of array as argument
    f(...[1,2,3]) == 6
  • Modules : Helps remove us from real global variables that pollute the namespace (a really good thing btw) and does a better job at managing asynchronousity.
    // lib/math.js
    export function sum(x, y) {
      return x + y;
    }
    export var pi = 3.141593;
    
    // app.js
    import * as math from "lib/math";
    alert("2π = " + math.sum(math.pi, math.pi));
    
    // otherApp.js
    import {sum, pi} from "lib/math";
    alert("2π = " + sum(pi, pi));
  • Let : This new statement works like var, but respects block and scope.
    function f() {
      {
        let x;
        {
          // okay, block scoped name
          const x = "sneaky";
          // error, const
          x = "foo";
        }
        // error, already declared in block
        let x = "inner";
      }
    }
  • Destructuring : Syntactical sugar to make things a little easier to express.
    // list matching
    var [a, , b] = [1,2,3];
    
    // object matching
    var { op: a, lhs: { op: b }, rhs: c }
           = getASTNode()
    
    // object matching shorthand
    // binds `op`, `lhs` and `rhs` in scope
    var {op, lhs, rhs} = getASTNode()
    
    // Can be used in parameter position
    function g({name: x}) {
      console.log(x);
    }
    g({name: 5})
    
    // Fail-soft destructuring
    var [a] = [];
    a === undefined;
    
    // Fail-soft destructuring with defaults
    var [a = 1] = [];
    a === 1;
  • Weak Map – Adds new functionality but has a terrible name. Any object value can be a key. Currently ES5 does not allow that. If a key becomes unrooted the garbage collector can take it out of the map.
    // Sets
    var s = new Set();
    s.add("hello").add("goodbye").add("hello");
    s.size === 2;
    s.has("hello") === true;
    
    // Maps
    var m = new Map();
    m.set("hello", 42);
    m.set(s, 34);
    m.get(s) == 34;
    
    // Weak Maps
    var wm = new WeakMap();
    wm.set(s, { extra: 42 });
    wm.size === undefined
    
    // Weak Sets
    var ws = new WeakSet();
    ws.add({ data: 42 });
    // Because the added object has no other references, it will not be held in the set
  • Template Literals – Strings that can include embedded expressions. This is sometimes referred to as string interpolation.
    // Basic literal string creation
    `In JavaScript '\n' is a line-feed.`
    
    // Multiline strings
    `In JavaScript this is
     not legal.`
    
    // String interpolation
    var name = "Bob", time = "today";
    `Hello ${name}, how are you ${time}?`
    
    // Construct an HTTP request prefix is used to interpret the replacements and construction
    GET`http://foo.org/bar?a=${a}&b=${b}
        Content-Type: application/json
        X-Credentials: ${credentials}
        { "foo": ${foo},
          "bar": ${bar}}`(myOnReadyStateChangeHandler);
  • Promises – Allows easier and cleaner asynchronous coding. Adds the Promise() constructor, along with the ‘all’ and ‘race’ utility methods to the language itself.
    function timeout(duration = 0) {
        return new Promise((resolve, reject) => {
            setTimeout(resolve, duration);
        })
    }
    
    var p = timeout(1000).then(() => {
        return timeout(2000);
    }).then(() => {
        throw new Error("hmm");
    }).catch(err => {
        return Promise.all([timeout(100), timeout(200)]);
    })

Note: Code examples based off Luke Hoban’s great great overview.


Why Write ES6 Today?

I’m guessing by now you’re still wondering why you should start writing ES6 right this very minute? The reason you should start writing ES6 today is because first and foremost it’s always good for developers to keep ahead of the game. Also ES6 really helps to improve the language in many aspects in terms of syntax, functionality and even performance.

There’s really no excuse not to get started immediately even if it’s using a small portion to start. Remember… baby steps.


Getting Started with ES6

If you’d like to start writing ES6 right this very minute the good news is you can. The bad news is you’ll need some extra tooling to help get you there until the standard has wider support.

Addy Osmani also has a great repo where he provides ES6 equivalent examples in ES5 that I definitely encourage you to take a look at later.

Features like modules in ES6 are not supported yet by any browser nor in Node.js. This means if you want to write modules you’ll need a transpiler using a grunt task like grunt-babel that turns ES6 code into vanilla ES5 (there’s also gulp-babel for you Grunt Hatahs.).

This Grunt task also supports AMD allowing developers to integrate ES6 modules into their current environment, independent of legacy/current modules style choice.


Words of Wisdom

Since we’re discussing standards we should always keep in mind as we write code that standards are great. They help maintain a cohesiveness that’s understood globally, but standards are not meant to be Draconian Law.

Remember to experiment and accept the occasional failure when taking the time to learn new things in order to update your knowledge in a specific area. As we all know, this industry moves fast so don’t be afraid to take bite sized amounts to digest.


Helpful Tools & References

Want to become a better web developer?

Join over 25,000 other developer & designers who get awesome links to the best news and articles each week delivered directly to their inbox.

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

3 Comments

  1. Very good summary. I had not heard of “Destructuring” until now. Thanks for the quick read.

    • Definitely! Thanks for reading Michael and glad I helped enlighten 🙂

  2. CSSConfAU 2015 NEWS you might sneak to one of our delegates http://goo.gl/9vIsH2 who attended and see what he learnt.

This post currently has 3 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *