1.

Introduction

1.1. Qu'est-ce que JavaScript et quel rôle joue-t-il sur le web ?

JavaScript est un langage de programmation principalement utilisé pour créer des pages web
interactives. Il permet de manipuler les éléments du DOM (Document Object Model), gérer
les événements (comme les clics ou les mouvements de souris), et effectuer des appels réseau
pour charger des données en arrière-plan sans recharger la page.

1.2. Quels sont les principaux objectifs de ce cours sur JavaScript avancé ?

Ce cours vise à approfondir les concepts fondamentaux de JavaScript pour comprendre et

maîtriser des techniques avancées comme les closures, les promesses, l'asynchrone, la gestion
des erreurs, et la manipulation avancée des objets et des prototypes.

1.3. Quels concepts JavaScript avancés seront explorés dans ce cours ?

Les concepts abordés incluent les closures, les callbacks, la récursion, les promesses,
async/await, la gestion des erreurs, les prototypes, l'héritage, et les méthodes avancées des
objets comme Object.create, Object.assign, et Object.defineProperty.

2. Fonctions Avancées

2.1. Les Closures

4. Qu'est-ce qu'une closure en JavaScript ?

Une closure est une fonction qui "capture" et conserve l'accès à son environnement lexical
(les variables de son scope parent) même après l'exécution de la fonction parent. Cela permet
de maintenir l'état entre les appels de fonction.

5. Comment une closure permet-elle de créer des variables privées ?

Les closures permettent de créer des variables privées en les encapsulant dans une fonction.
Ces variables ne sont accessibles que via des fonctions internes à la closure.

6. Quelle est l’utilité d'une closure pour maintenir un état entre plusieurs appels de fonction ?

Une closure peut stocker des valeurs persistantes, permettant de créer des compteurs,
mémoriser des états ou gérer des variables privées.

7. Peux-tu expliquer le fonctionnement de l'exemple de createCounter avec une closure ?

