What's new in ES6?

New features since ES 5

• Symbols
• Blocks {}
• Arrow Functions
• generators (yieldables)
• class
• let & const
• rest & spread
• dereferencing
• built-in Promises
• Map, Set & WeakMap, WeakSet
• Proxy and Reflect object
• ES6 Modules
• Many more...

Symbols

• Built-in type (!)
• unique over different instances
• Symbol('foo') !== Symbol('foo')

Blocks

• Isolated closure

Arrow functions

• Allows inlining of functions with fewer typing
• specific values for "this"

Generators

• Break out of procedure, making it iteratable
• use cases for avoiding callback hell (co)

Class

• constructor
• methods (not prototype.method)
• extend

let, const

• provides better optimization for implmentations
• specific scope for use cases like 'for' loops

rest ... spread

• better than argument[i] or argument.unshift

dereferencing

• shorthand for getting values from arrays and objects
• one less variable

Promises

• No longer require 3rd party modules
• Standardized on methods available

Map, Set, WeakMap, WeakSet

• Provides non-dangling way of handling garbage collection
• WeakMap, WeakSet:  Allows saving non-retaining references of objects, which would not lead to memory leaks

Proxy, Reflect

• Proxies allows you to filter output before presenting in a more efficient way
• Reflect provides APIs for metaprogramming

ES6 Modules

• There has been many different module systems, e.g.
  • AMD (require.js & friends)
  • CommonJS
  • <script src="my_last_dependency.js"></script>

ES6 Modules

• Unifies the ecosystem of modules by making it official (finally)
• Provides static modules

Wanna use?

https://kangax.github.io/compat-table/es6/

iojs --v8-options | grep "harmony"
  --es_staging (enable all completed harmony features)
  --harmony (enable all completed harmony features)
  --harmony_shipping (enable all shipped harmony fetaures)
  --harmony_modules (enable "harmony modules (implies block scoping)" (in progress))
  --harmony_arrays (enable "harmony array methods" (in progress))
  --harmony_array_includes (enable "harmony Array.prototype.includes" (in progress))
  --harmony_regexps (enable "harmony regular expression extensions" (in progress))
  --harmony_arrow_functions (enable "harmony arrow functions" (in progress))
  --harmony_proxies (enable "harmony proxies" (in progress))
  --harmony_sloppy (enable "harmony features in sloppy mode" (in progress))
  --harmony_unicode (enable "harmony unicode escapes" (in progress))
  --harmony_unicode_regexps (enable "harmony unicode regexps" (in progress))
  --harmony_computed_property_names (enable "harmony computed property names" (in progress))
  --harmony_rest_parameters (enable "harmony rest parameters" (in progress))
  --harmony_tostring (enable "harmony toString")
  --harmony_numeric_literals (enable "harmony numeric literals")
  --harmony_strings (enable "harmony string methods")
  --harmony_scoping (enable "harmony block scoping")
  --harmony_templates (enable "harmony template literals")
  --harmony_classes (enable "harmony classes (implies block scoping & object literal extension)")
  --harmony_object_literals (enable "harmony object literal extensions")

What if I still need IE{7,8,9,whatever}?

>>Babel.js

Babel.js

• convertor to transform your code to es5
• automatically add many polyfills
• fits in most workflows
• future-proof

{
  let privateKey = Math.random();

  var login = function (password) {
    return password === privateKey;
  };
}

"use strict";

{
  var login;

  (function () {
    var privateKey = Math.random();

    login = function login(password) {
      return password === privateKey;
    };
  })();
}

ES6

ES5

Drawbacks

• a fraction of es6 features may cause problems
  • symbol: cannot be used outside non-babel code on function calls
  • generators: requires regenerator runtime which add a lot of dependencies
  • no support for Proxy (requires basic Proxy support in the target language)
  • syntactic sugar?

square = (x) -> x * x

sum = (x, y) -> x + y

odd = (x) -> x % 2 isnt 0

even = (x) -> x % 2 is 0

run_loop = ->
  fire_events((e) -> e.stopPropagation())
  listen()
  wait()

let square = (x) => x * x

let sum = (x, y) => x + y

let odd = (x) => x % 2 !== 0

let even = (x) => x % 2 === 0

let run_loop = () => {
  fire_events((e) => e.stopPropagation())
  listen()
  return wait()
}

ES6

What's next?

ES7!

• Currently in draft
• selected features already supported by babel
  • async, await (big time)
  • class decorators
  • types

WebAssembly

• Built upon asm.js
• "web bytecode"
• full access to the same API that JS currently has

More info

• https://github.com/lukehoban/es6features
• Mozilla Developer Network
• babel.js website (repl)
• Questions?