ES2015 and Beyond

beyondand

ES2015

ES.next ?

harmony ?

ES6 ?

ES2015 ?

ES2015July 2011 - June 2015

New features• classes • arrows • enhanced object literals • template strings • destructuring • default + rest + spread • let + const • iterators + for..of • generators • unicode • modules • module loaders • map + set + weakmap + weakset • proxies • symbols • subclassable built-ins • promises • math + number + string + array + object APIs • binary and octal literals • reflect api • tail calls

Jay PhelpsSenior Front end engineer | Netflix Twitter: @_jayphelps

Block ScopeInstead of Function Scope

Before

after

constants

Chrome 41

Browser Support

EDGE 12

Safari nope

Firefox 44

Destructuring

Before

after

Swapping variables

Destructuring parameters

Destructuring parameters

Chrome 45

Browser Support

EDGE 13

Safari nope

Firefox 22

Arrow Functions

Before

after

lexical `this`

lexical `this`references parent scope `this`

lexical `arguments`references parent scope `arguments`

Chrome 45

Browser Support

EDGE 13

Safari nope

Firefox 22

classes

Before

after

syntactic sugarstill uses Prototype-based inheritance

Must use `new`

Must use `new`

classes are not hoistedUnlike function declarations

classes are not hoistedUnlike function declarations

classes are not hoistedUnlike function declarations

class expressionsSimilar to Function Expressions

Must call `super`before accessing `this`When you extend, your constructor

Inheritance

Inheritance

Inheritance

Inheritance

extend built-ins

only works with native es2015 supportextending build-ins

not with transpilers alone

Chrome coming soon in 49

Browser Support

EDGE 13 behind a flag

Safari basic support in 7.1, full support 9

Firefox basic support in 2 (yes, two!), full support 34

How can I play today?i.e. I have to support Internet Explorer

Use a transpiler

Lets gossip

rumored features… es2017++ ?!

Disclaimer:

EnumsAxel Rauschmayer

https://gist.github.com/rauschma/f3e77132319e09b94722

Pattern Matching !!!Yehuda katz

pattern matching !!!

https://github.com/natefaubion/sparklerSimilar syntax of

Optional type annotations like Flow or TypeScript

Macros like sweet.js

Bonus guesses

your voice mattersi.e. bug the tc39 members

Twitter: @_jayphelpsThat’s all folks