babeljs.io/repl
View Slide
The ECMAScriptformerly known as6
KerrickLongKerrickKerrickLong.com
JS
DOM ECMAScript+
DOM
context.drawImage(new Image(), 0, 0)event.dataTransfer.setData(mime, data)new Worker('thread.js').postMessage(str)navigator.getUserMedia({audio: true})DOM
ECMAScript
ECMAScriptfor (var i; i < 10; i++) { break; }(function(x) { return x + 1; })(100)var bareObject = Object.create(null)[1, 2, 3, 4].map(double).reduce(add)
ECMAScript 6
ECMAScript 2015
JavaScript isgrowing up.
Dwindling use ofApp Frameworksthat compile to JS
Dwindling use ofOther Languagesthat compile to JS
What’s new?
Modules
// app/routes/example.js import Ember from 'ember'; export default Ember.Route.extend();Modules
// app/utils/func.js export var flatten = _.flatten.bind(_); export var union = _.union.bind(_);Modules
// app/utils/func.js export var flatten = _.flatten.bind(_); export var union = _.union.bind(_); export default { flatten: flatten, union: union };Modules
Modulesimport Ember from 'ember'; import { flatten, union } from 'app/utils/func'; export default Ember.Route.extend({ model: function() { return flatten(union([1, 2, 3])); } });
Arrow Functions
Arrow Functionsvar _this = this; return this.store.find('pages').then(function(pages) { return pages.map(function(pages, i) { return _this.modelFor('posts').objectAt(i) }); });
Arrow Functionsvar _this = this; return this.store.find('pages').then(pages => { return pages.map((pages, i) => { return _this.modelFor('posts').objectAt(i) }); });
Arrow Functions return this.store.find('pages').then(pages => { return pages.map((pages, i) => { return this.modelFor('posts').objectAt(i) }); });
Arrow Functions return this.store.find('pages').then(pages => { return pages.map((pages, i) => this.modelFor('posts').objectAt(i)); });
Enhanced Object Literals
var foo = 'bar'; var obj = { foo: foo, model: function(params) { return params; } }; obj['id_' + Math.random()] = 'secret';Enhanced Object Literals
var foo = 'bar'; var obj = { foo, model: function(params) { return params; } }; obj['id_' + Math.random()] = 'secret';Enhanced Object Literals
var foo = 'bar'; var obj = { foo, model(params) { return params; } }; obj['id_' + Math.random()] = 'secret';Enhanced Object Literals
var foo = 'bar'; var obj = { foo, model(params) { return params; },['id_' + Math.random()]: 'secret' };Enhanced Object Literals
Destructuring
import Ember from 'ember'; var Route = Ember.Route; var filename = ‘photo.jpg’.split(‘.')[0];var ext = ‘photo.jpg’.split('.')[1]; export default Route.extend();Destructuring
import Ember from 'ember'; var { Route: Route } = Ember; var [filename, ext] = 'photo.jpg'.split('.'); export default Route.extend();Destructuring
import Ember from 'ember'; var { Route } = Ember; var [filename, ext] = 'photo.jpg'.split('.'); export default Route.extend();Destructuring
Template Strings
confirm('Really delete ' + promotion.name + '?');Template Strings
confirm(`Really delete ${promotion.name}?`);Template Strings
const code = '\n' + <br/>'\n' + '\n' + 'View\n' + '';Template Strings
const code = ` <br/> View `;Template Strings
const and let
function example(isGood) { if (isGood) { var x = 4; console.log(x); // 4 } console.log(x); // 4 }const and let
function example(isGood) { if (isGood) { const x = 4; console.log(x); // 4 } console.log(x); // undefined }const and let
function canTransition(isSaving) { const canTransition = true; if (isSaving) { canTransition = false; // Error: already set. } return canTransition; }const and let
function canTransition(isSaving) { let canTransition = true; if (isSaving) { canTransition = false; } return canTransition; }const and let
Promises
Promise StatesPending Fulfilled Rejected}Settled
getJSONonFulfilled onRejectedgetJSONonFulfilledonRejected
$.ajax(config).then(onFulfilled, onRejected)Lies, all LIES!
var promise = getJSON('/comments');somethingElse();promise.then(onFulfilled, onRejected);Promise.prototype.then
JavaScriptPromisesThinking Sync in an Async Worldthen