ES6

The Next JavaScript

Thameera Senanayaka

Twitter - @thameera

Blog - blog.thameera.com

This slide set: http://slides.com/thameera/es6

HISTORY LESSON!

JavaScript

1995

ECMAScript

1997

ECMAScript 3

1999

ECMAScript 5

2009

JavaScript sucks

ECMAScript 6

aka

ES Harmony

much advanced!

such excitement!

Block scope

for (var i = 1; i < 5; i += 1) {
  var j = 1;
  console.log(i);
}

console.log(i);
console.log(j);

Variable hoisting

for (let i = 1; i < 5; i += 1) {
  let j = 1;
  console.log(i);
}

console.log(i);   // ERROR!
console.log(j);   // ERROR!

Const

const x = 5;

x = 10;  // ERROR!

Default parameters

var divide = function(a, b) {
  b = b || 2;
 
  return a / b;
};

let divide = function(a, b = 2) {
  return a / b;
};

divide(20, 4);   // 5
divide(20);      // 10

let fn = function(a, b = a+1) {
  // ...
};

Rest parameters

var print = function(prefix) {
  var args = Array.prototype.slice.call(arguments).slice(1);

  args.forEach(function(arg) {
    console.log(prefix + ' : ' + arg);
  });
};

print('LOG', 1, 2, 3);

let print = function(prefix, ...args) {
  args.forEach(function(arg) {
    console.log(prefix + ' : ' + arg);
  });
};

print('LOG', 1, 2, 3);

Spread Operator

let fn = function(a, b, c) {
  ...
};

let args = [1, 2, 3];
fn(...args);

Iterators

let arr = [10, 20, 30];

for (let x of arr) {
  // ...
}

Generators

let evenGenerator = function*() {
  let i = 0;
  while (true) {
    i += 2;
    yield i;
  }
};

let g = evenGenerator();
g.next().value;  // 2
g.next().value;  // 4
g.next().value;  // 6

Things get exciting!

Destructuring

[a, b] = [b, a];

let [a, b] = fnThatReturnsArray();

let [a, ...others] = fnThatReturnsArray();

let {name, age} = {name: 'tham', age: 20};

Arrow functions

var square = function(x) {
  return x * x;
};

let square = x => x * x;

let add = (x, y) => x + y;

cats.forEach(cat => {
  if (cat.age < 1) {
    kittens.push(cat);
  }
});

Arrow functions

var map = function(words) {
  return words.map(function(word) {
    return word.length;
  });
};

let map = words => words.map(word => word.length);

Lexically bound 'this'

var obj = {

  eat: function(food) { },

  feed: function(foodArray) {
    var that = this;

    foodArray.forEach(function(item) {
      that.eat(item);
    });
  }

};

let obj = {
  eat: function(food) { },

  feed: function(foodArray) {
    foodArray.forEach(item => this.eat(item));
  }
};

Enhanced object literals

return {
  thisFunc: thisFunc,
  thatFunc: thatFunc
};

return {
  thisFunc,
  thatFunc
};

Enhanced object literals

var obj = {
  doSomething: function(a, b) {
    // ...
  }
};

var obj = {
  doSomething(a, b) {
    // ... 
  }
};

Promises

doSomething(function(err, a) {
  if (err) {
    ..
  }

  // ...
  doAnotherThing(function(err) {
    if (err) {
      ..
    }

    // ...
    doYetAnotherThing(function(err, b) {
      if (err) {
        ..
      }

      //...
    });
  });
});

Promises

doSomething()
  .then(function() {
    // ...
    return doAnotherThing();
  })
  .then(function() {
    // ...
    return doYetAnotherThing();
  })
  .then(function() {
    // ...
  })
  .catch(function(err) {
    // ...
  });

Promises

let timeConsumingFn = function() {
  return new Promise(function(resolve, reject) {
    setTimeout(resolve, 1000);
  });
};

timeConsumingFn().then(function() {
  console.log('Time consuming fn finished!');
});

Classes

class Cat extends Animal {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  meow() {
    console.log('meow!');
  }
}

let cat = new Cat('kitty', 2);
cat.meow();

Modules

Browserify / NodeJS
RequireJS / AMD

Modules

let add = (a, b) => a + b;

export default add;

import add from "add";

let val = add(2, 3);

http://jsmodules.io/

Lots more

Comprehensions

Unicode support

Proxies

Maps, sets

Tail calls

Lots of in-built methods

This is so awesome when can I start using ES6?!

Bad news

Publication date: June 2015

Good news

Feature set is frozen

How to use ES6 now?

ES6 Fiddle

http://www.es6fiddle.net/

Traceur compiler

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

Polyfills

es6-shim

Grunt tasks

Gulp plugins

How to use ES6 now?

node --harmony

chrome://flags

enable-javascript-harmoney

Compatibility table

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

Tons of other tools

https://github.com/addyosmani/es6-tools

Thank you!

http://slides.com/thameera/es6