Javascript ES2020, 3 nouveautés dont vous ne pourrez plus vous passer

es2020 new features

Javascript ES2020 introduit de nouvelles fonctionnalités! Ce langage de programmation est en constante évolution et les mise à jour ne manque pas d’enthousiasmer les développeurs qui attendent à chaque fois avec impatience les nouvelles implementations de fonctionnalité d’Ecma Script

Javascript ES2020 est donc la nouvelle version en cours de validation par la firme ECMA qui n’a pas encore standardisé et annoncé la release officiel sur son site, mais certains navigateurs web ainsi que la V8 de Chrome commence déjà à implémenter les nouvelles features validées par le consortium.

Il nous est donc possible avec les outils de développement traditionnel (Webpack, Parcel, Babel etc….) d’utiliser ces nouvelles fonctionnalités dans notre code.

Je vais vous présenter quelques une de ces nouvelles fonctionnalités disponibles qui a mon sens, vont grandement vous être utiles dans votre vie de développeur de tous les jours.

Opérateur coalescent Null (Nullish Coalescing Operator)

Rien que le nom est fou! Vous connaissiez ce mot? Coalescent? Je vous mets le lien vers une explication Wikipédia histoire d’apprendre un nouveau mot pour que vous compreniez la signification et ainsi vous allez vite comprendre ce que cela permet de faire avec Javascript. Explication du mot « Coalescent » sur Wikipédia .

Donc avec Javascript… Cette nouvelle fonctionnalité est très utile pour vérifier vraiment les valeurs Null au lieu des valeurs de False. Quelle est la différence entre les valeurs Null et False, vous demandez-vous? Voici l’explication.

En JavaScript, beaucoup de valeurs sont considérée false, comme les chaînes vides, le nombre 0, non défini, null, false, NaN, etc. Jusqu’à la tout le monde me suit…

Mais les chose se compliquerons au moment où vous allez vouloir vérifier si une variable est inexistante – c’est-à-dire si elle est soit non définie, soit avec la valeur Null.

Maintenant avec le nouvel opérateur de coalescence vous pouvez effectuer ce test avec la syntaxe suivante:

// Opérateur de coalescent
const test = false ?? 'test';
console.log(test); // affiche: false

// exemple avec un opérateur de comparaison standard
const test = false || 'test';
console.log(test); // affiche: test

Vous voyez la différence? Pratique non? Aller feature suivante.

Chaînage optionnel (Optional Chaining)

Alors là on touche à mon avis à la meilleure des features implémentée depuis longtemps. Et devinez quoi?? Ceux qui utilisent Angular vont immédiatement reconnaitre cette feature puisqu’elle est directement inspirée de ce framework. En effet, avec Angular lorsque vous effectuez un template binding avec un objet, vous avec a possibilité d’accéder aux propriétés de l’objet de cette façon:

const person = {name: 'Doe', address: {street: 'holliwood bvd'}};
console.log(person?.address?.street); // affiche: holliwood bvd

Vous avez remarqué le symbole ? (point d’interrogation) entre chaque propriété de l’objet? C’est cette feature qui a été introduite! Elle permet d’accéder à une propriété imbriquée, si celle-ci n’existe pas Javascript nous retournera « undefined ». Tellement pratique pour les tests conditionnels!!

if (person?.address?.street) {
  // have proprety "street"
} else {
  // proprety "street" no exist
}

// à la place de 
if (person && person.address && person?.address?.street) {
  // have proprety "street"
} else {
  // proprety "street" no exist
}

Royal non?? Celle-ci vous n’allez plus pouvoir vous en passer 😉

Dynamique Import (Importation dynamique)

Voilà encore une feature très utile et attendue depuis longtemps! Elle permet d’importer un module à la demande en fonction de notre contexte (oui elle existe aussi depuis la version 8 de Angular).

Voici un exemple qui vous permettra de bien comprendre cette fonctionnalité:

if (condition) {
  const myModule = await import('../my-module/dynamic-module.js');
  // vous pouvez utiliser votre module à partir d'ici
  myModule.init();
}

Cela permet de minimiser la taille du code exécuté codé client et donc d’accélérer drastiquement les applications conçues avec des modules.

Conclusion

Vous l’aurez compris, Javascript est un language de programmation de plus en plus puissant qui rivalise depuis un moment avec d’autres languages backend. Javascript évolue rapidement et implémente continuellement de nouvelles fonctionnalités inspirée des gros framework pour faciliter la programmation. Ces trois nouvelles features sont qu’un extrait des nouvelles possibilités qu’offre ES2020. Je reviendrai plus en détail sur les autres fonctionnalités dans un prochain article.

Voilà, j’espère que cet article vous a plu. N’hésitez pas à aller regarder les autres articles traitant du même sujet dans la section Javascript

Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.

Demande ta version numérique gratuite de mon livre Javascript Array Methods

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *