Guide convivial pour débutants : ECMAScript 2018

Salut à toi, futurs magiciens JavaScript ! Je suis ravi de vous guider dans cette aventure passionnante à travers ECMAScript 2018. En tant que quelqu'un qui enseigne la programmation depuis des années, j'attends avec impatience de partager ces nouvelles fonctionnalités avec vous. Ne vous inquiétez pas si vous êtes nouveau dans le codage - nous allons avancer pas à pas, et avant que vous ne vous en rendiez compte, vous écrirez du JavaScript comme un pro !

ECMAScript 2018

Nouvelles fonctionnalités ajoutées dans ECMAScript 2018

ECMAScript 2018, également connu sous le nom de ES9, a apporté quelques ajouts fantastiques au langage JavaScript. C'est comme obtenir un coffre à outils brillant et neuf pour vos aventures de codage ! Plongeons dans ces fonctionnalités une par une.

Iteration asynchrone en JavaScript

Imaginez que vous êtes à un buffet, et au lieu de charger tout sur votre assiette d'un coup, vous pouvez magiquement invoquer chaque plat lorsque vous êtes prêt à le manger. C'est un peu ce que fait l'itération asynchrone pour votre code !

La boucle `for-await-of`

Cette nouvelle boucle nous permet de travailler plus facilement avec des sources de données asynchrones. Voici un exemple :

async function* numberGenerator() {
yield Promise.resolve(1);
yield Promise.resolve(2);
yield Promise.resolve(3);
}

async function printNumbers() {
for await (const num of numberGenerator()) {
console.log(num);
}
}

printNumbers();
// Sortie :
// 1
// 2
// 3

Dans cet exemple, numberGenerator est une fonction de générateur asynchrone qui produit des promesses. La boucle for-await-of attend que chaque promesse soit résolue avant de passer à l'itération suivante. C'est comme avoir un ami patient qui attend que vous ayez fini chaque bouchée avant de vous offrir le plat suivant !

Nouvelles fonctionnalités de l'objet RegExp()

RegExp, ou expressions régulières, sont comme le couteau suisse du traitement du texte. ECMAScript 2018 a ajouté quelques astuces sympas à cet outil.

Échappements de propriétés Unicode

Cette fonctionnalité nous permet de correspondre des caractères en fonction de leurs propriétés Unicode. C'est super utile lorsque vous travaillez avec des textes internationaux !

const greekSymbol = "π";
console.log(/\p{Script=Greek}/u.test(greekSymbol)); // true

Ici, \p{Script=Greek} correspond à n'importe quel caractère dans l'écriture grecque. Le drapeau u active le mode Unicode.

Assertions de lookbehind

Maintenant, nous pouvons vérifier ce qui précède notre correspondance, pas seulement ce qui suit. C'est comme pouvoir jeter un œil par-dessus votre épaule dans le monde du codage !

const price = "$123.45";
console.log(price.match(/(?<=\$)\d+(\.\d*)?/)[0]); // "123.45"

Dans cet exemple, (?<=\$) est une assertion de lookbehind positive qui garantit que notre correspondance est preceded par un signe dollar, sans inclure le signe dollar dans la correspondance.

Groupes de capture nommés

Nous pouvons maintenant donner des noms à nos groupes de capture, rendant nos expressions régulières plus lisibles et plus faciles à maintenir.

const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = dateRegex.exec("2023-05-15");
console.log(match.groups.year);  // "2023"
console.log(match.groups.month); // "05"
console.log(match.groups.day);   // "15"

C'est comme étiqueter les compartiments dans votre coffre à outils - tout est plus facile à trouver !

Méthode `finally()` de JavaScript Promise

Les promesses en JavaScript sont comme faire un plan avec un ami. Parfois, ça marche, parfois non, mais dans tous les cas, vous pourriez vouloir faire quelque chose après. C'est là que rentre en jeu finally() !

function fetchData() {
return new Promise((resolve, reject) => {
// Simulant un appel API
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve("Données fetched avec succès !");
} else {
reject("Erreur lors de la récupération des données");
}
}, 1000);
});
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log("Opération terminée"));

Dans cet exemple, que la promesse soit résolue ou rejetée, le bloc finally s'exécutera toujours. C'est comme dire "Que nous soyons succès ou échec, nettoyons et rentrons chez nous."

Propriétés restantes d'objet en JavaScript

L'opérateur de rest (...) dans les littéraux d'objet est comme avoir un sac magique qui peut contenir tous les restes. C'est super pratique lorsque vous voulez séparer certaines propriétés du reste.

const person = {
name: "Alice",
age: 30,
city: "Wonderland",
occupation: "Exploratrice"
};

const { name, age, ...rest } = person;

console.log(name);  // "Alice"
console.log(age);   // 30
console.log(rest);  // { city: "Wonderland", occupation: "Exploratrice" }

Dans cet exemple, nous sortons name et age, et tout le reste est mis dans rest. C'est comme trier votre lessive - les chaussettes dans un tas, tout le reste dans un autre !

Conclusion

Et voilà, les amis ! Nous avons parcouru les fonctionnalités passionnantes d'ECMAScript 2018. Souvenez-vous, la meilleure façon d'apprendre est de faire, donc n'ayez pas peur d'expérimenter avec ces nouveaux outils. Le codage est comme la cuisine - plus vous pratiquez, mieux vous devenez !

Voici un tableau de référence rapide des méthodes que nous avons couvertes :

Fonctionnalité	Description
`for-await-of`	Permet l'itération asynchrone sur les promesses
Échappements de propriétés Unicode	Correspond aux caractères en fonction de leurs propriétés Unicode dans RegExp
Assertions de lookbehind	Vérifie les correspondances basées sur ce qui précède dans RegExp
Groupes de capture nommés	Permet de nommer les groupes de capture dans RegExp
`Promise.prototype.finally()`	Spécifie un callback à exécuter lorsque la promesse est résolue ou rejetée
Propriétés restantes d'objet	Collecte les propriétés restantes dans un nouvel objet