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

ES6

By Thameera

ES6

1,824

ES6

The Next JavaScript

Thameera Senanayaka

HISTORY LESSON!

JavaScript

JavaScript sucks

ECMAScript 6

ES Harmony

Block scope

Const

Default parameters

Rest parameters

Spread Operator

Iterators

Generators

Things get exciting!

Destructuring

Arrow functions

Arrow functions

Lexically bound 'this'

Enhanced object literals

Enhanced object literals

Promises

Promises

Promises

Promises

Classes

Modules

Modules

Lots more

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

Bad news

Good news

How to use ES6 now?

How to use ES6 now?

Compatibility table

Tons of other tools

Thank you!

ES6

More from Thameera