Quelles sont les nouvelles fonctionnalit�s qui pourraient d�barquer dans JavaScript en 2019 ?
Tour d�horizon des candidats pour ES2019

JavaScript est un langage de programmation de scripts principalement employ� dans les pages web interactives, mais aussi pour les serveurs avec l'utilisation par exemple de Node.js. C'est un langage orient� objet � prototype et qui supporte le paradigme objet, imp�ratif et fonctionnel. Il a �t� standardis� sous le nom d'ECMAScript en juin 1997 par Ecma International dans le standard ECMA-262. JavaScript n'est depuis qu'une impl�mentation d'ECMAScript (ES), celle mise en �uvre par la fondation Mozilla.

Au cours des derni�res ann�es, JavaScript a �volu� � un rythme soutenu avec de nouvelles fonctionnalit�s de langage apport�es � la sp�cification ECMAScript suivant un processus normalis� avec 5 �tapes de maturit� : id�e (�tape 0), proposition formelle (�tape 1), brouillon (�tape 2), candidat (�tape 3) et approuv� (�tape 4).

Le groupe Ecma International qui examine et adopte les modifications apport�es aux sp�cifications du langage est le Technical Committee 39, ou TC39. Il travaille actuellement sur les nouvelles fonctionnalit�s � int�grer � ES2019. Pour le moment, aucune nouvelle fonctionnalit� n'a atteint l'�tape 4, mais quelques-unes sont d�j� candidates pour la sp�cification ES2019, c'est-�-dire � l'�tape 3. Ce qui permet donc de se faire une id�e plus ou moins juste des fonctionnalit�s de langage qui pourraient d�barquer dans JavaScript cette ann�e. Et David Neal, Senior Developer Advocate chez Okta et sp�cialiste de la communaut� JavaScript (y compris Node.js et les frameworks front-end populaires tels que React et Vue), a pris soin de les r�pertorier pour nous.


Modifications apport�es aux classes JavaScript

Un certain nombre de modifications ont �t� propos�es aux classes, notamment les d�clarations de champ, les m�thodes et champs priv�s et les m�thodes et champs statiques. Voici un exemple de ce � quoi ces changements pourraient ressembler.

Code JavaScript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
class Truck extends Automobile {
  model = "Heavy Duty"; // public field declaration
  #numberOfSeats = 5; // private field declaration
  #isCrewCab = true;
  static #name = "Truck"; // static private field declaration
 
  // static method
  static formattedName() {
    // Notice that the Truck class name is used
    // to access the static field instead of "this"
    return `This vehicle is a ${ Truck.#name }.`;
  }
  constructor( model, seats = 2 ) {
    super();
    this.seats = seats;
  }
 
  // Private method
  #getBodyType() {
    return this.#isCrewCab ? "Crew Cab" : "Standard Cab";
  }
  bodyType() {
    return `${ this.#numberOfSeats }-passenger ${ this.model } ${ this.#getBodyType() }`;
  }
  get seats() { return this.#numberOfSeats; }
  set seats( value ) {
    if ( value >= 1 && value < 7 ) {
      this.#numberOfSeats = value;
      this.#isCrewCab = value > 3;
    }
  }
}

