Note : Il ne s’agit pas vraiment de JavaScript mais de la 6ème norme de l’EcmaScript dont JavaScript est l’implémentation pour Firefox. Je pratique donc ici l’abus de langage :p

Ceux qui me connaissent et ont déjà développé avec moi savent à quel point je déteste JavaScript. Je trouve ce langage complètement troué, syntaxiquement lourd et reposant sur des paradigmes de programmation imbitables comme la programmation par prototype.

Mais je sais reconnaître que le langage a quelques bonnes fonctonnalités comme la possibilité de faire du fonctionnel avec les fonctions lambda :

$('#link').onClick(function(){               // Ceci est une fonction lambda ou dite "anonyme"
    alert('Fonctionnel, woooooow ! O__O');
});

À part ça, la manipulation des chaines de caractères reste ignoble. Petit exemple de comment insérer la valeur d’une variable dans une chaine en Python :

def valeur = 'lolilol en barre !'
def string = """Ceci est une chaîne avec une variable de valeur %s ce qui n'a aucun sens""" % valeur

en Ruby :

valeur = 'lolilol en barre !'
string = "Ceci est une chaîne avec une variable de valeur #{valeur} ce qui n'a aucun sens"

et en JavaScript :

var valeur = 'lolilol en barre !';
var string = 'Ceci est une chaîne avec une variable de valeur' + valeur + 'ce qui n'a aucun sens';

C’EST MOOOOOOCHE !

De la même manière, définir une chaine multiligne, l’opération informatique la plus courante de l’histoire de l’humanité, en Python :

"""Une chaine
sur
plusieurs lignes
wooooooo ! O__O"""

en Ruby :

"""Une chaine
sur
plusieurs lignes
wooooooo ! O__O"""

en JavaScript :

"Une chaine
moche sur n
plusieurs lignes... n
Sérieux ? -_-"

Bref, je vais pas vous faire le détail, vous trouverez à peu près tout ce qui ne va pas en JavaScript dans cet article.

Du coup, quand j’ai appris l’arrivée de JavaScript 6, je n’en ai pas eu grand chose à secouer jusqu’à ce que je découvre les nouvelles fonctionnalités du bidule.

Oui, il semble que l’ECMA ai appris de ses erreurs ! o/

Les exemples que je vais donner durant le reste de l’article en grande partie tirés de ce dépôt Github.

Les classes

Yeah ! JS6 a maintenant des classes ! Ce qui rend le langage beaucoup plus simple à utiliser et surtout, le rend conforme à définition des objets que tous les autres langages de POO du monde ont adopté !

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

Putain, c’était pas compliqué, pourtant…

Alors, je rassure les apôtres de la programmation par prototypage, la définition de classes ne change pas la manière de fonctionner du langage, il ne s’agit ici que de simple sucre syntaxique qui rend le langage juste beaucoup plus clair. Vous remarquerez d’ailleurs que les gens de l’ECMA ne sont pas totalement stupides, ils ont décidé d’utiliser la syntaxe Java, ce qui permet à JavaScript, au bout de 20 ans, tout de même, d’enfin justifier de son nom… Sauf pour le constructeur qui possède le nom

constructor()

et pas le nom de la classe comme en Java.

L’appel au constructeur de la classe-mère se fait, comme en Java, via l’utilisation du mot-clef

super()

 .

L’opérateur flèche (arrow)

Ça, c’est le top du top de la programmation fonctionnelle. Il s’agit encore une fois de sucre syntaxique, mais quel sucre ! Exemple, pour parcourir un tableau auparavant :

["a", "b", "c"].forEach(function(entry) {
    console.log(entry);
});

Mais bon, écrire

function(){}

 , tout le temps, c’est un peu lourd. D’autant plus que si l’on utilise jQuery, on écrit presque plus que ça… Solution :

["a", "b", "c"].forEach(entry => console.log(entry));

Bordel, ce que c’est sexy <3

Les chaînes de caractères

Mais les vraies, cette fois ! Avec du multiligne et du templating !

var name = "Bob"
var time = "today";

alert(Hello ${name},
how are you ${time}?);

Nom d’une pipe à crack, ce que c’est beau !

Pour des raisons de compatibilité avec la spécification 5, les chaînes templates sont délimitées par le caratère

`

  plutôt que par les classiques

'

  ou

"

 .

Let et const

Le mot-clef 

let

  vient remplacer (ou suppléer, je ne suis pas sûr) le mot-clef

var

 . Le mot-clef 

const

  vient définir des variables immuables.

function f() {
  {
    let x;
    {
      /* Ceci fonctionne,
       * il n'y a pas de téléscopage
       * avec le x définit plus haut */
      const x = "sneaky";
      // Ceci crée une erreur, x est immuable
      x = "foo";
    }
    // Ceci crée une erreur, x a déjà été défini dans ce block
    let x = "inner";
  }
}

C’est pas mal, ça va apporter un peu qualité de code, tout ça. À condition que les devs respectent les règles de bonne pratique.

Les générateurs

Une petite fonctionnalité qui va ravir les adeptes de Python, avec l’apparition du mot-clef 

yield

  qui permet de parcourir des listes générées à la volée par une fonction. Ça évite de polluer la mémoire avec des grosses listes dont on sait qu’elles ne seront lues qu’une unique fois et c’est plutôt pas mal pour faire des requêtes asynchrones. Par exemple, on appelle un service sur internet qui va renvoyer une valeur différente à chaque appel. Au lieu d’appeler le service 1 fois pour générer plein de valeurs stockées dans une liste à traiter ensuite, on peu simuler le parcours de cette liste en même temps qu’elle est créée. Un petit exemple, toujours de la même source (parce que je suis fénéant) :

// On simule la génération de la liste
var fibonacci = {
  [Symbol.iterator]: function*() {
    var pre = 0, cur = 1;
    for (;;) {
      var temp = pre;
      pre = cur;
      cur += temp;
      yield cur;
    }
  }
}

// On la parcours
for (var n of fibonacci) {
  if (n > 1000)
    break;
  print(n);
}

Pour ceux qui ne comprennent pas bien l’utilité des générateurs, je vous invite à lire cet article vraiment cool !

Les modules

Pour ceux qui ont l’habitude de charger des tonnes de fichiers JS avec Require.JS pour éviter de polluer les fichiers HTML avec plein de balises

<script>

 .

import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

Vous remarquerez le petit emprunt à Python sur la syntaxe 

import ... from

 

Conclusion

Il y a encore plein d’autres fonctionnalités que je trouve sympas mais sur lesquelles je ne m’étendrai pas, comme l’apparition de l’API 

Maths

  et d’autres que je n’ai pas bien comprises comme les symboles, que je soupçonne être inspirée des symboles de Ruby. Vous pouvez toutes les retrouver ici. En tout cas, il semblerait qu’au bout de 20 ans, le langage commence à être sympa ! Alors, oui, effectivement, ils auraient pu faire les choses correctement dès le départ — comme avec Python, par exemple — mais bon, on peut leur pardonner, vu l’histoire chaotique du langage.