JavaScript - ECMAScript 2019: Guide pour débutants

Salut à toi, futurs superstars du codage ! Je suis ravi de vous guider dans cette exciting aventure à travers le monde d'ECMAScript 2019. En tant que quelqu'un qui enseigne la programmation depuis des années, j'attends avec impatience de partager les merveilles de ce langage avec vous. Alors, prenez vos cahiers virtuels, et plongons dedans !

Introduction à ECMAScript 2019

Avant de commencer, parlons rapidement de ce qu'est ECMAScript. Imaginez JavaScript comme un délicieux gâteau, et ECMAScript comme la recette. Chaque année, la recette est affinée et améliorée, et 2019 n'a pas fait exception. ECMAScript 2019 nous a apporté quelques nouvelles fonctionnalités qui ont rendu notre gâteau JavaScript encore plus délicieux !

Nouvelles fonctionnalités ajoutées dans ECMAScript 2019

ECMAScript 2019 a introduit plusieurs fonctionnalités passionnantes qui rendent notre vie de codage plus facile. Explorons-les une par une, d'accord ?

Méthode JavaScript Array flat()

Avez-vous déjà eu une chambre en désordre avec des boîtes à l'intérieur des boîtes ? C'est un peu ce que sont les tableaux imbriqués en JavaScript. La méthode flat() est comme un robot de nettoyage magique qui ouvre toutes ces boîtes et met tout dans une seule couche ordonnée.

Voyons comment elle fonctionne :

const chambreEnDesordre = [1, 2, [3, 4, [5, 6]]];
const chambreRangee = chambreEnDesordre.flat(2);
console.log(chambreRangee); // Output: [1, 2, 3, 4, 5, 6]

Dans cet exemple, chambreEnDesordre est notre tableau imbriqué. La méthode flat(2) va deux niveaux de profondeur pour aplanir le tableau. Le résultat est chambreRangee, où tous les nombres sont au même niveau. Génial, non ?

Méthode JavaScript Array flatMap()

Imaginez maintenant que notre robot de nettoyage pourrait non seulement ranger mais aussi transformer les éléments au fur et à mesure. C'est ce que fait flatMap() ! C'est comme si map() et flat() avaient eu un bébé surpuissant.

Voici un exemple fun :

const animaux = ["chien", "chat", "poisson"];
const sonsAnimaux = animaux.flatMap(animal => {
if (animal === "chien") return ["ouah", "aboyer"];
if (animal === "chat") return ["miaou"];
return [];
});
console.log(sonsAnimaux); // Output: ["ouah", "aboyer", "miaou"]

Dans ce code, nous prenons notre tableau animaux et créons un nouveau tableau avec leurs sons. Notez comment le chien a deux sons, mais ils finissent dans le même tableau aplanissé. Le pauvre poisson, cependant - il est trop silencieux pour figurer sur la liste !

Méthode sort() révisée

La méthode sort() a reçu un léger lifting en ECMAScript 2019. Elle garantit maintenant que les tableaux seront triés de manière stable. Qu'est-ce que cela signifie ? Eh bien, si deux éléments sont considérés égaux par la fonction de tri, ils conserveront leur ordre original par rapport les uns aux autres.

Voyons un exemple :

const eleves = [
{nom: "Alice", note: "B"},
{nom: "Bob", note: "A"},
{nom: "Charlie", note: "B"},
{nom: "David", note: "A"}
];

eleves.sort((a, b) => a.note.localeCompare(b.note));
console.log(eleves);
/* Output:
[
{nom: "Bob", note: "A"},
{nom: "David", note: "A"},
{nom: "Alice", note: "B"},
{nom: "Charlie", note: "B"}
]
*/

Dans cet exemple, nous trions les élèves par leurs notes. Notez comment Bob et David (tous deux avec une note A) conservent leur ordre original, tout comme Alice et Charlie (tous deux avec une note B). Ce tri stable peut être crucial dans de nombreuses applications !

Méthode Object.fromEntries

Avez-vous déjà souhaité pouvoir transformer un tas de paires de clé-valeur en un objet ? Eh bien, maintenant vous pouvez avec Object.fromEntries() ! C'est comme de la magie, mais mieux parce que c'est JavaScript.

Regardez ceci :

const entrees = [
['nom', 'Alice'],
['age', 25],
['ville', 'Wonderland']
];

const personne = Object.fromEntries(entrees);
console.log(personne);
// Output: { nom: 'Alice', age: 25, ville: 'Wonderland' }

Dans cet exemple, nous partons d'un tableau de paires de clé-valeur. Object.fromEntries() transforme cela en un objet où chaque paire devient une propriété. C'est l'inverse de Object.entries(), que nous avons depuis un certain temps.

Liaison optionnelle dans catch

La gestion des erreurs vient de devenir un peu plus fluide avec la liaison optionnelle dans catch. Avant, nous devions toujours spécifier un paramètre d'erreur dans notre clause catch, même si nous ne l'utilisions pas. Maintenant, nous pouvons l'omettre si nous n'en avons pas besoin.

Voici comment cela fonctionne :

// Avant ECMAScript 2019
try {
// Un peu de code qui pourrait lever une erreur
} catch (erreur) {
console.log("Une erreur s'est produite");
}

// Avec ECMAScript 2019
try {
// Un peu de code qui pourrait lever une erreur
} catch {
console.log("Une erreur s'est produite");
}

Voyez comment nous avons supprimé la partie (erreur) dans le second exemple ? C'est la liaison optionnelle en action. C'est un changement mineur, mais il peut rendre notre code plus propre lorsque nous n'avons pas besoin d'utiliser l'objet erreur.

Méthode JSON.stringify() révisée

JSON.stringify() est devenu un peu plus intelligent en ECMAScript 2019. Il gère maintenant certains caractères Unicode mieux, assurant que notre JSON reste valide.

Voici un exemple :

const obj = { nom: "Pikachu\uD800" };
console.log(JSON.stringify(obj));
// Output: {"nom":"Pikachu�"}

Dans ce cas, \uD800 est un substitut non pair, ce qui pourrait causer des problèmes avec certains analyseurs JSON. La nouvelle JSON.stringify() le remplace par le caractère de remplacement Unicode (�) pour maintenir la validité du JSON.

Méthode toString() révisée pour les fonctions

La méthode toString() pour les fonctions retourne maintenant le code source exact de la fonction, y compris les espaces et les commentaires. C'est comme obtenir une photocopie parfaite de votre fonction !

Voyons comment cela fonctionne :

function saluer(nom) {
// Cette fonction de salutation
console.log(`Bonjour, ${nom}!`);
}

console.log(saluer.toString());
/* Output:
function saluer(nom) {
// Cette fonction de salutation
console.log(`Bonjour, ${nom}!`);
}
*/

Comme vous pouvez le voir, la sortie inclut le commentaire et conserve le formatage original. Cela peut être super utile pour le débogage ou la génération de documentation !

Symboles de séparation autorisés dans les littéraux de chaîne

ECMAScript 2019 a apporté un changementpetit mais utile : vous pouvez maintenant utiliser U+2028 (séparateur de ligne) et U+2029 (séparateur de paragraphe) dans les littéraux de chaîne sans les échapper.

Voici un exemple :

const text = "Ligne 1 séparateur→\u2028←Ligne 2";
console.log(text);
// Output:
// Ligne 1
// Ligne 2

Ce changement facilite le travail avec du texte qui pourrait contenir ces séparateurs, surtout lorsque vous traitez des données provenant d'autres sources.

Méthodes String.prototype.trimStart() et String.prototype.trimEnd()

Pour finir, nous avons deux nouvelles méthodes de chaîne : trimStart() et trimEnd(). Comme trim(), mais elles n'enlèvent que les espaces d'un côté de la chaîne.

Voyons-les en action :

const sale = "   Salut, Monde !   ";
console.log(sale.trimStart()); // Output: "Salut, Monde !   "
console.log(sale.trimEnd());   // Output: "   Salut, Monde!"
console.log(sale.trim());      // Output: "Salut, Monde!"

Ces méthodes sont géniales lorsque vous ne voulez nettoyer qu'un côté de votre chaîne. Elles sont des alias des anciennes méthodes trimLeft() et trimRight(), mais avec des noms qui décrivent plus clairement ce qu'elles font.

Conclusion

Et voilà, les amis ! Nous avons fait le tour des fonctionnalités passionnantes d'ECMAScript 2019. De l'aplatissement des tableaux à l'nettoyage des chaînes, ces ajouts rendent notre JavaScript plus puissant et plus facile à utiliser.

N'oubliez pas, la meilleure façon d'apprendre est de faire. Alors, allez-y et expérimentez avec ces nouvelles fonctionnalités dans votre propre code. N'ayez pas peur de faire des erreurs - c'est ainsi que nous apprenons et grandissons en tant que programmeurs.

Bonne programmation, et que vos aventures JavaScript soient exemptes de bugs et pleines de joie !

Credits: Image by storyset