Javascript, Node.js

ES2020 : Quoi de neuf Javascript ?

par Arkerone / 6 avril 2020

ECMAScript 2020 : quoi de neuf JavaScript ?

Une nouvelle version du standard ECMAScript sur lequel repose JavaScript est prévue cette année sous le nom de ES11 ou ES2020. Voyons voir ce que nous réserve cette nouvelle mouture.

Il était une fois…

JavaScript a été créé en 1995 par Brendan Eich. Il a été standardisé sous le nom d’ECMAScript en juin 1997 par Ecma International dans le standard ECMA-262…

Non ne vous inquiétez pas, je ne vais pas vous refaire un historique de JavaScript.

Sachez juste que depuis la version 6 du standard ECMAScript (ES6) sortie en juin 2015, la mise à jour du standard est désormais annuelle. La version 11, abrégé ES11 ou encore ES2020 est prévue logiquement pour le mois de juin de cette année.

Chaque nouvelle fonctionnalité suit un processus normalisé en 5 étapes :

Étape 0 (idée) : Une idée de fonctionnalité est proposée;
Étape 1 (proposition) : L’idée est formalisée avec généralement un aperçu de l’API et des détails d’implémentation;
Étape 2 (brouillon) : Une implémentation expérimentale de la fonctionnalité est fournie. À ce stade, la proposition a des chances de faire partie de la prochaine version de la spécification ;
Étape 3 (candidat) : La proposition de la fonctionnalité est quasiment mature. Celle-ci est en attente d’approbation par les réviseurs;
Étape 4 (approuvée) : La nouvelle fonctionnalité est prête à intégrer la prochaine version de la spécification;

Vous pouvez aller voir les potentielles nouvelles fonctionnalités du standard sur le dépôt Github : https://github.com/tc39/proposals

Quoi de neuf docteur ?

La nouvelle version du standard apporte son lot de nouveautés :

Optional chaining;
nullish coalescing operator;
BigInt;
Promise.allSettled;
String.prototype.matchAll;
globalThis;
import();
for-in.

Optional chaining

Pour commencer, nous allons voir une nouvelle fonctionnalité vraiment pratique qui va vous aidez à réduire votre code et améliorer sa lisibilité, il s’agit d’un nouvel opérateur nommé chaînage optionnel ou « optional chaining ».

Il arrive régulièrement de devoir vérifier l’existence d’un objet avant d’accéder à un attribut de ce dernier.

Prenons un exemple. Imaginons que nous ayons une API REST qui nous renvoie un article de blog au format JSON :

{
   "title":"ES2020: Quoi de neuf Javascript ?",
   "createdAt":"2020-04-02T16:00:00.000Z",
   "author":{
      "username":"Arkerone",
      "email":"contact@codeheroes.fr"
   },
   "comments":[
      {
         "content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
         "createdAt":"2020-04-02T17:00:00.000Z",
         "author":{
            "username":"John Doe",
            "email":"john@doe.com"
         }
      },
      {
         "content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
         "createdAt":"2020-04-02T19:00:00.000Z",
         "author":{
            "username":"Jane Doe",
            "email":"jane@doe.com"
         }
      }
   ]
}

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

{

"title":"ES2020: Quoi de neuf Javascript ?",

"createdAt":"2020-04-02T16:00:00.000Z",

"author":{

"username":"Arkerone",

"email":"contact@codeheroes.fr"

},

"comments":[

{

"content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit...",

"createdAt":"2020-04-02T17:00:00.000Z",

"author":{

"username":"John Doe",

"email":"john@doe.com"

}

},

{

"content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit...",

"createdAt":"2020-04-02T19:00:00.000Z",

"author":{

"username":"Jane Doe",

"email":"jane@doe.com"

}

}

]

}

Nous stockons cette réponse dans une variable post et nous souhaitons ensuite accéder au nom d’utilisateur de l’auteur du premier commentaire :

const postComments = post && post.comments; // (1)
const firstComment = postComments && postComments[0]; // (2)
const author = firstComment && firstComment.author; // (3)
const username = author && author.username; // (4)

