Rapide historique

• 1996 Netscape lance JavaScript
• 1996 Netscape le soumet à l'ECMA
• 1997 ECMAScript 1
• 1998 ECMAScript 2
• 1999 ECMAScript 3
• ECMAScript 4 abandonné
• 2009 ECMAScript 5
• 2015 ECMAScript 6 Harmony
• WIP ECMAScript 7

TC39

https://github.com/tc39

https://esdiscuss.org/

Outillage

Traceur

Babel

Anciennement 6to5

Babel plugins

Et bien d'autres...

Et sans précompilation ?

Les incontournables

let

if (true) {
  var foo = 1;
  let bar = 2;
}

console.log(foo);
// 1
console.log(bar);
// ReferenceError: bar is not defined
						

const

var foo = 1;
const bar = 2;

foo = 3;
// foo === 3
bar = 4;
// Line 6: "bar" is read-only
						

string

const foo = "string with double quote";
const bar = 'string with simple quote';
const fooBar = `string with back tick!
multiline!!
with interpolation ${foo} ${bar}`;
						

Des classes en JavaScript ?

class

class Foo {
  constructor() {
    console.log('constructor');
  }

  bar() {
    console.log('bar');
  }
}
						

class

var Foo = (function () {
  function Foo() {
    //(...)
    console.log('constructor');
  }

  Foo.prototype.bar = function bar() {
    console.log('bar');
  };

  return Foo;
})();
						

=>

let foo = (arg1, arg2) => {
  console.log('foo called', arg1, arg2);
};
foo(1, 2); // foo called 1 2

foo = onlyOneArg => {
  console.log('foo called', onlyOneArg);
}
foo(1); // foo called 1

foo = onlyOneArg => onlyOneArg + 1;
console.log(foo(1)); // 2
						

=>

class Foo {
  constructor() {
    this.values = [1, 2, 3, 4, 5];
    this.increment = 42;

    this.values.map((value) => {
      return value + this.increment;
    });
  }
}
						

Modularisation !

modules

// foo.js
export const foo = 42;
export const log = console.log;

// bar.js
import foo from './foo';
foo.log(foo.foo); // => 42
						

destructuration

let [a, b] = [1, 2];
console.log(a, b); //=> 1 2

var foo = () => [1, 2, 3];

var [a, , b] = foo();
console.log(a, b);// => 1 3

var {user: x} = {user: 5};
console.log(x); // => 5

var { prop, prop2 } = {prop: 5, prop2: 10};
console.log(prop, prop2); // => 5 10
						

module + destructuration

// foo.js
export const foo = 42;
export const log = console.log;

// bar.js
import { foo, log } from './foo';
log(foo); // => 42
						

Utiliser des modules ES6 en 2015

CommonJS (Webpack / Browserify)

• Utilisation des modules ES6
• ↓ Babel avec option CommonJS ↓
• Base de code en CommonJS
• ↓ Webpack ou Browserify ↓
• Bundle (fichier) utilisable dans un navigateur

SystemJS

• Autant que possible le polyfill du chargement des modules
• Babel a également une option SystemJS
• Charge en asynchrone les dépendances des modules
• Fonctionnalité de bundle pour le prod
• JSPM permet de gérer les dépendance externes

Natif ?

• Aucun navigateur ne le supporte
• Arrivée de la balise <module>
• Remplace avantageusement la balise <script>
• Sera lié au déploiement d'HTTP2
• http://www.2ality.com/2013/11/es6-modules-browsers.html

Asynchrone

Promesses

// Callback
xhr(options, (response) => {
  // do something
});

// Promise
const promise = xhr(option);

promise.then((response) => {
  // do something
});
						

Promesses - Chaînage

// Callback
xhr(options1, (response) => {
  xhr(options2, (response) => {
    xhr(options3, (response) => {
      // do something
    });
  });
});

// Promise
xhr(options1).then((response) => {
  return xhr(options2);
}).then((response) => {
  return xhr(options3);
}).then((response) => {
  // do something
});
						

Promesses - Création

const promise = new Promise(function (resolve, reject) {
  /*...*/
  if (/*...*/) {
    resolve(value); // success
  } else {
    reject(reason); // failure
  }
});
						

Generators

function *foo() {
  yield 1;
  yield 2;
  yield 3;
}

var it = foo();
console.log( it.next() ); // { value:1, done:false }
console.log( it.next() ); // { value:2, done:false }
console.log( it.next() ); // { value:3, done:false }
console.log( it.next() ); // { value:undefined, done:true }
						

Generators - co

// Pseudo code, without any checks
function co(g) {
  var it = g(), ret;

  // asynchronously iterate over generator
  (function iterate(val){
    ret = it.next( val );

    if (!ret.done) {
      ret.value.then( iterate );
    }
  })();
}
						

Generators - co

co(function *() {
  yield xhr(options1);
  yield xhr(options2);
  yield xhr(options3);
});
						

Async functions

async function foo() {
  await xhr(options1);
  await xhr(options2);
  await xhr(options3);
}
						

Le reste

for ... of

let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // => 0 1 2 foo
}

for (let i of arr) {
   console.log(i); // => 3 5 7
}
						

Valeurs par défaut

function multiplier(a, b = 1) {
  return a * b;
}

multiplier(5); // => 5

function f(x=1, y) {
  return [x, y];
}

f(); // => [1, undefined]
						

rest & spread

function foo(...args) {
  console.log(args.length);
}

foo();  // => 0
foo(5); // => 1
foo(5, 6, 7); // => 3
foo(...[0, 1, 2]); // => 3
						

Extensions des APIs

• Object
• Map
• Set
• Math