function createCounter() {
let count = 0;
return function() {
count++;
 return count;
}
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2

Ici, createCounter renvoie une fonction qui a accès à la variable count dans son
environnement lexical. Chaque appel à counter() incrémente la valeur de count, mais cette
variable est protégée des accès extérieurs.

2.2. Fonctions de rappel (Callbacks)

8. Qu'est-ce qu'une fonction de rappel (callback) et à quoi sert-elle ?

Une fonction de rappel est une fonction passée en argument à une autre fonction, qui l'exécute
à un moment donné. Elle permet de gérer des opérations asynchrones ou de définir des actions
spécifiques après un certain événement.

9. Pourquoi les fonctions de rappel sont-elles utiles dans la gestion des événements ou des opérations
asynchrones ?

Les callbacks permettent de définir des comportements à exécuter après des événements
comme des clics ou des requêtes réseau. Elles sont essentielles pour éviter de bloquer
l'exécution du programme.

10. Que peut-on entendre par "callback hell" et comment les éviter ?

Le "callback hell" désigne une situation où plusieurs fonctions de rappel sont imbriquées,
rendant le code difficile à lire. Cela peut être évité en utilisant des promesses ou des fonctions
async/await.

11. Peux-tu expliquer le fonctionnement du code de l'exemple avec la fonction greet et le callback
sayGoodbye ?

function greet(name, callback) {

console.log("Hello, " + name);
callback();
}

function sayGoodbye() {
console.log("Goodbye!");
}

greet("Alice", sayGoodbye);
// Output:
// Hello, Alice
// Goodbye!

Ici, greet prend un nom et un callback. Après avoir salué, il appelle la fonction sayGoodbye.

2.3. Fonctions récursives

12. Qu'est-ce qu'une fonction récursive et comment fonctionne-t-elle ?

Une fonction récursive est une fonction qui s'appelle elle-même pour résoudre un problème en
plusieurs étapes, généralement avec une condition d'arrêt pour éviter une boucle infinie.

13. Pourquoi utiliser une fonction récursive pour résoudre des problèmes comme le calcul d'une factorielle
?

Les fonctions récursives sont utiles lorsque le problème peut être divisé en sous-problèmes
similaires, comme le calcul de la factorielle : n! = n * (n-1)!.

14. Peux-tu détailler le processus de calcul de la factorielle d’un nombre avec une fonction récursive ?

function factorial(n) {
if (n === 0) {
return 1;
}
return n * factorial(n - 1);
}

console.log(factorial(5)); // 120

La fonction se rappelle elle-même avec n-1 jusqu'à ce que n soit égal à 0. Chaque appel
empile les résultats avant de renvoyer la valeur finale.

3. Programmation Asynchrone

3.1. setTimeout et setInterval

15. Quelle est la différence entre setTimeout et setInterval en JavaScript ?

 setTimeout exécute une fonction après un certain délai (une seule fois).
 setInterval exécute une fonction à intervalles réguliers.

16. Comment utilise-t-on setTimeout pour exécuter une fonction après un certain délai ?

setTimeout(() => {
console.log("Exécution après 2 secondes");
}, 2000);

Ici, la fonction sera exécutée après 2 secondes.

17. Quelle est l’utilité de setInterval et comment arrête-t-on un intervalle avec clearInterval ?

let interval = setInterval(() => {

console.log("Exécution toutes les 2 secondes");
}, 2000);

// Pour arrêter l'intervalle

clearInterval(interval);

setInterval exécute une fonction toutes les 2 secondes. On arrête l'exécution avec
clearInterval.
3.2. Promesses (Promise)

18. Qu'est-ce qu'une promesse en JavaScript et quels sont ses trois états ?

Une promesse représente la valeur d'une opération asynchrone, qui peut être :

 Pending : L'opération est en cours.

 Fulfilled : L'opération est terminée avec succès.
 Rejected : L'opération a échoué.

19. Comment les promesses peuvent-elles améliorer la lisibilité du code par rapport aux callbacks ?

Les promesses permettent d'éviter l'imbriquement des callbacks (callback hell) et de mieux
gérer les erreurs et les résultats d'opérations asynchrones.

20. Peux-tu expliquer le fonctionnement d'une promesse avec l'exemple de fetchData ?

function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Données récupérées");
}, 2000);
});
}

fetchData().then(result => {
console.log(result); // Données récupérées
});

Ici, la promesse retourne des données après 2 secondes.

21. Quelle est la différence entre then(), catch() et finally() dans une promesse ?

 then() : Gère le succès de la promesse.

 catch() : Gère les erreurs.
 finally() : S'exécute indépendamment du résultat (succès ou échec).

3.3. Async/Await

22. Quelle est la syntaxe d'async et await et comment simplifie-t-elle la gestion des promesses ?

async marque une fonction comme asynchrone et permet d'utiliser await pour attendre la
résolution d'une promesse de manière synchrone.

async function fetchData() {

let result = await someAsyncFunction();
console.log(result);
}

23. Pourquoi une fonction déclarée avec async retourne-t-elle toujours une promesse ?

Une fonction async retourne toujours une promesse, même si elle ne contient pas de
promesses internes. Elle renvoie implicitement une promesse résolue avec la valeur de retour.
24. Quelle est la fonction du bloc try...catch dans la gestion des erreurs avec async/await ?

Le bloc try...catch permet de capturer les erreurs dans une fonction async et d'y répondre
de manière propre.

async function fetchData() {

try {
let result = await someAsyncFunction();
console.log(result);
} catch (error) {
console.log("Erreur:", error);
}
}

4. Gestion des Erreurs

4.1. Le Bloc try...catch

25. Quel est le rôle du bloc try...catch dans la gestion des erreurs en JavaScript ?

Il permet de capturer et de gérer les erreurs qui se produisent dans le bloc try.

26. Peux-tu donner un exemple concret d'utilisation du bloc try...catch pour gérer une erreur ?

try {
let result = riskyFunction();
} catch (error) {
console.log("Erreur détectée:", error);
}

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

