ES6

By @johnkpaul

John K. Paul

I ♥ JavaScript


@johnkpaul

john@johnkpaul.com

johnkpaul.com

Ecma International

ECMAScript

  • 3 - 1999
  • 5 - 2009
  • 6 - 2015
  • 2015 - 2015

CopyScript

  • CoffeeScript - arrow functions
  • Python - Generators
  • Lisp - Destructuring
  • C - const/block scope
  • E - template strings

Plan

  • The Shimmables
  • The Transpilables
  • The Intractable

<script>

es6-shim by Paul Miller

  • String.prototype.contains()
  • Promise()
  • Set()
  • Map()
  • Array.from()
  • Number.isNaN()
  • Object.is()
  • String.prototype.codePointAt()
var hasB = "abc".indexOf('b') > -1; alert(hasB);
var p = new Promise( function(resolve, reject){ setTimeout(resolve, 1000); } ); p.then(function(){ alert('after 1 second'); });
var obj = {key: 'val'}; var obj2 = {key2: 'val2'}; var merged = Object.assign(obj, obj2); alert(merged.key); alert(merged.key2);
let set = new Set(); set.add('a'); set.add('b'); set.add('c'); set.add('b'); alert(set.size); set.forEach(alert);
var obj = {'key': 'val'}; var map = new Map(); map.set('key', 'val'); alert('key' in obj); alert(map.has('key'));
var n = [1, 2, 3, 4] .find(x => Object.is(x, 3)); alert(n);

Try It Out

Transpilables

  • Babel
  • JSTransform
  • Traceur

block scoped variables

var arr = [1,2,3]; var o = []; for(var i = 0; i<arr.length;i++) { var val = arr[i]; o.push(function(){ alert(val); }); } o.forEach(function(func){ func(); });

block scoped variables

const x = 1; x = 2;

arrow functions

var double = (x) => x * 2; alert(double(10)); /* var alertLoc; var obj = { loc: 'Bangalore', init: function(){ alertLoc = () => alert("We're at " + this.loc); } }; obj.init(); alertLoc(); */

destructuring

var arr = [1, 2, 3]; func(arr); function func([fst, snd, thd]){ alert(fst); alert(thd); }

destructuring/rest params

function destructure(...args){ var [options, callback] = args; alert(options.v); alert(typeof callback); } var o = {v: true} destructure(o, () => 1);

template strings

var first = "John K." var last = "Paul"; var t = `I'm ${first} ${last}!`; alert(t);
function* inf(){ var i = 0; while(true){ yield ++i; } } for(var x of inf()){ alert(x); if(x > 3) { break; } }
class Greeter { constructor(message) { this.message = message; } greet() { alert(this.message) } } var greeter = new Greeter('Hey'); greeter.greet();

Try It Out

The intractable

  • Weak Maps
  • Proxies
  • Tail call optimization

ES6

What you should do

Thank You

Questions?

By @johnkpaul

john@johnkpaul.com