ES6 - The future of JavaScript

Ryo Chikazawa

Not Ryu

Not Rio

Ryo

Have you ever written JavaScript?

Have you been annoyed with JavaScript?

Why?

  • "this"
  • Scope
  • lack of APIs
  • a lot of writing styles
  • so on...

What is ES6

  • ECMAScript 6
  • Standard for JavaScipt
  • TC39 in ECMA International
  • JavaScript is one of its implementation

Compatibility table

This is written in ES6!

What is ES6

  • Function
  • Parameters
  • Block scope
  • Iteration/Generators
  • Classes
  • Modules
  • Promises

Function

Before ES6

var square = function(x){
  return x * x;
}
console.log(square(2));

Arrow function

var square = x => x * x;
console.log(square(2));

Arrow function

var square = (x) => {
  x * x;
}
var key_maker = val => ({key: val});

Lexical binding(ES3)

var obj = {
  init: function(){
    var self = this;
    window.addEventListener('click', function(e){
      console.log(this);
      self.method();
    });
  },
  method: function(){}
}
obj.init();

Lexical binding(ES5)

var obj = {
  init: function(){
    window.addEventListener('click', function(e){
      this.method();
    }.bind(this));
  },
  method: function(){}
}
obj.init();

Lexical binding(ES6)

var obj = {
  init: function(){
    window.addEventListener('click', e => this.method());
  },
  method: function(){}
}

Parameters

Default values(ES3)

function add(x, y){
  y = y || 1;
  return x + y;
}
console.log(add(1));

Default values(ES6)

function add(x, y = 1){
  return x + y;
}
console.log(add(1));

Rest parameters

function sum(base, ...rest){
  rest.forEach(function(arg){
    base += arg
  });
  return base;
}
console.log(sum(1, 2, 3, 4, 5));

Spread operator

function sum(a, b, c, d, e){
  return a + b + c + d + e;
}
var arr = [2, 3, 4, 5];
console.log(sum(1, ...arr));

Block scope

ES3

if(true){
  var value = 'value';
}
console.log(value);

Let

if(true){
  let value = 'value';
}
console.log(value); //ERROR

Const

(function(){
  const VALUE = 'value';
  VALUE = 'value2'; //ERROR
});

Block functions

if(true){
  function func(){}
}
func(); //ERROR

Iteration / Generators

for-of loop

var arr = [1, 2, 3];
for(let val of arr) {
  console.log(val);
}

Generators

function* helloGen(){
  yield 'Hello';
  yield 'I am';
  yield 'Ryo';
}
var gen = helloGen();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

Generators

function* helloGen(){
  yield 'Hello';
  yield 'I am';
  yield 'Ryo';
}
for(var str of helloGen()){
  console.log(str);
}

Classes

Class

class Instrument{
  constructor(name){
    this._name = name;
  }
  play(){
    console.log('play: ' + this._name);
  }
  set name(name){
    this._name = name;
  }
  get name(){
    return this._name;
  }
}
var instrument = new Instrument('piano');

Subclass

class Guitar extends Instrument{
  constructor(strings) {
    super('guitar');
    this._strings = strings;
  }
  play(){
    console.log(this._strings + 'string ' + this._name);
    super.play();
  }
}

Property method assignment

var obj = {
  value: 'value',
  toString() {
    return this.value;
  }
};
console.log(obj.toString());

Modules

export/import

// user.js
export class User{
  constructor(name){
    this._name = name;
  }
}
export var name = 'Ryo';

// user_view.js
import {User, name} from './user';
var user = new User(name);

Promises

Promises

var timeoutPromise = new Promise((resolve, reject) => {
  setTimeout(resolve, 100);
})
timeoutPromise.then(() => {
  console.log('done');
});

Review

  • Function
  • Parameters
  • Block scope
  • Iteration/Generators
  • Classes
  • Modules
  • Promises

How to use them today?

Traceur Compiler

Compile online

<!DOCTYPE html>
<html>
  <body>
    <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
    <script>
      traceur.options.experimental = true;
    </script>
    <script type="module">
      class Instrument{
        constructor(name){
          this._name = name;
        }
      }
      var instrument = new Instrument('piano');
    </script>
  </body>
</html>

Compile offline

Install

$ npm install traceur -g
$ traceur --out out.js --script source.js

HTML

<html>
  <head>
    <script src="bin/traceur-runtime.js"></script>
    <script src="out.js"></script>
  </head>
  <body>
  </body>
</html>

ES7 - Beyond ES6

  • Object.observe
  • Async Function

Harmonide

  • HTML presentation framework
  • Written in ES6
  • Generate from Markdown
  • Github

exe.js

  • Run codes in <pre><code>
  • Use with hightlighting library
  • Embed in your blog
  • Github

Thank you!