27. Comment gérer les erreurs dans une promesse avec catch() ?

fetchData()
.then(result => console.log(result))
.catch(error => console.log("Erreur:", error));

28. Comment le bloc try...catch permet-il de gérer les erreurs dans un contexte async/await ?

Le bloc try...catch permet de capturer les erreurs lors de l'attente de la promesse dans une
fonction async.

async function fetchData() {

try {
let result = await someAsyncFunction();
console.log(result);
} catch (error) {
console.log("Erreur:", error);
}
}

29. Quelle est la différence entre la gestion des erreurs dans une promesse et dans une fonction async ?
Dans les promesses, les erreurs sont gérées via catch(), tandis que dans une fonction async,
les erreurs sont gérées avec try...catch.

5. Manipulation Avancée des Objets

5.1. Prototypes et Héritage

30. Qu'est-ce qu'un prototype en JavaScript et comment fonctionne l'héritage par prototype ?

Chaque objet en JavaScript a une propriété interne appelée prototype. L'héritage par
prototype permet à un objet de partager des propriétés et méthodes avec un autre objet via
cette chaîne de prototypes.

31. Peux-tu expliquer un exemple de création d'un objet avec un prototype et l’utilisation d'une méthode
partagée ?

function Person(name) {
this.name = name;
}

Person.prototype.sayHello = function() {
console.log("Hello, " + this.name);
};

const john = new Person("John");

john.sayHello(); // Hello, John

5.2. Méthodes Statique et d'Instance

32. Quelle est la différence entre une méthode d'instance et une méthode statique ?

 Méthodes d'instance : Dépendent d'une instance spécifique de l'objet.

 Méthodes statiques : Appartiennent à la classe elle-même et ne nécessitent pas
d'instance.

33. Peux-tu illustrer la différence avec un exemple d'implémentation dans une classe ?

class MyClass {
static staticMethod() {
console.log("Méthode statique");
}

instanceMethod() {
console.log("Méthode d'instance");
}
}

MyClass.staticMethod(); // Méthode statique

const obj = new MyClass();
obj.instanceMethod(); // Méthode d'instance

5.3. Object.create, Object.assign et Object.defineProperty

34. Qu'est-ce que la méthode Object.create et comment est-elle utilisée pour créer un nouvel objet
avec un prototype ?

const person = {
greet() {
console.log("Hello");
}
};

const john = Object.create(person);

john.greet(); // Hello

35. Comment Object.assign permet-il de copier des propriétés d'un objet vers un autre ?

const obj1 = { a: 1, b: 2 };
const obj2 = Object.assign({}, obj1);
console.log(obj2); // { a: 1, b: 2 }

36. En quoi consiste la méthode Object.defineProperty et comment permet-elle de définir des

propriétés avec des attributs spécifiques ?

const obj = {};

Object.defineProperty(obj, 'name', {
value: 'Alice',
writable: false,
enumerable: true,
configurable: false
});
console.log(obj.name); // Alice

Conclusion

37. Quels concepts JavaScript avancés ce cours couvre-t-il pour améliorer la gestion du
code et des objets ?

Ce cours couvre la gestion des opérations asynchrones, l’utilisation de prototypes et

d’héritage, ainsi que la manipulation des objets via des méthodes comme Object.create,
Object.assign et Object.defineProperty.

38. Pourquoi la gestion asynchrone est-elle un aspect essentiel à comprendre pour un

développeur JavaScript ?

La gestion asynchrone est cruciale pour travailler avec des opérations non bloquantes comme
les appels API, les événements utilisateur et la manipulation du DOM sans interrompre
l'exécution du programme.

39. Quel est l'impact de la manipulation avancée des objets sur la flexibilité du code
JavaScript ?

La manipulation avancée des objets permet de créer des structures plus flexibles, modulaires
et réutilisables. Elle facilite l'encapsulation, la gestion des prototypes et l'utilisation de
méthodes statiques et d'instance.
Cela couvre bien les principaux concepts et exemples pour chaque question.