Module 2Acquérir les fondamentaux de JavaScript
Chapitre 6 sur 15
Utiliser des fonctions
Écrire des fonctions et des fonctions fléchées, comprendre les callbacks, les promesses, async/await et les exceptions.
- ≈ 130 min
- 4 leçons
- 6 vidéos
- 4 exercices
Module 2Acquérir les fondamentaux de JavaScript
Chapitre 6 sur 15
Écrire des fonctions et des fonctions fléchées, comprendre les callbacks, les promesses, async/await et les exceptions.
Objectifs
Avec ce chapitre, tu sauras…
return ;map(), filter() et forEach() avec des fonctions fléchées ;setTimeout) ;then, catch, finally, async / await) ;try, catch, finally et throw.Leçon 1
JavaScript distingue deux sortes de fonctions :
| Sorte | Exemples |
|---|---|
| fonctions propres à JavaScript, appelées méthodes quand elles appartiennent à un objet | alert() (de l'objet window), console.log(), Math.round() |
| fonctions écrites par le développeur | calculerMoyenne(), afficherPanier() |
function produit(a, b) { // a et b : les PARAMÈTRES
return a * b; // renvoie le résultat et arrête la fonction
}
let x = produit(4, 3); // 4 et 3 : les ARGUMENTS
console.log(x); // 12Vidéo · À regarder
FRTutoriel JavaScript en 1 HEURE | Comprendre l'ESSENTIEL pour Débutant
Melvynx · YouTube
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
Leçon 2
| Méthode | Rôle | Renvoie |
|---|---|---|
forEach(f) | exécute f pour chaque élément | rien (undefined) |
map(f) | transforme chaque élément avec f | un nouveau tableau de même taille |
filter(f) | garde les éléments pour lesquels f renvoie true |
Leçon 3
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
Leçon 4
| Mot-clé | Rôle |
|---|---|
try | contient le code à tester |
catch (err) | gère l'erreur si elle se produit ; err est l'objet erreur |
finally | s'exécute dans tous les cas, après try et catch |
throw | lance une erreur personnalisée |
1Une fonction sans return renvoie…
2const f = x => x * 2; f(5) vaut…
3[1, 2, 3].map(n => n * 10) vaut…
4[5, 12, 8].filter(n => n > 6) vaut…
5Une promesse rejetée est traitée par…
6await s'utilise dans une fonction…
7Accéder à une variable inexistante provoque une…
8Le bloc toujours exécuté est…
L'essentiel du chapitre
function nom(p1, p2) { return ...; } ; return renvoie et arrête ; sans return : undefined.(a, b) => a + b ; avec { }, le return est obligatoire.forEach (parcourir), map (transformer), filter (garder), reduce (combiner).setTimeout).resolve) ou rejetée (reject) ; then, catch, finally ; ou async / await + try...catch.try, catch (err), finally, throw new Error("message") ; err.name, err.message.| un nouveau tableau, plus court ou égal |
reduce(f, init) | combine tous les éléments en une seule valeur | une valeur (une somme, un maximum…) |
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
| Méthode | Exécutée quand… |
|---|
then(onFulfilled) | la promesse est accomplie (elle peut aussi recevoir un second callback pour le rejet) |
catch(onRejected) | la promesse est rejetée |
finally(f) | dans tous les cas : évite de répéter le même code dans then et catch |
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
Règle
Lancer des objets Error
err.name | Cause |
|---|---|
ReferenceError | variable inexistante |
TypeError | opération impossible sur ce type (appeler null.length, réaffecter une const) |
SyntaxError | code mal écrit (ou JSON.parse d'un texte invalide) |
RangeError | nombre hors limite ((1.5).toFixed(200)) |
URIError | URI mal formée (decodeURI("%")) |
EvalError | erreur liée à eval() (plus utilisée) |
Vidéo · À regarder
ENJavaScript Full Course for free
Bro Code · YouTube
Paramètres par défaut
function saluer(nom = "stagiaire") {
return `Bonjour ${nom} !`;
}
console.log(saluer("Sara")); // Bonjour Sara !
console.log(saluer()); // Bonjour stagiaire !Quand une fonction est-elle appelée ?
produit(4, 3) ;(function () { ... })();.Les variables locales
// ici, on ne peut pas utiliser "nom"
function maFonction() {
let nom = "Hassan"; // variable LOCALE
console.log(nom); // ici, on peut l'utiliser
}
// ici non plusLes variables locales sont créées quand la fonction démarre et supprimées quand elle se termine. Deux fonctions différentes peuvent donc utiliser des variables locales de même nom sans conflit.
Les fonctions en JavaScript, en français.
Les fonctions, puis la portée des variables (en anglais).
Une fonction est une valeur : on peut la ranger dans une variable (expression de fonction) ou l'écrire de façon compacte avec une flèche => (fonction fléchée, ou expression lambda).
function carre1(x) { // 1. déclaration
return x * x;
}
const carre2 = function (x) { // 2. expression de fonction
return x * x;
};
const carre3 = (x) => { // 3. fonction fléchée
return x * x;
};
const carre4 = x => x * x; // fléchée raccourcie : un seul paramètre, un return implicitex => ...) ; aucun ou plusieurs : elles sont obligatoires (() => ..., (a, b) => ...) ;return, la valeur est renvoyée automatiquement (x => x * x) ;return redevient obligatoire.Les fonctions fléchées avec les tableaux
C'est leur usage principal : les passer aux méthodes des tableaux.
const langages = ["Java", "Python", "PHP", "Scala"];
console.log(langages.map(L => L.length)); // [4, 6, 3, 5] : un nouveau tableau
langages.forEach(L => { // affiche les langages de plus de 4 lettres
if (L.length > 4) {
console.log(L); // Python, Scala
}
});
const longs = langages.filter(L => L.length > 4); // ["Python", "Scala"]Les fonctions de rappel (callbacks)
Une fonction de rappel (callback) est une fonction passée en argument à une autre fonction, qui l'appellera au moment voulu.
function affichage(s) {
console.log(s);
}
function calcul(num1, num2, monCallback) {
let somme = num1 + num2;
monCallback(somme); // la fonction reçue est appelée ici
}
calcul(1, 5, affichage); // 6On écrit calcul(1, 5, affichage) et non calcul(1, 5, affichage()). Avec les parenthèses, affichage serait exécutée tout de suite et c'est son résultat (undefined) qui serait transmis.
Le code asynchrone
Certaines opérations prennent du temps : attendre un délai, télécharger des données depuis un serveur, lire un fichier. Si JavaScript attendait sans rien faire, la page serait figée. Il lance donc l'opération, continue le reste du programme, et exécute un callback quand l'opération est terminée : c'est l'asynchrone.
console.log("1. Début");
setTimeout(() => {
console.log("2. Deux secondes plus tard");
}, 2000); // délai en millisecondes
console.log("3. Fin");
// Affiche : 1. Début, 3. Fin, puis (2 s après) 2. Deux secondes plus tardLes callbacks (en anglais).
Les promesses (Promise)
Quand plusieurs opérations asynchrones s'enchaînent, les callbacks s'imbriquent les uns dans les autres (on parle de « callback hell »). La promesse offre une écriture plus claire.
Une promesse (Promise) est un objet qui représente le résultat futur d'une opération asynchrone. Elle est toujours dans l'un de ces trois états :
Une promesse commence toujours « en attente » et finit « accomplie » ou « rejetée ».
function makePromise(completed) {
return new Promise(function (resolve, reject) { // l'exécuteur
setTimeout(() => {
if (completed) {
resolve("Donnée récupérée"); // → accomplie
} else {
reject("Je n'ai pas pu récupérer la donnée"); // → rejetée
}
}, 3000);
});
}Le constructeur Promise reçoit une fonction appelée l'exécuteur. Celle-ci reçoit deux fonctions, par convention resolve (à appeler en cas de succès) et reject (à appeler en cas d'erreur).
makePromise(true)
.then(valeur => console.log(valeur)) // si accomplie : "Donnée récupérée"
.catch(erreur => console.log(erreur)) // si rejetée
.finally(() => console.log("Terminé")); // dans tous les casQuand une erreur se produit, JavaScript lance une exception : il crée un objet erreur et arrête le programme, sauf si l'erreur est interceptée.
const saisie = prompt("Donne un nombre entre 5 et 10");
try {
if (saisie === null || saisie.trim() === "") throw new Error("Vide");
const x = Number(saisie);
if (Number.isNaN(x)) throw new Error("Ce n'est pas un nombre");
if (x < 5) throw new Error("Trop petit");
if (x > 10) throw new Error("Trop grand");
console.log("Valeur acceptée :", x);
} catch (err) {
console.log("Erreur :", err.message);
} finally {
console.log("Vérification terminée");
}Le résumé convertit la saisie avant de tester si elle est vide : let x = Number(prompt(...)). Or Number("") vaut 0, donc x == "" ne détecte pas une saisie vide (et une saisie vide est traitée comme le nombre 0). Il faut tester la chaîne saisie, puis la convertir, comme ci-dessus. Le résumé annonce aussi « entre 1 et 5 » puis teste 5 et 10.
Écris une fonction chargerStagiaires() qui renvoie une promesse : après 2 secondes, elle est accomplie avec le tableau ["Sara", "Ali", "Imane"], sauf si Math.random() est inférieur à 0,3, auquel cas elle est rejetée avec une erreur « Serveur indisponible ». Consomme-la avec async / await et un try...catch, et affiche « Chargement... » avant l'attente.
console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");Écris trois fonctions fléchées : moyenne(tableau) qui renvoie la moyenne d'un tableau de notes, meilleure(tableau) qui renvoie la plus grande note (avec reduce ou Math.max), et admis(tableau) qui renvoie un nouveau tableau ne contenant que les notes supérieures ou égales à 10. Teste-les avec [12, 8, 15, 9.5, 17].
const notes = [12, 15, 9, 18];
const somme = notes.reduce((total, note) => total + note, 0); // 54
const moyenne = somme / notes.length; // 13.5Le résumé parle d'« une parenthèse carrée fermante (>) ». Le signe > est un chevron (le symbole « supérieur à ») : la flèche s'écrit avec deux caractères, le signe égal suivi du chevron, =>.
forEach, map, filter, reduce, les expressions de fonction et les fonctions fléchées (en anglais).
async et await
La syntaxe async / await (ES2017) permet d'écrire du code asynchrone comme du code normal, ligne après ligne. C'est la syntaxe que tu utiliseras le plus avec fetch (chapitre 14).
async function chargerDonnee() {
try {
const valeur = await makePromise(true); // attend la promesse sans bloquer la page
console.log(valeur);
} catch (erreur) {
console.log(erreur);
} finally {
console.log("Terminé");
}
}
chargerDonnee();await ne s'utilise que dans une fonction déclarée async (ou au premier niveau d'un module). Une fonction async renvoie toujours une promesse.
Le « callback hell », les promesses puis async / await (en anglais).
throw accepte n'importe quelle valeur (throw "Trop grand", throw 500), mais la bonne pratique est de lancer un objet Error : throw new Error("Trop grand"). Il possède les propriétés name et message, et la console affiche la pile d'appels pour retrouver l'origine de l'erreur.
Tableau: L'objet erreur
try {
let x = y + 1; // y n'existe pas
} catch (err) {
console.log(err.name); // ReferenceError
console.log(err.message); // y is not defined
}La gestion des erreurs avec try, catch et finally (en anglais).
Écris une fonction diviser(a, b) qui lance une erreur TypeError si a ou b n'est pas un nombre, et une erreur RangeError « Division par zéro » si b vaut 0. Appelle-la trois fois dans un try...catch qui affiche err.name et err.message.