Découvrez ces nouvelles fonctionnalités introduites dans JavaScript ES2021

Cet article couvre les fonctionnalités introduites dans ES2021 ainsi que l'histoire de JavaScript et d'ECMAScript.

Avant de discuter des nouvelles fonctionnalités ES12, prenons le temps de faire la lumière sur l'un des problèmes rencontrés par les nouveaux développeurs JavaScript. , qui est la différence entre JavaScript et ECMAScript.

Un peu d'histoire sur JavaScript et ECMAScript

Il est important de noter que JavaScript est venu avant ECMAscript. De plus, JavaScript s'appelait à l'origine Mocha, un nom choisi par le fondateur de Netscape, Marc Andreessen. Il a été renommé quatre mois plus tard en LiveScript, puis est finalement devenu JavaScript.

Brendan Eich, le créateur de JavaScript, a été invité à développer un langage ressemblant à Java (Java était un langage très populaire à l'époque et l'est toujours) pour le Web. Eich, cependant, a décidé que Java était trop compliqué avec toutes ses règles et a donc entrepris de créer un langage plus simple et convivial pour les débutants.

Une fois JavaScript/Mocha terminé, l'équipe marketing de Netscape a demandé à Sun Microsystems de les autoriser. pour le nommer JavaScript comme un coup marketing et donc pourquoi la plupart des gens qui n'ont jamais utilisé JavaScript pensent qu'il est lié à Java. Environ un an et demi après la sortie de JavaScript, l'équipe IE de Microsoft a pris le langage et a commencé à créer ses propres implémentations connues sous le nom de JScript. Comme à cette époque, IE dominait le marché, et peu de temps après que Netscape ait dû fermer son projet.

Enfin, avant que Netscape ne tombe en panne, ils ont décidé de lancer un standard qui guiderait le chemin de JavaScript, nommé ECMAScript. Ainsi, ECMAScript peut être considéré comme un langage, tandis que JavaScript, JScript et d'autres sont appelés « dialectes ». Selon Wikipedia :
« ECMAScript est un langage de programmation à usage général, normalisé par Ecma International selon le document ECMA-262. Il s'agit d'une norme JavaScript destinée à assurer l'interopérabilité des pages Web sur différents navigateurs Web. "

Maintenant, revenons à l'objectif principal de cet article, qui est de présenter les nouvelles fonctionnalités ES2021 actuellement en phase finale. étape (approbation) des quatre étapes de la proposition.

Séparateur numérique

Cette fonctionnalité améliore littéralement l'expérience du développeur en permettant aux développeurs de rendre leurs littéraux numériques plus lisibles en créant une séparation visuelle entre les groupes de chiffres. C'est similaire à la façon dont nous utilisons des virgules pour séparer les nombres par écrit. Par exemple :

    const solde = 7_500_054_112

En utilisant le trait de soulignement, déchiffrer le nombre ci-dessus devient une évidence, contrairement à ne pas utiliser le trait de soulignement comme indiqué ci-dessous.

    const balance = 7500054112

Promise.any vs. Promise.race

ES2020 a introduit la méthode promise.allSettled utilisée pour exécuter plusieurs promesses en parallèle et agir lorsque toutes ont été réglées, qu'elles soient remplies ou rejetées. Le nouveau promise.any prend un tableau de promesses et se résout à la valeur de la première promesse à remplir avec succès. Donc, fondamentalement, si une promesse du tableau se réalise, promise.any se résout, et il est rejeté si toutes les promesses du tableau sont rejetées.

Il existe une similitude entre promise.any et la promise.racela seule différence étant que promise.race se règle lorsque l'une des promesses est réglée – peu importe si elle est rejetée ou remplie. Ainsi, promise.any est applicable dans les cas où vous essayez plusieurs requêtes et vous avez besoin d'au moins une qui remplit sa promesse.

    const promises = [promise1, promesse2, promesse3];
    Promesse.toute(promesse).puis((valeur)=> console.log(valeur));

WeakRef

Selon WeakRefs TC39 , la proposition WeakRef comprend deux nouvelles fonctionnalités majeures :

1. créer des références faibles à des objets avec la classe WeakRef
2. exécuter des finaliseurs définis par l'utilisateur une fois les objets récupérés, avec la classe FinalizationRegistry

Ces interfaces peuvent être utilisées indépendamment ou ensemble, selon le cas d'utilisation. Pour comprendre ce que fait WeakRefvous devez d'abord comprendre les concepts de référencement d'objets et de garbage collection en JavaScript.

Référencement d'objets

Par exemple, lorsque vous affectez un objet à une variable, le moteur V8 s'exécutant sur un navigateur (si vous utilisez un navigateur Chromium) alloue une adresse mémoire qui stocke l'objet. Maintenant, la variable à laquelle vous avez affecté l'objet stocke l'adresse mémoire de l'objet et non la valeur de l'objet lui-même, c'est-à-dire que la variable contient une référence à l'objet qui lui est affecté.

Garbage Collection

C'est le processus dans lequel les programmes tentent de libérer de l'espace mémoire qui n'est plus utilisé par les objets. Le nettoyage de la mémoire est implémenté différemment pour chaque langue. La plupart des langages de programmation de haut niveau intègrent une sorte de ramasse-miettes.

WeakRef crée une référence faible à l'objet qui lui est transmis. Cela signifie que chaque fois que le navigateur doit exécuter le ramasse-miettes si la seule référence à cet objet provient d'une variable WeakRefle moteur JavaScript peut supprimer en toute sécurité l'objet de la mémoire et libérer de l'espace. Cela pourrait être idéal pour les données WebSocket en raison de leur courte durée de vie.

    const faibleRef = new WeakRef({
       âge: 44;
    });
    console.log(weakRef.deref().age)
    
    

String. replaceAll

C'est une méthode qui corrige un manque spécifique dans String.prototype.replace. Avec String.replaceAllvous pouvez facilement remplacer toutes les occurrences d'une chaîne donnée. Par exemple :

    const nom = "nikola edison edison";
    const nawName = nom. remplacerTous("edison", "tesla");
    console.log(str1)
    
    

Logical Assignment Operators

Vous connaissez peut-être les opérations logiques telles que ?? &&ou || et l'opérateur d'affectation =. L'opérateur d'affectation logique introduit dans ES2021 combine des opérations logiques telles que ??&& ou || avec un opérateur d'affectation =. Voyons un exemple :

    
    var a = true
    var b = false
    
    
    if (!a) {
      a = b
    } 
    
    a ||= b
    
    
    si (a) {
      a = b
    } 
    
    a &&= b

Résumé

À ce stade, vous avez peut-être remarqué que la plupart des fonctionnalités ajoutées dans ES12 sont des fonctionnalités qui rendent votre expérience de développement quotidienne plus facile et plus amusante. J'espère que vous avez pu apprendre quelque chose de nouveau.