JavaScript - ECMAScript 2020 : Guide pour débutants

Bonjour, futurs programmeurs ! Je suis ravi de vous guider sur ce voyage passionnant dans le monde de ECMAScript 2020. En tant qu'enseignant en informatique avec des années d'expérience, j'ai vu des dizaines d'étudiants s'illuminer lorsqu'ils saisissent ces concepts. Alors, plongons dedans et explorons les merveilleuses fonctionnalités que ES2020 apporte au langage JavaScript !

Fonctionnalités ajoutées dans ECMAScript 2020

ECMAScript 2020, également connu sous le nom de ES2020, est comme une nouvelle boîte à outils lumineuse pour les développeurs JavaScript. Il introduces plusieurs fonctionnalités passionnantes qui rendent notre vie de codage plus facile et plus efficace. Décapons cette boîte à outils ensemble et voyons quelles merveilles nous trouvons à l'intérieur !

Type de données BigInt

Imaginez que vous comptez des étoiles dans le ciel nocturne. Il y en a des milliards ! Dans le passé, JavaScript avait une limite sur la taille maximale d'un nombre. Mais maintenant, avec BigInt, le ciel est la limite (pun intended) !

BigInt nous permet de travailler avec des entiers incroyablement grands. Voici comment vous pouvez l'utiliser :

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber);
// Output: 1234567890123456789012345678901234567890n

const result = bigNumber + 1n;
console.log(result);
// Output: 1234567890123456789012345678901234567891n

Dans cet exemple, nous créons un BigInt en ajoutant 'n' à la fin du nombre. Le 'n' indique à JavaScript : "Hey, c'est un BigInt !" Nous pouvons effectuer des opérations sur les BigInts comme sur des nombres réguliers, mais souvenez-vous d'ajouter 'n' à tout nombre que vous utilisez avec BigInt.

L'opérateur de coalescence nul (??)

Avez-vous déjà joué au jeu "devine le cadeau" ? Vous secouez la boîte, et si vous n'entendez rien, vous devinez qu'elle est vide. L'opérateur de coalescence nul est un peu comme cela, mais pour le code !

Cet opérateur nous aide à vérifier si une valeur est null ou undefined, et si c'est le cas, nous pouvons fournir une valeur par défaut. Voici comment il fonctionne :

let username = null;
console.log(username ?? "Guest");
// Output: "Guest"

username = "Alice";
console.log(username ?? "Guest");
// Output: "Alice"

Dans le premier cas, username est null, donc l'opérateur retourne "Guest". Dans le second cas, username a une valeur, donc il retourne cette valeur. C'est comme dire : "Si la boîte est vide, supposons qu'elle contient un nounours !"

La méthode Promise.allSettled()

Imaginez que vous êtes un enseignant (comme moi !) attendant que tous vos élèves finissent un test. Certains peuvent finir avec succès, d'autres peuvent abandonner. Promise.allSettled() est comme attendre que tout le monde rende son devoir, qu'il soit bien ou mal fait.

Voici un exemple :

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

Promise.allSettled(promises).then((results) => results.forEach((result) => console.log(result.status)));

// Output:
// "fulfilled"
// "rejected"

Dans ce code, nous avons deux promesses. Une se résout avec succès, l'autre est rejetée. Promise.allSettled() attend que les deux se terminent puis nous donne le statut de chacune.

La méthode String.matchAll()

Avez-vous déjà joué au jeu "Où est Waldo ?" Bien, matchAll() est comme jouer "Où est Waldo ?" avec du texte ! Il nous aide à trouver toutes les occurrences d'un motif dans une chaîne.

Voyons comment il fonctionne :

const text = "The cat and the hat sat on the mat.";
const regex = /at/g;
const matches = [...text.matchAll(regex)];

console.log(matches);
// Output: [
//   ['at', index: 7, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 19, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 31, input: 'The cat and the hat sat on the mat.', groups: undefined]
// ]

Ici, nous cherchons toutes les occurrences de "at" dans notre texte. matchAll() retourne un itérateur, que nous convertissons en array usando l'opérateur de spread (...). Chaque correspondance nous donne des informations sur où elle a été trouvée dans la chaîne.

L'opérateur de chaînage optionnel (?.)

Pour terminer, parlons de l'opérateur de chaînage optionnel. C'est comme un explorateur prudent, vérifiant chaque étape du chemin avant de continuer.

Voici comment il fonctionne :

const user = {
name: "Alice",
address: {
street: "123 Main St"
}
};

console.log(user.address?.street);
// Output: "123 Main St"

console.log(user.phoneNumber?.home);
// Output: undefined

Dans cet exemple, nous essayons d'accéder à des propriétés qui pourraient ne pas exister. L'opérateur ?. nous permet de le faire en toute sécurité. Si user.address existe, il essaiera d'accéder à street. Si user.phoneNumber n'existe pas, il s'arrête là et retourne undefined au lieu de lever une erreur.

Table des méthodes

Voici un tableau pratique résumant les nouvelles méthodes que nous avons apprises :

Méthode	Description
BigInt	Permet de travailler avec de grands entiers
?? (Coalescence nulle)	Fournit une valeur par défaut pour null ou undefined
Promise.allSettled()	Attend que toutes les promesses se résolvent
String.matchAll()	Trouve toutes les occurrences d'un motif dans une chaîne
?. (Chaînage optionnel)	Accède en toute sécurité aux propriétés imbriquées des objets

Et voilà, les amis ! Nous avons exploré les fonctionnalités passionnantes de ECMAScript 2020. Souvenez-vous, la meilleure façon d'apprendre est de faire. Alors, allumez votre éditeur de code et commencez à expérimenter avec ces nouveaux outils. Bon codage, et puisse votre voyage JavaScript être rempli d'excitation et de découvertes !

Credits: Image by storyset