Sommaire du Cours JavaScript Avancé

1. Introduction
o Présentation du langage JavaScript et de son rôle sur le web
o Objectifs du cours et aperçu des concepts avancés
2. Fonctions Avancées
2.1. Closures
- Définition et utilité
- Exemple pas à pas
2.2. Fonctions de rappel (Callbacks)
- Concept et avantages
- Exemple détaillé
2.3. Fonctions récursives
- Principe de la récursion
- Exemple avec le calcul d’une factorielle
3. Programmation Asynchrone
3.1. Utilisation de setTimeout et setInterval
- Fonctionnement et cas d’usage
- Exemples pratiques
3.2. Promesses (Promise)
- Structure d’une promesse
- Chaînage avec then, catch et finally
- Exemple illustré
3.3. Async/Await
- Syntaxe et avantages par rapport aux promesses
- Exemple avec gestion d’erreur via try...catch
4. Gestion des Erreurs
4.1. Le Bloc try...catch
- Principe et utilisation
- Exemple concret
4.2. Gestion des erreurs dans les Promesses et Async/Await
- Différentes stratégies de capture des erreurs
- Exemples en contexte asynchrone
5. Manipulation Avancée des Objets
5.1. Prototypes et Héritage
- Concepts de base et exemples d’héritage
5.2. Méthodes Statique et d’Instance
- Différences et exemples d’implémentation dans une classe
5.3. Utilisation de Object.create, Object.assign et Object.defineProperty
- Description et exemples de chaque méthode
 Introduction
JavaScript est un langage de programmation utilisé principalement pour créer des
interactions sur les sites web, comprendre les notions avancées permettra de mieux organiser
le code et d’aborder des sujets comme l’asynchrone ou l’héritage. Nous allons explorer :

1. Les fonctions avancées (closures, callbacks, fonctions récursives)

2. La programmation asynchrone (setTimeout, setInterval, Promesses, Async/Await)
3. La gestion des erreurs (try...catch, erreurs dans les promesses et async/await)
4. La manipulation avancée des objets (prototypes, héritage, méthodes statiques,
Object.create, etc.)

1. Fonctions Avancées
1.1. Les Closures

Concept :
Une closure est une fonction qui « se souvient » de l’environnement dans lequel elle a été
créée, même après que la fonction parente ait terminé son exécution.
Cela signifie que la fonction interne continue d’avoir accès aux variables de la fonction
externe.

Pourquoi c’est utile ?

 Pour créer des variables « privées »

 Pour conserver un état entre plusieurs appels de fonction

Explication :

1. La fonction createCounter déclare une variable count initialisée à 0.

2. Elle retourne une fonction anonyme qui, lorsqu’elle est appelée, incrémente count et
affiche sa valeur.
3. Même après la fin de l’exécution de createCounter, la fonction retournée a toujours
accès à la variable count grâce à la closure.

1.2. Fonctions de rappel (Callbacks)

Concept :
Une fonction de rappel est une fonction que l’on passe en argument à une autre fonction, pour
qu’elle soit exécutée à un moment précis (souvent après la fin d’un traitement).

Pourquoi c’est utile ?

  Pour exécuter du code après un événement ou une opération (comme une lecture de fichier
ou une réponse d’un serveur).
 Pour éviter le « callback hell » en organisant le code de façon modulaire.

Exemple

Explication :

1. greet prend deux paramètres : une chaîne de caractères (name) et une fonction
(callback).
2. Elle affiche « Bonjour » suivi du nom.
3. Ensuite, elle exécute la fonction de rappel, ici sayGoodbye, qui affiche « Au revoir ! ».

1.3. Fonctions récursives

Concept :
Une fonction récursive s’appelle elle-même pour résoudre un problème en le décomposant en
sous-problèmes plus simples.

Pourquoi c’est utile ?

 Pour résoudre des problèmes qui se définissent de manière récursive (par exemple, calculer
une factorielle, parcourir des structures de données comme les arbres).

Exemple détaillé : Calcul de la factorielle d’un nombre

Explication pas à pas :

1. La fonction factorielle vérifie d’abord si n vaut 0. Dans ce cas, elle retourne 1 (cas
de base qui arrête la récursion).
2. Sinon, elle retourne n multiplié par le résultat de factorielle(n-1).
3. Pour n = 5, le calcul se décompose ainsi :
o factorielle(5) = 5 * factorielle(4)
o factorielle(4) = 4 * factorielle(3)
o … et ainsi de suite jusqu’à factorielle(0).

2. Programmation Asynchrone
JavaScript est souvent utilisé dans des contextes où certaines opérations (comme récupérer
des données sur le web) prennent du temps. La programmation asynchrone permet d’exécuter
du code sans bloquer l’exécution globale.

2.1. setTimeout et setInterval

setTimeout :
Permet d’exécuter une fonction après un certain délai.

Exemple :

Explication :
 1. Le message "Début" s’affiche immédiatement.
