JavaScript - ECMAScript 2021 : Guide pour débutants

Salut à toi, future star du codage ! Je suis ravi de devenir ton guide sur ce voyage passionnant dans le monde de l'ECMAScript 2021. En tant qu'enseignant en informatique avec des années d'expérience, j'ai vu des centaines d'étudiants passer de complets débutants à des programmeurs confiants. Aujourd'hui, nous allons explorer les dernières fonctionnalités de JavaScript, et je promets de rendre cela aussi amusant et simple à comprendre que possible. Alors, prends ta boisson favorite, installe-toi confortablement, et plongeons dedans !

Qu'est-ce que l'ECMAScript 2021 ?

Avant de plonger dans les nouvelles fonctionnalités, Parlons rapidement de ce qu'est l'ECMAScript. Pense à l'ECMAScript comme au livre de recettes pour JavaScript. Chaque année, les chefs (a.k.a. les développeurs de langage) ajoutent de nouvelles recettes (fonctionnalités) pour rendre notre vie de codage plus facile et plus délicieuse. L'ECMAScript 2021, également connu sous le nom d'ES12, est la dernière édition de ce livre de recettes.

Nouvelles fonctionnalités ajoutées dans l'ECMAScript 2021

L'ECMAScript 2021 nous apporte quelques outils excitants pour jouer. C'est comme obtenir un nouveau jeu de briques LEGO pour ajouter à notre collection. Explorons chacune de ces nouvelles fonctionnalités une par une.

Séparateurs numériques (_)

As-tu déjà essayé de lire un très grand nombre, comme 1000000000 ? C'est un peu un casse-tête, n'est-ce pas ? Eh bien, le séparateur numérique est là pour sauver la journée !

// Sans séparateur numérique
const billion = 1000000000;

// Avec séparateur numérique
const billionReadable = 1_000_000_000;

console.log(billion === billionReadable); // Output : true

Le traits d'union (_) dans 1_000_000_000 ne change pas la valeur du nombre. Il est simplement là pour nous aider à le lire plus facilement. Ça n'est pas génial ? C'est comme ajouter des espaces dans une phrase longue pour la rendre plus lisible.

Méthode Promise.any()

Les promesses en JavaScript sont comme passer un tas d'appels téléphoniques en même temps et attendre que quelqu'un décroche. La méthode Promise.any() est une nouvelle façon de gérer plusieurs promesses.

const promise1 = new Promise((resolve, reject) => setTimeout(reject, 100, 'promise1'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'promise2'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 300, 'promise3'));

Promise.any([promise1, promise2, promise3])
.then((value) => console.log(value))
.catch((error) => console.log(error));

// Output : promise2

Dans cet exemple, Promise.any() se résout dès qu'une des promesses dans le tableau est remplie. C'est comme une course où nous ne nous soucions que de la première personne à franchir la ligne d'arrivée, indépendamment de qui arrive deuxième ou troisième.

Méthode String.replaceAll()

As-tu déjà joué à un jeu de remplacement de mots ? La méthode replaceAll() est un peu comme cela, mais pour les chaînes de caractères en JavaScript.

const sentence = "I love cats. Cats are great pets.";
const newSentence = sentence.replaceAll("cats", "dogs");

console.log(newSentence); // Output : "I love dogs. Dogs are great pets."

Avant replaceAll(), nous devions utiliser des expressions régulières ou des boucles pour remplacer toutes les occurrences d'une sous-chaîne. Maintenant, c'est aussi simple que d'appeler une méthode !

Opérateurs d'affectation logique

L'ECMAScript 2021 introduit trois nouveaux opérateurs d'affectation logique. Ceux-ci sont comme des raccourcis pour écrire des modèles courants en JavaScript. Jetons un œil à chacun :

Opérateur d'affectation logique ET (&&=)

let x = 1;
let y = 2;

x &&= y;

console.log(x); // Output : 2

// Cela équivaut à :
// x && (x = y);

L'opérateur &&= affecte la valeur de droite uniquement si la valeur de gauche est truthy. C'est comme dire, "Si x est vrai, alors rends-le égal à y."

Opérateur d'affectation logique OU (||=)

let a = null;
let b = 'default value';

a ||= b;

console.log(a); // Output : "default value"

// Cela équivaut à :
// a || (a = b);

L'opérateur ||= affecte la valeur de droite uniquement si la valeur de gauche est falsy. C'est parfait pour définir des valeurs par défaut !

Opérateur d'affectation logique Nulish (??=)

let foo = null;
let bar = 'baz';

foo ??= bar;

console.log(foo); // Output : "baz"

// Cela équivaut à :
// foo ?? (foo = bar);

L'opérateur ??= affecte la valeur de droite uniquement si la valeur de gauche est null ou undefined. Il est similaire à ||=, mais plus spécifique sur ce qu'il considère comme "vide".

Résumé des méthodes

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

Méthode	Description	Exemple
Séparateurs numériques	Rend les grands nombres plus lisibles	1_000_000_000
Promise.any()	Se résout lorsque n'importe quelle promesse dans un tableau est remplie	Promise.any([promise1, promise2, promise3])
String.replaceAll()	Remplace toutes les occurrences d'une sous-chaîne	"hello hello".replaceAll("hello", "hi")
&&=	Affecte si la gauche est truthy	x &&= y
||=	Affecte si la gauche est falsy	x ||= y
??=	Affecte si la gauche est null ou undefined	x ??= y

Et voilà, les amis ! Nous avons exploré les fonctionnalités excitantes de l'ECMAScript 2021. Souviens-toi, la meilleure façon d'apprendre à programmer est de le faire. Alors, je t'encourage à jouer avec ces nouvelles fonctionnalités, à expérimenter, et surtout, à t'amuser !

Comme mon ancien professeur de programmation aimait dire, "Coder, c'est comme cuisiner. Tu pourrais brûler quelques plats au début, mais avec de la pratique, tu seras bientôt à créer des œuvres d'art en un rien de temps !" Ne sois pas afraid de faire des erreurs - elles font toutes partie du processus d'apprentissage.

Continue de coder, reste curieux, et bon apprentissage !

Credits: Image by storyset