ES6 dans ton code

Beaucoup de changements

Réapprendre JavaScript

Sucre syntaxique

Lisibilité, concision et qualité

const chars = [{
  name: 'comma',
  char: ','
}, {
  name: 'point',
  char: '.'
}];

// ES5
console.log(chars.reduce(function(charMap, char) {
  charMap[char.name] = char.char;
  return charMap;
}, {}));

// ES6
console.log(chars.reduce((charMap, char) => (
  charMap[char.name] = char.char, charMap
), {}));

// ES6 Generators
function* search(char, str, {
  caseSensitive = false,
  matchAll: all = true
} = {}) {
  let index = 0;
  while(index < str.length) {
    if(
      str[index] === char || (
      caseSensitive && str[index].toLowerCase() === char.toLowerCase()
    )) {
      yield index;
    }
    index++;
  };
}

let gen = search('a', 'Azertyazerty', {caseSensitive: true});
for(let index of gen) {
  console.log(index);
}

// ES5
parseInt('111110111', 2);
parseInt('767', 8);

// ES6
0b111110111;
0o767;

// ES5
var x = obj.x;
var y = obj.y;
// etc...

// ES6
let [x, y] = [0, 1];

let {x, y} = {x: 0, y: 1};

let [x, y, ...otherDims] = [0, 1, 1, 2];

// ES7
let {x, y, ...otherDims} = {x:0, y: 1, z: 1, t: 2};

RIP var

Mais aussi

• Nouvelles méthodes pour Math, Number, String.
• Template strings (tagged templates!)
• Support d'Unicode (RegExp, String.prototype.codePointAt/String.fromCodepoint)
• etc...

POO

Elle n'a pas dit son dernier mot

'use strict';

const instances = new WeakSet();

export default class Service {
  // Allow to access living instances
  static getInstances() {
    return instances;
  }
  // Run at service attachment
  constructor(name) {
    instances.add(this);
    this.name = name;
  }
}

'use strict';

import Service from '../service';

// A simple log service
export default class extends Service {
  constructor(name = 'logger') {
    super(name)
  }
  log(...args) {
    let type = args.unshift();
    if('function' === this[type]) {
      console[type].apply(console, args);
    } else {
      console.log.apply(console, arguments);
    }
  }
  info() {
    console.info.apply(console, arguments);
  }
  debug() {
    console.debug.apply(console, arguments);
  }
  error() {
    console.error.apply(console, arguments);
  }
}

Intérêt

• récupérer les développeurs Java
• encapsuler la logique
• structurer la POO en JS

Meta programmation

Proxy

let myArray = ['a', 'b', 'c'];
let proxy = new Proxy(myArray, function() {
  let lengthSets = 0;
  return {
    set: function(target, property, value) {
      console.log(`Array length set $(++lengthSets) time(s).`);
      target[property] = value;
    }
  };
}());

proxy.length = 2;
// Array length set 1 time(s).

proxy.length = 1;
// Array length set 2 time(s).

Reflect

let myObj = {
  test: 'test'
};


Reflect.deleteProperty(myObj, 'test');
// équivalent de 'delete myObj.test;'


Reflect.set(myObj, 'test', 'test');
// équivalent de 'myObj.test = 'test';

Reflect.construct(Array, args)
// équivalent de
// https://github.com/nfroidure/StreamQueue/blob/1d1399ee9bbd25d3d53d1eca74f40aea124e3d9e/src/index.js#L16-17


// etc..

Symbols

var myUniqueSymbol = Symbol('test');

console.log(myUniqueSymbol.toString() == Symbol('test'));
// false

var obj = {
    [myUniqueSymbol]: 'plop'
};

console.log(obj[myUniqueSymbol]);
// plop

console.log(Object.getOwnPropertyKeys(obj));
// []

console.log(Object.getOwnPropertySymbols(obj));
// [Symbol(test)]

var myGlobalSymbol = Symbol.for('test');

console.log(myGlobalSymbol == Symbol.for('test'));
// true

Intérêt

• tests unitaires (stubs, spies ...)
• debugging
• code coveraging
• ajout de features
• tout le reste, sauf développer ?

Ressources

• Meta programming with ES6 proxies
• Meta programming in ES6: Symbols
• JavaScript Meta Programming

Intronisation

Promise

new Promise(function(resolve, reject) {
  var startTime = Date.now();
  setTimeout(function() {
    resolve(startTime - Date.now());
  }, 1000);
}).then(function(result) {
  console.log(result);
}, function(err) {
  console.error(err);
});

Map / WeakMap

var map = new Map();
map.set('key', 'value');
console.log(map.get('key'));
// value
map.delete('key');

var wMap = new WeakMap();
wMap.set('key', {});
console.log(wMap.get('key'));
// undefined


map.set('key', 'value');
map.set('key2', 'value2');
for(let [key, value] of map) {
  console.log('key', key, 'value', value);
}
// key key value value
// key key2 value value2

Set / WeakSet

let set = new Set();
let obj1 = {label: 'object1'};
set.add(obj1);
console.log(set.has(obj1));
// true
set.delete(obj1);

var wSet = new WeakSet();
wSet.add({});


set.add({label: 'object1'});
set.add({label: 'object2'});
for(let obj of set) {
  console.log('obj', obj);
}
// obj {label: 'object1'}
// obj {label: 'object2'}

Ressources

• Promises : Ouvrons le capot
• WeakMap / Map
• WeakSet / Set

Features

Tail calls

function recursive(obj, prop) {
  if(!obj[prop]) {
    return obj;
  }
  return recursive(obj[prop], prop);
}

recursive({
  child: {
    child: {
      hey: 'test'
    }
  }
}, 'child');

// { hey: 'test' }

Modules

// Module 1
export myModule1 = {
  myGreatFunction() {
    console.log('great');
  }
  myLolFunction() {
    console.log('lol');
  }
};

// Module 2
import {
  myGreatFunction,
  myLolFunction
};

export function greatLol() {
  myGreatFunction();
  myLolFunction();
};

Module Loader

// Dynamic loading – ‘System’ is default loader
System.import("lib/math").then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});

// Create execution sandboxes – new Loaders
var loader = new Loader({
  global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log(\"hello world!\");");

// Directly manipulate module cache
System.get("jquery");
System.set("jquery", Module({$: $})); // WARNING: not yet finalized

ES7

• Decorators
• Comprehension
• Async functions
• etc...

Ressources

Apprendre

• BabelJS: Learn ES6
• ES6 Features
• ES6 Compatibility Table
• ES6 TL;DR
• ES6 en détail

Utiliser

• BabelJS
• ES6 in production