2. setTimeout planifie l’exécution de la fonction anonyme après 2000 millisecondes (2
secondes).
3. "Fin" s’affiche avant le message retardé, montrant que le code continue de s’exécuter
pendant l’attente.

setInterval :
Similaire à setTimeout, mais exécute la fonction à intervalles réguliers.

Exemple :

Explication :

 La fonction est exécutée toutes les secondes.

 Après 5 exécutions, on arrête l’intervalle avec clearInterval.

2.2. Les Promesses (Promise)

Concept :
Une promesse est un objet qui représente une opération asynchrone. Elle peut être dans l’un
des trois états :

 En attente (pending)
 Réussie (fulfilled)
 Échouée (rejected)

Pourquoi c’est utile ?

 Pour éviter des chaînes de callbacks et gérer le code asynchrone de manière plus lisible.

Exemple détaillé :
Explication pas à pas :

1. La fonction fetchData retourne une nouvelle promesse.

2. À l’intérieur de la promesse, on simule une opération asynchrone qui, après 2
secondes, appelle resolve pour indiquer le succès.
3. then() est utilisé pour traiter le résultat en cas de succès.
4. catch() permet de capturer les erreurs (si on avait utilisé reject).
5. finally() s’exécute toujours, qu’il y ait eu succès ou erreur.

2.3. Async/Await

Concept :
Async/Await est une syntaxe introduite pour simplifier la gestion des promesses.

 Une fonction déclarée avec async retourne automatiquement une promesse.

 L’opérateur await permet d’attendre que la promesse soit résolue avant de continuer
l’exécution du code.

Exemple détaillé :
Explication pas à pas :

1. La fonction getData est déclarée avec async, ce qui permet d’utiliser await à
l’intérieur.
2. Le mot-clé await suspend l’exécution jusqu’à ce que la promesse soit résolue (ici,
après 2 secondes).
3. Le bloc try...catch est utilisé pour gérer d’éventuelles erreurs pendant l’exécution
asynchrone.

3. Gestion des Erreurs

3.1. Le Bloc try...catch

Concept :
try...catch permet d’essayer d’exécuter un bloc de code et, en cas d’erreur, d’exécuter un
autre bloc pour gérer cette erreur.

Exemple détaillé :
Explication :

1. Le bloc try contient du code qui pourrait lancer une erreur.

2. Si une erreur est lancée, le bloc catch intercepte l’erreur et permet de la traiter, par
exemple en affichant un message.

3.2. Gestion des erreurs dans les Promesses et Async/Await

Avec les promesses :

Avec Async/Await (utilisation de try...catch) :

Explication :

 Dans les promesses, catch() est utilisé pour attraper et gérer les erreurs.
 Avec async/await, on entoure l’appel avec try...catch pour capturer les erreurs de
la promesse rejetée.

4. Manipulation Avancée des Objets

4.1. Prototypes et Héritage

Concept :
En JavaScript, presque tout est un objet. Les objets peuvent hériter des propriétés et méthodes
d’un autre objet via ce que l’on appelle le prototype.
L’héritage par prototype permet de partager des méthodes entre plusieurs objets sans les
dupliquer.

Exemple détaillé :

Explication :

1. La fonction Person sert de constructeur pour créer des objets avec un attribut name.
2. La méthode sayHello est ajoutée à Person.prototype, ce qui signifie que tous les
objets créés avec Person auront accès à cette méthode.

4.2. Méthodes Statique et d’Instance

Concept :

 Méthodes d’instance : Disponibles sur les instances créées d’une classe.

 Méthodes statiques : Disponibles sur la classe elle-même, et non sur ses instances.

Exemple avec une classe :

Explication :

 MathUtils.add peut être appelée directement sans créer d’instance.

 Pour multiply, on doit d’abord créer une instance avec new MathUtils().

4.3. Object.create, Object.assign et Object.defineProperty

Object.create :
Permet de créer un nouvel objet en utilisant un autre objet comme prototype.

Explication :

 child hérite de la méthode greet définie dans parent grâce au prototype.

Object.assign :
Permet de copier les propriétés d’un ou plusieurs objets source dans un objet cible.
Explication :

 Les propriétés de source sont copiées dans target.

Object.defineProperty :
Permet de définir une propriété avec des attributs précis (par exemple, si la propriété est
modifiable ou non).

Explication :

 Ici, Object.defineProperty est utilisé pour créer une propriété prop avec une valeur
fixe (42) et pour contrôler ses attributs.
 Conclusion
Ce cours nous a permis de découvrir des concepts avancés de JavaScript de manière détaillée :

 Les fonctions avancées pour organiser et réutiliser du code (closures, callbacks,

récursion)
 La programmation asynchrone pour gérer des opérations qui prennent du temps
(setTimeout, Promesses, Async/Await)
 La gestion des erreurs afin de rendre ton code plus robuste
 La manipulation avancée des objets pour créer des structures d’objets flexibles et
réutilisables