
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 ?



