ES6 (ECMAScript 2015) : Les essentiels que tout développeur JavaScript doit maîtriser

ES6, ou ECMAScript 2015, désigne la sixième édition du standard ECMAScript, qui normalise JavaScript. Publiée en juin 2015, elle succède à ES5 (2011) et introduit des améliorations majeures pour un développement JavaScript plus robuste et scalable.

La compatibilité navigateur n'est pas encore totale, mais la plupart des fonctionnalités sont prises en charge par les navigateurs modernes. Pour les anciens navigateurs, utilisez un transpiler comme Babel pour convertir ES6 en ES5.

Découvrez les principales nouveautés d'ES6 qui transforment JavaScript.

1. Les constantes (const)

ES6 introduit const pour déclarer des valeurs immuables dans une portée. Toute tentative de réaffectation provoque une erreur.

const JOE = 4.0;
JOE = 3.5;
// Erreur : TypeError: Assignment to constant variable.

Utilisez const comme var ou let.

console.log("La valeur est : " + JOE * 2);
// Affiche : 8

2. Variables et constantes à portée de bloc (let et const)

Avec let et const, les variables respectent la portée de bloc, comme en Java ou C++.

Avant ES6, var avait une portée de fonction. Désormais, les valeurs sont limitées au bloc.

{
  let x = "bonjour";
  {
    let x = "monde";
    console.log("Bloc interne, x = " + x); // monde
  }
  console.log("Bloc externe, x = " + x); // bonjour
}

Les constantes peuvent être redéclarées dans des blocs internes.

{
  let x = "bonjour";
  {
    const x = 4.0;
    console.log("Bloc interne, x = " + x); // 4
    try {
      x = 3.5;
    } catch (err) {
      console.error("Bloc interne : " + err);
    }
  }
  x = "monde";
  console.log("Bloc externe, x = " + x); // monde
}

3. Fonctions fléchées

Les fonctions fléchées offrent une syntaxe concise et préservent le this de l'enclosure.

const x = a => a + 1;
x(4); // 5

Exemple avec forEach :

[1, 2, 3, 4].forEach(a => console.log(a + " => " + a * a));
// 1 => 1
// 2 => 4
// etc.

Avec plusieurs arguments :

[22, 98, 3, 44, 67].sort((a, b) => a - b);
// [3, 22, 44, 67, 98]

4. Paramètres par défaut

Les fonctions acceptent des valeurs par défaut.

const x = (a, b = 1) => a * b;
x(2); // 2
x(2, 2); // 4

Les paramètres par défaut peuvent précéder les autres, mais l'appariement est de gauche à droite.

const x = (a = 2, b) => { return a * b; };
x(2); // NaN (b est undefined)
x(1, 3); // 3

undefined explicite active la valeur par défaut.

x(undefined, 3); // 6

5. Paramètres rest (...)

Les paramètres rest capturent les arguments excédentaires en tableau.

const x = function(a, b, ...args) {
  console.log("a = " + a + ", b = " + b + ", " + args.length + " args restants");
};
x(2, 3); // a=2, b=3, 0 args restants
x(2, 3, 4, 5); // a=2, b=3, 2 args restants

6. Templates literals

Les templates (backticks `) interpolent des expressions avec ${} et supportent le multiligne.

const name = "Joe";
const x = `Bonjour ${name}`;
// "Bonjour Joe"

const f = v => v * 4;
const v = 5;
const y = `Bonjour ${f(v)}`; // "Bonjour 20"

const z = `Bonjour le monde
ligne suivante`;
// Multiligne préservé

7. Propriétés d'objets simplifiées

Syntaxe courte pour propriétés et méthodes.

const x = "hello world", y = 25;
const obj = {x, y};
// {x: "hello world", y: 25}

Propriétés calculées :

const obj = {x, y, ["joe" + y]: 4};
// {x: "hello world", y: 25, joe25: 4}

Méthodes :

const obj = {x, y, ["joe" + y]: 4, foo(v) { return v + 4; }};
obj.foo(2); // 6

8. Syntaxe des classes

Définition de classe

Sucre syntaxique pour les prototypes.

class Cercle {
  constructor(rayon) {
    this.rayon = rayon;
  }
}
const c = new Cercle(4);
// Cercle {rayon: 4}

Méthodes

class Cercle {
  constructor(rayon) {
    this.rayon = rayon;
  }
  computeArea() {
    return Math.PI * this.rayon * this.rayon;
  }
}
const c = new Cercle(4);
c.computeArea(); // 50.26548245743669

Getters et setters

class Cercle {
  constructor(rayon) {
    this._rayon = rayon;
  }
  get area() {
    return Math.PI * this._rayon * this._rayon;
  }
  set rayon(r) {
    this._rayon = r;
  }
}
const c = new Cercle(4);
c.area; // 50.265...
c.rayon = 6;
c.area; // 113.097...

Héritage

class Ellipse {
  constructor(largeur, hauteur) {
    this._largeur = largeur;
    this._hauteur = hauteur;
  }
  get area() {
    return Math.PI * this._largeur * this._hauteur;
  }
  set largeur(w) { this._largeur = w; }
  set hauteur(h) { this._hauteur = h; }
}
class Cercle extends Ellipse {
  constructor(rayon) {
    super(rayon, rayon);
  }
  set rayon(r) {
    super.largeur = r;
    super.hauteur = r;
  }
}
const c = new Cercle(4);
c.area; // 50.265...
c.rayon = 5;
c.area; // 78.539...

Cette introduction couvre les bases d'ES6. Explorez ensuite les méthodes de tableaux JavaScript avancées ou frameworks comme Vue.js.

Crédit image : micrologia/Depositphotos