1

2

3

4

const postComments = post && post.comments; // (1)

const firstComment = postComments && postComments[0]; // (2)

const author = firstComment && firstComment.author; // (3)

const username = author && author.username; // (4)

On vérifie que la variable post existe, si c’est le cas on récupère son tableau de commentaires;
On vérifie que le tableau de commentaires existe, si c’est le cas on récupère le premier commentaire;
On vérifie que le premier commentaire existe, si c’est le cas on récupère l’auteur;
Et enfin, on vérifie que l’auteur existe et si c’est le cas on récupère son nom d’utilisateur.

Fiouf !!! La syntaxe est lourde non ? C’est quelque chose que l’on rencontre régulièrement notamment en front quand on souhaite récupérer des données provenant d’une API.

Bref, parlons de cet opérateur de chaînage optionnel, celui-ci s’écrit ?. et fonctionne de la même manière que l’opérateur de chaînage traditionnel . sauf que contrairement à celui-ci , l’opérateur ?. ne provoque pas d’erreur si l’un des éléments de la chaîne vaut null ou undefined et renvoie à la place undefined.

Voyons voir notre exemple précédent en utilisant ce nouvel opérateur :

const usernameOptionalChaining = post?.comments?.[0]?.author?.username;

1	const usernameOptionalChaining = post?.comments?.[0]?.author?.username;

Il n’y a pas photos c’est quand même plus propre ! On peut également l’utiliser avec un appel de fonction :

post?.setTitle?.('ES2021: Bienvenue dans le futur');

1	post?.setTitle?.('ES2021: Bienvenue dans le futur');

Nullish coalescing Operator

Nous avons régulièrement besoin d’attribuer une valeur par défaut à une variable si une autre variable qu’on lui affecte n’existe pas, pour cela nous utilisons l’opérateur logique ||.

Prenons l’exemple de paramètres d’une API REST que nous récupérons depuis un objet config :

// expression 1 || expression 2

const hostname = config.baseURL || 'localhost';
const port = config.port || 80;
const debug = config.debug || true;

1

2

3

4

5

// expression 1 || expression 2

const hostname = config.baseURL || 'localhost';

const port = config.port || 80;

const debug = config.debug || true;

L’opérateur || renvoie la première expression si celle-ci est évaluée à true sinon il renvoie la seconde expression.

L’avantage de cette syntaxe est qu’elle est plus concise par rapport à l’utilisation d’une condition ternaire :

const baseURL = config.baseURL ? config.baseURL : 'localhost';
const port = config.port ? config.port : 80;
const debug = config.debug ? config.debug : true;

1

2

3

const baseURL = config.baseURL ? config.baseURL : 'localhost';

const port = config.port ? config.port : 80;

const debug = config.debug ? config.debug : true;

Malheureusement, cela pose certains soucis avec les « falsy values« . Les « falsy values » sont des valeurs qui sont évaluées à false quand elles sont utilisées dans un contexte booléen (comme les conditions, les opérateurs logiques, les boucles, etc.).

En JavaScript, les « falsy values » sont :

false ;
0;
"" ou '';
null;
undefined;
NaN.

On se rend compte que dans notre exemple, config.debug || true renverra true si la propriété debug de l’objet config est égale à false.

Il est possible de remédier à ce problème en utilisant une condition if/else ou une condition ternaire :

const debug = config.debug !== null && typeof config.debug !== 'undefined' ? config.debug : true;

1	const debug = config.debug !== null && typeof config.debug !== 'undefined' ? config.debug : true;

Mais ECMAScript 11, propose un nouvel opérateur nommé le « nullish coalescing operator » qui s’écrit ??. Celui-ci s’utilise de la même façon que l’opérateur || à la différence qu’il renvoie la première expression si celle-ci est différente de null ou undefined et la seconde expression dans le cas contraire.

Ce qui donne pour notre exemple :

const baseURL = config.baseURL ?? 'localhost';
const port = config.port ?? 80;
const debug = config.debug ?? true;

