1 of 11

EcmaScript 6

Paul Sanchez

@basicdays

2 of 11

Overview

  • ES Versions
  • Types of additions
  • ES6 Today
  • Big Four
    • Modules
    • Promises
    • Generators
    • Classes
  • Underlying Changes
    • Proper Tail Calls
    • const, let
    • typed arrays
  • API Additions
    • Promises
    • Maps, sets
    • Array, Math, Number
  • Syntax Sugar
    • Default function parameters
    • Rest parameters
    • Spread operator
    • for of loops
    • template strings

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

3 of 11

EcmaScript Versions

  • ES1-3 (1997 - 1999)
    • The ES standard we’ve more or less have lived with for a long time
  • ES4
    • A very ambitious endeavor to attempt to add everything that people wanted
  • ES5 (2009)
    • A step back to fix some underlying bad parts of ES and add underlying changes for DOM APIs. (e.g. property descriptors)
  • ES6 (eta Q1 2015)
    • Code-name Harmony. A lot of parts of ES4 got migrated here. A major update to ES.

4 of 11

Types of Additions

  • Syntax Sugar
    • Additional syntax structure that makes writing code a bit easier to read/write.
  • API Additions
    • Additional libraries that are now baked in.
  • Underlying changes of EcmaScript
    • Changes in how the ES runtime handles code beyond just syntax and libraries.
  • Note, ES is still a functional, prototypical language.

5 of 11

ES6 Today

  • node --harmony
  • Firefox just has it as it rolls out features
  • Chrome - dev tools option
  • Traceur
    • Google project to help people evaluate and trial new ES features
    • Works as a precompiler for the web and also to run ES6 code within node.js
    • https://github.com/google/traceur-compiler

6 of 11

Modules

  • Overview
    • New builtin language feature to enable imports/exports
  • Static exports/imports
  • Synchronous/Asynchronous loading
  • Module meta-data is accessible
  • Module APIs

http://www.2ality.com/2014/09/es6-modules-final.html

7 of 11

Promises

  • Usage is for asynchronous logic
  • Terms
    • Fulfilled, rejected, pending, settled
  • API
    • Promise
      • resolve, reject, all
    • Promise.prototype
      • then(onresolved, onrejected), catch(onrejected)

http://www.html5rocks.com/en/tutorials/es6/promises/

8 of 11

Generators

  • New ES underlying change
    • Allows a new style of function
    • Capable of “returning mid-execution, and receiving new data at a later point in time
  • General Use Cases
    • Lazy evaluation
    • Infinite sequences
    • Asynchronous control flow (alternative to callbacks and promises)

http://strongloop.com/strongblog/how-to-generators-node-js-yield-use-cases/

http://davidwalsh.name/es6-generators

9 of 11

Classes

  • New class syntax (implemented over prototypes)
    • Handles methods, properties, getters/setters, extending

http://www.2ality.com/2012/07/esnext-classes.html

10 of 11

Other cool things

  • Proper tail calls
  • Const, let, function arrow syntax
  • Default function params and rest params
  • Spread and destructuring
  • Iterators and `for of` loops
  • Template strings
  • Array types
  • Maps and sets
  • Proxies
  • New additions to RegExp, Array, Math, Number, String

11 of 11

Links

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

http://www.2ality.com/2014/09/es6-modules-final.html

http://www.html5rocks.com/en/tutorials/es6/promises/

http://strongloop.com/strongblog/how-to-generators-node-js-yield-use-cases/

http://davidwalsh.name/es6-generators

http://www.2ality.com/2012/07/esnext-classes.html

http://www.2ality.com/2014/08/es6-today.html

http://www.2ality.com/2012/04/arrow-functions.html

https://github.com/google/traceur-compiler