"Javascript" est créé en 1995 par Brendan Eich
Mocha -> LiveScript -> Javascript
Microsoft implémente JScript (IE3)
Standardisé en 1996/97 par ECMA : ES1
ES2 en 1998 et ES3 en 1999
ECMAScript : nom du standard
ECMA != W3C
Plusieurs implémentations :
Google : V8
Mozilla : SpiderMonkey
MicroSoft : Chakra
...
TC-39
ECMAScript 4 désaccord du TC-39 entre ES3 et ES4
ECMAScript 3.1 5 fin 2009 puis 5.1 en 2011
ECMAScript "Harmony" : reprise du travail initié par ES4
ECMAScript 6 validé en 2014, spec officielle en juin 2015
ECMAScript 6 devient ES2015 suite à une refonte du processus de décision du TC-39
ES3 1999
ES5 2009
ES2015 2015
10 ans
6 ans
Stage 0 : "Strawman"
Stage 1 : "Proposal"
Stage 2 : "Draft"
Stage 3 : "Candidate"
Stage 4 : "Finished"
Point d'entrée
Proposition officielle
champion identifié
API de haut niveau
Texte de la spec initial
Solution complete et validée
Implémentation possible
Officiellement dans la spec
arrow functions
classes
enhanced objects literals
template strings
destructuring
default argument
default parameters
rest parameters
spread operator
let + const
iterators
generators
full unicode
modules
map set weakmap weakset
proxies reflects
symbols
binary + octal literals
promises
tail call optimization
for of
Object.assign
Math , object, array , string APIs
const map = new Map();
map.set("foo", 123);
map.get("foo"); // 123
map.has("foo"); //true
map.delete("foo"); //true
map.has("foo"); //false
map.size; //1
map.clear();
map.size; //0
Par rapport aux objets classiques :
nouvelles méthodes
clé peut être de n'importe quelle valeur
//Exemple boucle
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, i * 1500);
} // (5) 5
for (let y = 0; y < 5; y++) {
setTimeout(function () {
console.log(y);
}, y * 1500);
} // 0 1 2 3 4
//Exemple TDZ
function mafonction() {
console.log(foo);
// ReferenceError
let foo = "bar"
}
Par rapport aux var classiques :
portée réduite au block {}
pas de hoisting
const MA_CONSTANTE = 2; //2
MA_CONSTANTE = 4 ; //TypeError: Assignment to constant variable
const monObjet = {
maValeur : 2
}
monObjet = {
maValeur : 3
} //TypeError
monObjet.maValeur = 3; // {maValeur:3}
Par rapport aux var classiques :
véritable constante nommée
≠ immuable ( lien vers référence ≠ valeur )
//Syntaxe
//param => expression
//() => {}
// Idéal pour du fonctionnel
const a = [1,2,3];
const a2 = a.map(function(s){ return s*2});
const a3 = a.map( s => s*2);
//Concerve le "this"
function Personne(){
this.age = 0;
setInterval(() => {
this.age++;
}, 1000);
}
var p = new Personne();
Par rapport aux fonctions classiques :
ne réécrit pas le this
moins verbeuse, usage orienté fonctionnel
const user = { first: "Jane", last: "Doe", .... };
const {first, last} = user;
//first = "Jane" last = "Doe"
const {first: prenom} = getUser();
// prenom = "Jane"
function printMyName({ first, last }) {
return `My name is ${first} ${last}`
}
printMyName(user) //"My name is Jane Doe"
const [a, b] = [1, 2]
const [a, b, ...c] = [1, 2, 3, 4, 5]
const {a, b} = {a:1, b:2}
// Syntaxe ES7 ?
const {a, b, ...rest} = {a:1, b:2, c:3, d:4}
const {userName} = this.props
Usage dans react
Arguments de fonction
Valable pour les tableaux et plus généralement les itérables
// lib/math.js
export function sum(x, y) {
return x + y;
}
export const pi = 3.141593;
// app.js
import * as math from "lib/math";
// otherApp.js
import {sum, pi} from "lib/math";
structure statique
pas encore d'implémentation officielle pour les loader
<script>
System.import("myapp").then(function(app) {
// ...
});
</script>
//Implémentation Edge
<script type="module" src="./app.js">
import { sum } from './math.js';
//...
</script>
<module>
import app from "myapp";
//...
</module>
// lib/mathplusplus.js
export * from "lib/math";
export const e = 2.71828182846;
export default function(x) {
return Math.log(x);
}
// app.js
import ln, {pi, e} from "lib/mathplusplus";
fetch("/myData.json")
.then(traitementAsynchrone)
.then(function(myData) {
console.log(myData);
})
.catch(function(err) {
//gestion err
});
Specification Promise A+
Chainable
Composable
Parallelisable
class Polygone {
constructor(hauteur, largeur) {
this.hauteur = hauteur;
this.largeur = largeur;
}
}
sucre syntaxique autour de prototype
mots clés courant : extends, super , getter setter, static
`chaîne de texte`
`chaîne ligne 1
chaîne ligne 2`
`texte ${expression} texte chaîne`
tag `texte ${expression} texte chaîne`
function tag(strings, ...values) {
//...
return ""
}
possibilité de multi-lignes
tagged template : opportunité pour du DSL
Par rapport aux chaines classiques
function createMonster(name, power) {
return { type: "Monster", name, power };
}
// en ES5
function createMonster(name, power) {
return { type: "Monster", name:name, power:power };
}
notation raccourcie
const param = 'size';
const config = {
[param]: 12,
["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
};
console.log(config); // { size: 12, mobileSize: 4 }
noms de propriétés calculés
//Object.assign(cible, ...sources)
//Copier un objet
var obj = { a: 1 };
var copie = Object.assign({}, obj);
console.log(copie); // {a: 1}
//fusionner des objets
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3); // source modifiée
console.log(obj); // { a: 1, b: 2, c: 3 }
Object.assign({},o1, o2, o3); // { a: 1, b: 2, c: 3 }
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2); // [0,1,2,3,4,5]
function union(a, b) {
return a.concat(b.filter(function (el) {
return a.indexOf(el) === -1;
}));
};
var c = union(a,b);
//ES2015
const union = (a, b) => [...new Set([...a, ...b])];
spread operator
function fun1(...theArgs) {
console.log(theArgs.length);
}
fun1(); // 0
fun1(5); // 1
fun1(5, 6, 7); // 3
rest
function add(x=0, y=0) {
return x + y;
}
//En ES5
function add(x, y) {
x = (typeof x !== "undefined" ? x : 0);
y = (typeof y !== "undefined" ? y : 0);
return x + y;
}
function selectEntries({ start=0, end=-1, step=1 }) {
//...
}
arrow functions
classes
enhanced objects literals
template strings
destructuring
default argument
default parameters
rest parameters
spread operator
let + const
iterators
generators
full unicode
modules
map set weakmap weakset
proxies reflects
symbols
binary + octal literals
promises
tail call optimization
for of
Object.assign
Math , object, array , string APIs
Transpilage vers ES5.1 possible hors proxies
ES2015 peut (doit) être utilisé dès maintenant
suivant la cible en natif ou par transpilage avec babel
ES2015 est une énorme évolution de la spec du langage javascript
+ facile, + puissant, + fiable
L'avenir est prometteur
La migration peut se faire par étapes
Array.includes
Opérateur exponentiel
["a", "b", "c"].includes("a") // true
["a", "b", "c"].includes("d") // false
x ** y === Math.pow(x,y)
Object.entries() Object.values()
var obj = { toto: "truc", machin: 42 };
Object.entries(obj) // [ ['toto', 'truc'], ['machin', 42] ]
Object.values(obj) // [ 'truc', 42 ]
Stage 3 :
SIMD,
Async,
String padding,
trailing commas in function args