1

2

3

const baseURL = config.baseURL ?? 'localhost';

const port = config.port ?? 80;

const debug = config.debug ?? true;

BigInt

Nous avions jusqu’à présent sept types en JavaScript :

number : Les nombres, qu’il soit entiers ou décimaux stockés, au format 64 bits IEEE-754, également appelés nombres à virgule flottante double précision. La valeur des nombres entiers ne peut pas être supérieur à 2⁵³ -1 et inférieur à -2⁵³ -1 ;
string : Les chaînes de caractères au format UTF-16;
boolean : Représente les valeurs booléennes true ou false;
null : Ce type ne possède qu’une seule valeur : null. Il représente l’absence de valeur ou la non-existence d’une référence (bonus n°1 : pourquoi typeof null renvoie object ? );
undefined : ce type ne possède qu’une seule valeur : undefined. Il représente la valeur d’une variable déclarée, mais non assignée;
symbol : Ce type permet de créer des valeurs uniques pouvant notamment être utilisées pour représenter des identifiants de propriétés d’un objet;
object : Le type object permet de stocker des collections de données et créer des entités plus complexes;

Bonus n°2 : Les six premiers types sont appelés primitives, ils sont passés par valeur lors de l’appel d’une fonction contrairement au type object qui lui est passé par référence.

La nouvelle version du standard ajoute un huitième type qui est bigint.

Pourquoi utiliser BigInt ?

