Overview: ES6

October 22, 2014

Blog | Technology | Overview: ES6
Overview: ES6

ECMAScript is the formal name for the development language commonly referred to as JavaScript. ECMAScript 6 (or ES6, also often referred to as “Harmony”) is the upcoming major release of its language specification. The current draft specification is updated frequently and is a great place to dive into the details of the language. If you’re interested in learning even more, check out the es-discuss mailing list, summary Twitter feed or even the ES Wiki.

The TC39 committee, an arm of Ecma International, the industry association dedicated to the standardization of ICT and CE,  has been plugging away at the ECMAScript 6 specification for a few years now. Rumor has it they plan to submit it for approval in December. The specification has been pretty stable (no large new features added) for awhile though, and a number of experimental implementations of the new features already exist.

Here’s a list of the major features coming out in the next release:

  • Arrow functions

    var square = x => x * x;
    var complicated = x => {
        var sq = square(x);
        return 2*sq-x+2;
    };
    
  • Default function parameters

    var f = (x, y=2) => x*y;
    
  • Destructuring

    var {error, result} = {error: 'An error!', result: null};
    var [one, , three] = [1, 2, 3];
    
  • Shorthand object literal initializers

    var number = 42;
    var obj = {
        [number * number]: 'value!', //Computed properties
    
        __proto__: { what: 'A prototype at initialization!' },
    
        number, //shorthand for number: number
    
        someMethod() { //methods!
            return super.what; //Complete with super calls!
        }
    }
    
  • ... (The spread operator)

    var sum = (a, ...rest) => a+(rest.length ? sum(rest[0], rest.slice(1)) : 0);
    
  • const & let

    const A_CONSTANT = 42; //Immutable!
    if (A_CONSTANT == 42) {
        let a = 3; //Block scoped!
    }
    
  • Modules

    module 'data' {
        function readVars() { //private!
            //...
        }
    
        export const CONFIG_VAR = 42;
    
        export function reload() { //public!
            readVars();
            // ...
        }
    }
    
    ///later...
    
    
    import {CONFIG_VAR, reload} from 'data';
    console.log(CONFIG_VAR);
    
    
    //And also
    module JSON from 'http://json.org/modules/json2.js';
    
  • classes and super

    class Bee extends Insect {
        constructor() {
            super();
            // ...
        }
    
        collect() {
            //...
        }
    
    
        static populationCount() {
            //...
        }
    }
    
  • for..of loops & iterators

    var elems = ['a', 'b', 'c']
    for(let elem of elems) {
        console.log(elem); //'a', then 'b', then 'c'
    }
    
  • Generators

    let numbers = function*() {
        let x = 0;
        while (true) {
            yield x++;
        }
    };
    
    
    for(let n in numbers()) {
        console.log(n);
    } //Runs forever
    
  • Octal & binary literals

    var octal = 0o777;
    var binary = 0b1011;
    
  • Template strings

    var multiline = `
        Multiline strings are
        Useful things - these template strings
        Like string literals
    `
    
    
    var tagged = escapehtml`Also interesting.`
    
  • New regexp flags

    ' '.match(/./u)[0].length //2! /u matches by unicode codepoint!;
    
  • Map, Set, WeakMap, WeakSet

    let map = new Map();
    let obja = {a: 2};
    let objb = {b: 4};
    map.add(obja, 4);
    map.add(objb, 2);
    map.get(obja); //Returns 4
    
  • Proxy

    //I reccomend you read the article here. I'm not biased or anything.
    
  • Reflect

    var obj = {
        some: 'thing'
    };
    
    
    Reflect.keys(obj);
    //The reflect API is fairly large and nuanced, mirroring the Proxy object API
    //Things like Reflect.defineProperty() exist (though Object.defineProperty won't be removed)
    
  • Promise

    var prom = new Promise((resolve, reject) => {
        resolve(42);
    });
    prom.then((n) => console.log(n));
    
  • Object.is

    Object.is(NaN, NaN); //true
    Object.is(-0, +0); //false
    Object.is(null, undefined); //false
    
  • New String, RegExp, Array, Number, and Math standard prototype methods and functions

    Math.EPSILON //Smallest delta possible in a JS number
    Math.isNaN()
    Math.imul(Math.pow(2^32) - 1, Math.pow(2^32) -1); //32-bit c-like fast multiplication
    
    
    'a string'.contains('str');
    'foo'.repeat(2); //'foofoo'
    
    
    Array.from(arguments); //puts list-like objects into an array
    Array.of(23); //new Array(...) without one-argument-is-length behavior
    
    
    var arr = ['a', 'b', 'c'];
    arr.findIndex(x => x == 'b'); //2
    
    
    //Iterators:
    arr.entries(); // [0, 'a'], [0, 'b'], ...
    arr.keys(); //0, 1, ...
    arr.values(); //'a', 'b', ...
    
    
    Object.assign({}, {options: ['a', 'b']}, {moreoptions: 'cool'}); //merges objects
    
  • Symbols

    var a = Symbol();
    var b = Symbol();
    
    
    var obj = {
        [a]: 4,
        [b]: 2,
        [Symbol.iterator]*() {
            yield this[a];
            yield this[b];
        }
    };
    
    
    for(let number of obj) {
        console.log(number);
    }
    
  • ‘Proper’ tail calls

    var internal = (n, accum) => (n === 0) ? accum : internal(n-1, accum*n);
    var factorial = (n) => internal(n, 1);
    factorial(-1);  //No longer errors with:
                    //'Uncaught RangeError: Maximum call stack size exceeded'
                    //Instead, it will (correctly) never return
    
  • And more

You can check out how much your browser supports here.


Check back for our next post, where we’ll start to look at some actual code. Also, be sure to reach out on Twitter or LinkedIn to find out about all of our posts, and don’t forget we’re hiring

Wesley Wigham

Developer
Tags
  • JavaScript
  • Review

Recent Work

Check out what else we've been working on