Pour sa part, David Neal n�aime pas le fait que la syntaxe hash (#) soit utilis�e pour les membres priv�s. Il dit qu'il aurait pr�f�r� que la sp�cification du langage JavaScript adopte le mot-cl� private � cette fin, comme dans les autres langages.

M�thodes trimStart() et trimEnd() pour le type String

Le type String type a une m�thode trim() qui supprime les blancs � la fois au d�but et � la fin d'une cha�ne de caract�res. Les nouvelles m�thodes trimStart() et trimEnd() propos�es pourraient apporter plus de contr�le sur la suppression d'espace vide.

La m�thode trimStart() permet de retirer les blancs au d�but de la cha�ne de caract�res. trimLeft() est un synonyme pour cette m�thode.

Code JavaScript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
 
var str = "   toto  ";
console.log(str.length); // 8
str = str.trimStart();
console.log(str.length); // 5
console.log(str);        // "toto  "

De la m�me mani�re, la m�thode trimEnd() permet de retirer les blancs situ�s � la fin d'une cha�ne de caract�res. trimRight() est un synonyme pour cette m�thode.

Code JavaScript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
 
var str = "   toto  ";
console.log(str.length); // 9
str = str.trimEnd();
console.log(str.length); // 7
console.log(str);        // "   toto"

Ci-dessous, un exemple combinant trimStart et trimEnd :

Code JavaScript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
 
const one = "      hello and let ";
const two = "us begin.        ";
console.log( one.trimStart() + two.trimEnd() ) // "hello and let us begin."

trimStart et trimEnd ne modifient pas la cha�ne elle-m�me. L'int�r�t de cette fonctionnalit� de langage est qu'elle est d�j� impl�ment�e dans un certain nombre de moteurs JavaScript. C'est l'un des nombreux cas o� les navigateurs aident � faire avancer le langage.

Les grands nombres avec BigInt

BigInt est un objet natif qui permet de repr�senter des nombres entiers sup�rieurs � 253 (la plus grande valeur enti�re qui puisse �tre repr�sent�e par le type Number). Un objet BigInt est cr�� en ajoutant un n � la fin d'un litt�ral d'entier � 10n par exemple � ou en appelant la fonction BigInt().

Code JavaScript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
 
const plusGrandEntier = 9007199254740991n;
const grandNombre = BigInt(9007199254740991);
// ↪ 9007199254740991n
 
const grandNombreEnChaîne = BigInt('9007199254740991');
// ↪ 9007199254740991n
 
const grandeNombreHexa = BigInt("0x1fffffffffffff");
// ↪ 9007199254740991n
 
const grandeNombreBinaire = BigInt("0b11111111111111111111111111111111111111111111111111111");
// ↪ 9007199254740991n

Tableaux plats avec flat() et flatMap()

La m�thode flat() permet de cr�er un nouveau tableau contenant les �l�ments des sous-tableaux du tableau pass� en argument, qui sont concat�n�s r�cursivement pour atteindre une profondeur donn�e. Dans les exemples ci-dessous, on aplatit des tableaux imbriqu�s avec flat().

Code JavaScript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
 
var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
 
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
 
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

La m�thode flat() permet �galement de retirer les � trous � d'un tableau :

Code JavaScript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
 
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

La m�thode flatMap() permet d'appliquer une fonction � chaque �l�ment du tableau puis d'aplatir le r�sultat en un tableau. Cela correspond � l'encha�nement de Array.prototype.map() suivi de Array.prototype.flat() de profondeur 1. flatMap est plus efficace que la combinaison de ces deux op�rations, souvent r�alis�es conjointement.

Code JavaScript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
 
var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]
 
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
 
// seul un niveau est aplati
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

On peut utiliser un autre exemple o� on g�n�re une liste de mots � partir d'une liste de phrases :

Code JavaScript : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
 
let tableau1 = ["Coucou comment", "", "ça va ?"];
tableau1.map(x => x.split(" "));
// [["Coucou", "comment"], [""], ["ça", "va", "?"]]
 
tableau1.flatMap(x => x.split(" "));
// ["Coucou", "comment", "", "ça", "va", "?"]


Autres fonctionnalit�s candidates

Parmi les autres fonctionnalit�s candidates (�tape 3), on peut noter :
  • globalThis, qui offre un m�canisme universel d'acc�der � l'objet global m�me dans des fonctions strict ou des modules, quelle que soit la plateforme ;
  • import() dynamique ;
  • des fonctionnalit�s RegExp legacy ;
  • l'objet import.meta, une m�tapropri�t� qui expose des m�tadonn�es d'un module JavaScript sp�cifiques au contexte. Cet objet contient des informations � propos du module, telles que l'URL du module ;
  • matchAll() pour le type String ;
  • Object.fromEntries(), une nouvelle m�thode statique pour transformer une liste de paires cl�-valeur en un objet ;
  • une proposition visant � emp�cher JSON.stringify de retourner des cha�nes mal form�es ; et
  • hashbang (#!) pour les applications CLI.

Depuis quelques ann�es, le TC39 a r�guli�rement publi� de nouvelles �ditions de la sp�cification de langage ECMAScript en juin. Il est donc tr�s probable que la sp�cification ES2019 soit publi�e en juin 2019. Pour ceux qui veulent exp�rimenter ces fonctionnalit�s de langage candidates, certaines sont d�j� disponibles dans les moteurs et les utilitaires JavaScript. Ces nouvelles fonctionnalit�s sont parfois d�sactiv�es par d�faut, mais peuvent �tre configur�es pour �tre utilis�es. Vous pourrez notamment les tester avec la derni�re version de Node.js ou avec Babel 7.0+.

Rappelons que jusqu'� ce qu'une fonctionnalit� de langage atteigne l'�tape 4, rien ne garantit qu'elle fera partie de la sp�cification officielle d'ECMAScript. Toutefois, les impl�mentations de moteur JavaScript, telles que V8 (utilis�e par Chrome et Node.js) et SpiderMonkey de Firefox, peuvent ajouter une prise en charge exp�rimentale des fonctionnalit�s propos�es avant d�atteindre la phase 4, afin que les d�veloppeurs puissent tester et fournir des commentaires.

Sources : David Neal, Mozilla MDN (pour la plupart des exemples de code)

Et vous ?

Que pensez-vous des fonctionnalit�s candidates pour la sp�cification ES2019 ?
Lesquelles appr�ciez-vous le plus ou le moins ? Et pourquoi ?
Avez-vous rep�r� d'autres fonctionnalit�s candidates ES2019 ? Si oui, lesquelles ?
Quelles fonctionnalit�s pr�sentes dans d'autres langages ou pas attendiez-vous pour la prochaine version de JavaScript ? Pourquoi ?