Comme nous l’avons vu, la valeur des nombres entiers ne peut pas être supérieure à 2⁵³ et inférieur à -2⁵³, cela s’explique par le fait que le type number est stocké, au format 64 bits IEEE-754, permettant de représenter des nombres à virgule flottante et que seulement 53 bits (+ 1 bit de signe) sont utilisés pour représenter les entiers. Je vous invite à aller lire cet article pour mieux comprendre (https://2ality.com/2012/04/number-encoding.html)

Cependant, il arrive parfois que l’on ait besoin de représenter des nombres entiers allant au-delà de ces limites. Par exemple :

Utiliser de grands nombres entiers comme identifiants uniques, comme c’est le cas pour Twitter qui utilise un nombre entier de 64 bits pour leur identifiant de tweets;
Avoir un timestamp à haute précision (à la nanoseconde par exemple);
Communiquer avec un autre système qui représente ses entiers en 64 bits;

Comment ça s’utilise ?

C’est très simple pour créer un bigint, il suffit d’ajouter le suffixe n à un entier ou bien en appelant la fonction BigInt et en lui passant en paramètre soit une chaîne de caractères soit un entier :

const bigInt = 987654321987654321987654321987654321987654321n;
const bigIntFromString = BigInt('987654321987654321987654321987654321987654321');
const bigIntFromInt = BigInt(123);

1

2

3

const bigInt = 987654321987654321987654321987654321987654321n;

const bigIntFromString = BigInt('987654321987654321987654321987654321987654321');

const bigIntFromInt = BigInt(123);

Opérateurs arithmétiques

Les opérateurs arithmétiques sont bien entendu utilisables :

console.log(10n + 20n); // 30n
console.log(20n - 10n); // 10n
console.log(10n * 20n); // 200n
console.log(2n ** 2n); // 4n
console.log(7n / 2n); // 3n

1

2

3

4

5

console.log(10n + 20n); // 30n

console.log(20n - 10n); // 10n

console.log(10n * 20n); // 200n

console.log(2n ** 2n); // 4n

console.log(7n / 2n); // 3n

Vous remarquerez que la division ne garde que la partie entière.

Il n’est pas possible par contre de mélanger des entiers de type bigint avec des entiers de type number :

const bigInt = 10n;
const number = 20;

console.log(bigInt + number); // TypeError: Cannot mix BigInt and other types, use explicit conversions

1

2

3

4

const bigInt = 10n;

const number = 20;

console.log(bigInt + number); // TypeError: Cannot mix BigInt and other types, use explicit conversions

Nous devons explicitement convertir les entiers de type number en bigint :

const bigInt = 10n;
const number = 20;

console.log(bigInt + BigInt(number)); // 30n

1

2

3

4

const bigInt = 10n;

const number = 20;

console.log(bigInt + BigInt(number)); // 30n

Opérateurs de comparaison

Les opérateurs de comparaisons sont quant à eux utilisables avec les entiers de type bigint et de type number :

console.log(10n > 5n); // true
console.log(10n > 5); // true
console.log(5n < 10n); // true
console.log(5 < 10n); // true
console.log(10n == 10); // true
console.log(10n === 10); // false

1

2

3

4

5

6

console.log(10n > 5n); // true

console.log(10n > 5); // true

console.log(5n < 10n); // true

console.log(5 < 10n); // true

console.log(10n == 10); // true

console.log(10n === 10); // false

Bien entendu l’opérateur « === » renvoie false puisque celui-ci vérifie à la fois que les deux opérandes sont égaux, mais aussi de même type.

Promise.allSettled

Avant de commencer de parler de cette nouvelle fonctionnalité, il est bon de rappeler les différents états d’une promesse :

En attente (pending) : L’état initial de la promesse;
Résolue (fulfilled) : En cas de succès du traitement asynchrone;
Rejetée (rejected): En cas d’erreur du traitement asynchrone;
Acquittée (settled) : Lorsque la promesse est terminée, c’est-à-dire soit résolue ou rejetée;

Les différents états d’une promesse

Lorsque l’on souhaite lancer plusieurs promesses en parallèle, nous disposons actuellement de deux fonctions :

Promise.all : Cette méthode renvoie une promesse qui est résolue quand l’ensemble des promesses ont été résolues ou qui est rejetée dès que la première des promesses acquittées est rejetée;
Promise.race : Cette méthode renvoie une promesse qui est résolue ou rejetée dès que la première des promesses acquittées est résolue ou rejetée.

Prenons un petit exemple :

const p1 = new Promise(resolve => resolve(1));
const p2 = Promise.resolve(2);
const p3 = Promise.reject('reject');
const p4 = Promise.resolve(4);

Promise.all([p1, p2]).then(values => console.log(values)); // [1, 2]
Promise.all([p3, p4]).catch(error => console.log(error)); // reject

Promise.race([p1, p2]).then(values => console.log(values)); // 1
Promise.all([p3, p4]).catch(error => console.log(error)); // reject

1

2

3

4

5

6

7

8

9

10

const p1 = new Promise(resolve => resolve(1));

const p2 = Promise.resolve(2);

const p3 = Promise.reject('reject');

const p4 = Promise.resolve(4);

Promise.all([p1, p2]).then(values => console.log(values)); // [1, 2]

Promise.all([p3, p4]).catch(error => console.log(error)); // reject

Promise.race([p1, p2]).then(values => console.log(values)); // 1

Promise.all([p3, p4]).catch(error => console.log(error)); // reject

Comment faire lorsque l’on souhaite attendre l’acquittement de l’ensemble des promesses, quels que soient leurs états (résolues ou rejetées) ?

C’est là qu’entre en jeu la méthode Promise.allSettled. Celle-ci renvoie une promesse qui est résolue une fois que l’ensemble des promesses ont été acquittées (résolues ou rejetées).

Reprenons l’exemple précédent :

const p1 = new Promise(resolve => resolve(1));
const p2 = Promise.resolve(2);
const p3 = Promise.reject('reject');
const p4 = Promise.resolve(4);

Promise.allSettled([p1, p2, p3, p4]).then(values =>
  console.log(values)
); 
/* [
{ status: 'fulfilled', value: 1 },
{ status: 'fulfilled', value: 2 },
{ status: 'rejected', reason: 'reject' },
{ status: 'fulfilled', value: 4 }
]
*/

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

const p1 = new Promise(resolve => resolve(1));

const p2 = Promise.resolve(2);

const p3 = Promise.reject('reject');

const p4 = Promise.resolve(4);

Promise.allSettled([p1, p2, p3, p4]).then(values =>

console.log(values)

);

/* [

{ status: 'fulfilled', value: 1 },

{ status: 'fulfilled', value: 2 },

{ status: 'rejected', reason: 'reject' },

{ status: 'fulfilled', value: 4 }

]

*/

Bonus n°3 : Une autre fonctionnalité, concernant les promesses, est en cours de validation (étape 3), il s’agit de la méthode Promise.any qui renvoie une promesse résolue dès l’acquittement d’une des promesses.

String.prototype.matchAll

On va s’attaquer à un sujet que tous les développeurs aiment et maîtrisent parfaitement : les expressions régulières (comment ça je troll ?).

Entrons dans le vif du sujet et voyons comment extraire les couples clé/valeur, séparés par le caractère =, dans la chaîne de caractères suivante :

const keysValues = 'firstName=John lastName=Doe email=john@doe.com';

1	const keysValues = 'firstName=John lastName=Doe email=john@doe.com';

Nous allons pour cela utiliser une expression régulière, comme nous sommes tous des développeurs ayant fait regex LV2, nous écrivons celle-ci sans aucun problème :

let regexp = /([^=|\s]+)=([^\s]+)/g;

1	let regexp = /([^=\|\s]+)=([^\s]+)/g;

Pour les autres, détaillons notre expression régulière :

([^=|\s]+) : Le premier groupe capturant permettant d’extraire la clé, celui-ci est composé de n’importe quel caractère à l’exception du caractère = et des espaces blancs ( espace, tabulation, saut de ligne ou saut de page);
= : Le caractère séparant la clé de sa valeur;
([^\s]+) : Le second groupe capturant permettant d’extraire cette fois-ci la valeur, celui-ci est composé de n’importe quel caractère à l’exception des espaces blancs ( espace, tabulation, saut de ligne ou saut de page).

Le flag « g » à la fin de l’expression régulière indique que l’on souhaite rechercher toutes les correspondances possibles.

Voyons à présent ce que nous propose la version actuelle du standard ECMAScript, pour extraire la clé et la valeur.

La méthode String.prototype.match

La méthode String.prototype.match permet d’obtenir un tableau contenant l’ensemble des correspondances entre une chaîne de caractères et une expression régulière.

Appliquons cette méthode à notre exemple :

let regexp = /([^=|\s]+)=([^\s]+)/g;
const keysValues = 'firstName=John lastName=Doe email=john@doe.com';

console.log(keysValues.match(regexp));
/* 
  [ 
    'firstName=John', 
    'lastName=Doe', 
    'email=john@doe.com'
  ]
*/

1

2

3

4

5

6

7

8

9

10

11

let regexp = /([^=|\s]+)=([^\s]+)/g;

const keysValues = 'firstName=John lastName=Doe email=john@doe.com';

console.log(keysValues.match(regexp));

/*

[

'firstName=John',

'lastName=Doe',

'email=john@doe.com'

]

*/

Le résultat que cette méthode n’est pas vraiment celui que l’on attendait. Cela s’explique par la présence du flag « g » qui change le résultat de cette méthode. S’il est présent, toutes les correspondances sont renvoyées, mais sans leurs groupes capturants.

La méthode RegExp.prototype.exec

On a vu que précédemment que la méthode String.prototype.match ne fonctionnait pas comme nous le souhaitions avec le flag « g » pour extraire les groupes capturants.

Une solution est de faire appel à la méthode RegExp.prototype.exec. Cette méthode retourne une correspondance entre une expression régulière et une chaîne de caractères.

Si l’on utilise cette méthode avec le flag « g« , celle-ci garde en mémoire l’index à partir duquel chercher la prochaine correspondance. Si aucune correspondance n’est trouvée la méthode renvoie null. Il est donc possible de boucler sur l’exécution de cette méthode afin de trouver l’ensemble des correspondances :

let regexp = /([^=|\s]+)=([^\s]+)/g;
const keysValues = 'firstName=John lastName=Doe email=john@doe.com';

const matches = [];
let match = null;
while ((match = regexp.exec(keysValues))) {
  matches.push(match);
}
console.log(matches);
/*
[
  [
    'firstName=John',
    'firstName',
    'John',
    index: 0,
    input: 'firstName=John lastName=Doe email=john@doe.com',
    groups: undefined
  ],
  [
    'lastName=Doe',
    'lastName',
    'Doe',
    index: 15,
    input: 'firstName=John lastName=Doe email=john@doe.com',
    groups: undefined
  ],
  [
    'email=john@doe.com',
    'email',
    'john@doe.com',
    index: 28,
    input: 'firstName=John lastName=Doe email=john@doe.com',
    groups: undefined
  ]
]
*/

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

34

35

36

37

let regexp = /([^=|\s]+)=([^\s]+)/g;

const keysValues = 'firstName=John lastName=Doe email=john@doe.com';

const matches = [];

let match = null;

while ((match = regexp.exec(keysValues))) {

matches.push(match);

}

console.log(matches);

/*

[

[

'firstName=John',

'firstName',

'John',

index: 0,

input: 'firstName=John lastName=Doe email=john@doe.com',

groups: undefined

],

[

'lastName=Doe',

'lastName',

'Doe',

index: 15,

input: 'firstName=John lastName=Doe email=john@doe.com',

groups: undefined

],

[

'email=john@doe.com',

'email',

'john@doe.com',

index: 28,

input: 'firstName=John lastName=Doe email=john@doe.com',

groups: undefined

]

]

*/

Cette solution n’est pas idéale, car elle pose un souci dans le cas où le flag « g » a été omis. En effet, la méthode RegExp.prototype.exec renverra à chaque fois la première correspondance créant ainsi une boucle infinie.

La méthode String.prototype.matchAll à la rescousse

La nouvelle méthode String.prototype.matchAll va permettre de remédier aux problèmes vus précédemment. Celle-ci renvoie un itérateur contenant l’ensemble des correspondances et leurs groupes capturants entre une chaîne de caractères et une expression régulière.

let regexp = /([^=|\s]+)=([^\s]+)/g;
const keysValues = 'firstName=John lastName=Doe email=john@doe.com';

const matches = keysValues.matchAll(regexp);

for (let match of matches) {
  console.log(match);
  /*
     [
      'firstName=John',
      'firstName',
      'John',
      index: 0,
      input: 'firstName=John lastName=Doe email=john@doe.com',
      groups: undefined
    ]
    etc...
  */
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

let regexp = /([^=|\s]+)=([^\s]+)/g;

const keysValues = 'firstName=John lastName=Doe email=john@doe.com';

const matches = keysValues.matchAll(regexp);

for (let match of matches) {

console.log(match);

/*

[

'firstName=John',

'firstName',

'John',

index: 0,

input: 'firstName=John lastName=Doe email=john@doe.com',

groups: undefined

]

etc...

*/

}

Il est également possible de convertir l’itérateur en tableau via l’opérateur de décomposition (spread operator):

const matches = [...keysValues.matchAll(regexp)];

1	const matches = [...keysValues.matchAll(regexp)];

ou la méthode « Array.from » :

const matches = Array.from(keysValues.matchAll(regexp));

1	const matches = Array.from(keysValues.matchAll(regexp));

Cette méthode provoque également une erreur TypeError dans le cas où le flag « g » est manquant de l’expression régulière.

globalThis

Il arrive parfois que nous ayons besoin d’accéder au contexte global. Ce contexte global est différent suivant l’environnement d’exécution :

window : Dans le cas du navigateur web;
self : Dans le cas de l’utilisation d’un web worker;
global : Dans le cas de l’environnement NodeJS.

L’accès à ce contexte global peut se justifier par exemple pour la vérification de l’existence d’une fonctionnalité ou l’ajout d’une fonctionnalité via un polyfill.

Prenons comme exemple la vérification de la prise en charge du type BigInt par l’environnement d’exécution et l’utilisation d’un polyfill dans le cas où celui-ci n’est pas présent :

let globalContext = null;

if (typeof self !== 'undefined') {
  globalContext = self;
}
if (typeof window !== 'undefined') {
  globalContext = window;
}
if (typeof global !== 'undefined') {
  globalContext = global;
}

if (!globalContext) {
  throw new Error('Unable to locate the global context');
}

if (!globalContext.BigInt) {
  // Create your BigInt polyfill
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

let globalContext = null;

if (typeof self !== 'undefined') {

globalContext = self;

}

if (typeof window !== 'undefined') {

globalContext = window;

}

if (typeof global !== 'undefined') {

globalContext = global;

}

if (!globalContext) {

throw new Error('Unable to locate the global context');

}

if (!globalContext.BigInt) {

// Create your BigInt polyfill

}

Cette manière de faire n’est par contre pas pérenne, si de nouveaux environnements d’exécution voient le jour nous devrons mettre à jour notre code.

La nouvelle version du standard nous fournit une propriété standardisée globalThis permettant d’accéder au contexte global, quel que soit l’environnement.

Notre code précédent se retrouve ainsi grandement simplifié :

if (!globalThis.BigInt) {
  // Create your BigInt polyfill
}

1

2

3

if (!globalThis.BigInt) {

// Create your BigInt polyfill

}

Le nom globalThis a été choisi en référence au fait que la valeur this peut faire référence au contexte global comme nous avons pu le voir dans un précédent article.

import()

L’importation de modules se fait via l’instruction import :

import myModule from './my-module';

1	import myModule from './my-module';

L’utilisation de module ECMAScript pour NodeJS est encore au stade expérimental.

Cette importation de modules se fait de façon statique, ce qui ne pose aucun souci dans 90% des cas. Mais il arrive que l’on ait besoin d’importer un module de façon dynamique. C’est le cas par exemple de l’utilisation d’un module pollyfill si une fonctionnalité n’est pas présente par défaut ou pour charger des fonctionnalités à la demande.

Malheureusement, il n’est pas possible d’importer un module de façon dynamique avec cette instruction, que ce soit via une variable ou une condition :

// Importation d'un module via une variable
import myModule from myModulePath; // SyntaxError: Unexpected identifier

// Importation d'un module via une fonction
import dynamicModule from getDynamicModule(); // SyntaxError: Unexpected identifier

// Importation d'un polyfill de la méthode matchAll si celle-ci n'existe pas
if (!String.prototype.matchAll) {
  import './matchAll-polyfill.js'; // SyntaxError: import declarations may only appear at top level of a module
}

1

2

3

4

5

6

7

8

9

10

// Importation d'un module via une variable

import myModule from myModulePath; // SyntaxError: Unexpected identifier

// Importation d'un module via une fonction

import dynamicModule from getDynamicModule(); // SyntaxError: Unexpected identifier

// Importation d'un polyfill de la méthode matchAll si celle-ci n'existe pas

if (!String.prototype.matchAll) {

import './matchAll-polyfill.js'; // SyntaxError: import declarations may only appear at top level of a module

}

Nous devons pour cela utiliser l’importation dynamique de modules via l’instruction import(). Cette instruction charge un module de façon asynchrone et retourne une promesse qui, si elle est résolue, renvoie le module en question :

import(myModulePath).then((myModule) => console.log(myModule));

import(getDynamicModule()).then((dynamicModule) => console.log(dynamicModule));

if (!String.prototype.matchAll) {
  import('./matchAll-polyfill.js').then((matchAllModule) => console.log(matchAllModule));
}

1

2

3

4

5

6

7

import(myModulePath).then((myModule) => console.log(myModule));

import(getDynamicModule()).then((dynamicModule) => console.log(dynamicModule));

if (!String.prototype.matchAll) {

import('./matchAll-polyfill.js').then((matchAllModule) => console.log(matchAllModule));

}

On peut également charger dynamiquement plusieurs modules en même temps via la méthode Promise.all :

Promise.all([
  import(myModulePath),
  import(getDynamicModule())
])
  .then(([myModule, dynamicModule]) => {
    console.log(myModule, dynamicModule);
  });

1

2

3

4

5

6

7

Promise.all([

import(myModulePath),

import(getDynamicModule())

])

.then(([myModule, dynamicModule]) => {

console.log(myModule, dynamicModule);

});

Et également utiliser une fonction async :

(async () => {
  const [myModule, dynamicModule] = Promise.all([
    import(myModulePath),
    import(getDynamicModule())
  ]);

  if (!String.prototype.matchAll) {
    await import('./matchAll-polyfill.js');
  }
})();

1

2

3

4

5

6

7

8

9

10

(async () => {

const [myModule, dynamicModule] = Promise.all([

import(myModulePath),

import(getDynamicModule())

]);

if (!String.prototype.matchAll) {

await import('./matchAll-polyfill.js');

}

})();

Pour accéder à l’exportation par défaut d’un module vous devez utiliser la propriété default du module chargé :

(async () => {
  const myModule = await import(myModulePath);
  console.log(dynamicModule.default);
})();

1

2

3

4

(async () => {

const myModule = await import(myModulePath);

console.log(dynamicModule.default);

})();

for…in

Vous allez me dire, mais la boucle for...in existe depuis un moment et vous avez entièrement raison. Mais alors c’est quoi cette nouvelle fonctionnalité ?

Ben il n’y a pas vraiment de nouvelle fonctionnalité, mais juste une mise au point au niveau du standard concernant le comportement de la boucle for...in . Jusqu’à présent, l’ordre dans lequel les éléments devaient être parcourus n’était pas défini et chaque moteur JavaScript possédait son ordre de parcours. Avec cette mise à jour, l’ordre de parcours est standardisé.

Quid de la compatibilité ?

Le nouveau standard d’ECMAScript apporte son lot de nouveautés particulièrement intéressantes. Malheureusement ses fonctionnalités ne sont pas supportées par tous les navigateurs ou par NodeJS, je vous invite à visiter le site Caniuse pour vérifier la compatibilité de chaque fonctionnalité pour les navigateurs et node.green pour NodeJs.

En route vers le futur ?

Il y a d’autres fonctionnalités intéressantes qui pourraient à l’avenir faire partie du standard. Celles-ci sont visibles sur le dépôt Github du standard : https://github.com/tc39/proposals.

Si cet article vous a intéressé, n’hésitez pas à me le dire et j’en ferais un second (plus court) sur les fonctionnalités à venir.

En attendant, allez réviser vos Regex (#troll).

Je suis lead developer dans une boîte spécialisée dans l’univers du streaming/gaming, et en parallèle, je m’éclate en tant que freelance. Passionné par l’écosystème JavaScript, je suis un inconditionnel de Node.js depuis 2011. J’adore échanger sur les nouvelles tendances et partager mon expérience avec les autres développeurs.

Si vous avez envie de papoter, n’hésitez pas à me retrouver sur Twitter, m’envoyer un petit email ou même laisser un commentaire.

Je suis lead developer dans une boîte spécialisée dans l'univers du streaming/gaming, et en parallèle, je m'éclate en tant que freelance. Passionné par l'écosystème JavaScript, je suis un inconditionnel de Node.js depuis 2011. J'adore échanger sur les nouvelles tendances et partager mon expérience avec les autres développeurs. Si vous avez envie de papoter, n'hésitez pas à me retrouver sur Twitter, m'envoyer un petit email ou même laisser un commentaire.

4 commentaires

Ping : ES2020 : Quoi de neuf Javascript ? – Veille Développeur Web
Ping : ES2020: Quoi de Neuf JavaScript? – Full-Stack Feed
Ping : ES2020 : Les nouveautés de la mise à jour annuelle d’ECMAScript . - Les News de Séb
Markus dit :
10 avril 2020 à 12 h 10 min
Merci pour cet article fort instructif.
Répondre

Laisser un commentaire Annuler la réponse

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.