JavaScript Nouvelles fonctionnalités pour 2020

JavaScript Nouvelles fonctionnalités pour 2020

Si vous êtes un développeur JavaScript, vous savez probablement que l'ECMAScript 2020 vient de sortir. Par conséquent, cela apporte également des fonctionnalités intéressantes à JavaScript. Je veux juste vous faire connaître certaines des fonctionnalités qui pourraient vous aider beaucoup dans vos projets futurs !

Chaînage optionnel

const testing = {
    key1: "value1"
}

console.log(testing.key2.name); // provoque une erreur si la clé n'est pas définie

console.log(testing?.key2?.name); // donne indéfini si la clé n'est pas définie

En regardant l'exemple ci-dessus, vous comprenez peut-être déjà la puissance du Chaînage optionnel. Il n'ajoute pas de sucre syntaxique au code, mais vous donne aussi le pouvoir de vérifier la clé immédiatement. Avant cela, nous utilisions hasOwnProperty() pour vérifier l'existence de la clé afin d'éviter les erreurs. C'est sans aucun doute l'une des grandes caractéristiques introduites dans JavaScript 2020.

Promise.allSettled()

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));

Promise.allSettled([promise1, promise2]).
  then((results) => console.log(results));

Sortie : output

Promise.allSettled() est une nouvelle méthode introduite en JavaScript 2020. JavaScript possède déjà une méthode similaire à celle-ci, à savoir Promise.all(). Mais il y a une légère différence entre le fonctionnement des deux méthodes.

Promise.all() : Si l'une des promesses échoue, alors toutes les autres promesses échouent. Promise.all() est alors rejetée.

Promise.allSettled() : Elle renvoie le statut de toutes les promesses après tout, les promesses tenues malgré chaque promesse résolue ou rejetée. Vous pouvez le rendre clair en examinant l'exemple ci-dessus et son résultat.

Importation dynamique

async function doSomething(){
   const lib = await import('heavylib');

   //do something with *lib*
}

doSomething();

L'importation dynamique nous permet de charger des bibliothèques/modules externes lorsque nous en avons besoin. Auparavant, nous avions l'habitude de charger les bibliothèques/modules en haut, bien que tous les modules ne soient pas nécessaires immédiatement. Certains devaient l'être plus tard dans le programme.

Le principal avantage de cette méthode est que nous pouvons réduire le temps de chargement du site web. Et c'est ce que la plupart des propriétaires de sites web veulent avoir. Il peut être un outil utile lorsque la performance est le principal objectif de votre projet.

Nullish Coalescing Operator

let num = 0;

console.log(num || 10); //10 

console.log(num ?? 10); // 0

console.log(null ?? 10); // 10

C'est l'une de mes caractéristiques préférées introduite dans JavaScript 2020. Elle est utile lorsque nous voulons valider l'existence de données.

Supposons que je veuille vérifier si une variable particulière n'a pas de valeur, alors je veux lui attribuer une valeur prédéfinie. Nous pouvons obtenir la même chose avec l'opérateur logique OU, mais il y a un problème : il considère le zéro comme une valeur erronée alors que le zéro peut être une valeur valide. En fait, c'est le problème résolu par ce nouvel opérateur. Il ne considère que les valeurs nulles et indéfinies comme des valeurs erronées alors que zéro est une valeur valide.

Je tiens à vous faire savoir que ce n'est pas tout. J'ai mis en évidence les caractéristiques qui, je pense, vous aideront dans vos futurs projets !