Maîtriser JavaScript avancé : sujets clés et questions d'entretien

JavaScript est un langage essentiel pour le développement Web moderne, mais maîtriser ses concepts avancés peut vous distinguer en tant que développeur. Dans ce blog, nous explorerons les principaux sujets JavaScript avancés et proposerons des questions d'entretien avec des réponses et des exemples pour vous aider à exceller lors de votre prochain entretien.

1. Fermetures

Qu'est-ce qu'une fermeture ?
Une fermeture est une fonction qui conserve l'accès à sa portée externe même après le retour de la fonction externe.

Exemple:

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log(`Outer Variable: ${outerVariable}, Inner Variable: ${innerVariable}`);
    };
}

const closureFunction = outerFunction("Hello");
closureFunction("World");

Sortie :

Outer Variable: Hello, Inner Variable: World

Question d'entretien :
Q : Comment les fermetures peuvent-elles être utilisées dans des scénarios pratiques ?
A : Les fermetures sont utiles pour masquer des données, comme l'implémentation de variables privées en JavaScript ou le maintien de l'état dans les rappels asynchrones.

2. Promesses et Async/Await

Que sont les promesses ?

Les promesses représentent une valeur qui peut être disponible maintenant, dans le futur ou jamais. Ils permettent une meilleure gestion des opérations asynchrones.

Exemple avec Async/Await :

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Data fetched"), 2000);
    });
}

async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

getData();

Sortie :

Data fetched

Question d'entretien :
Q : Quelle est la différence entre Promise.then() et async/await ?
A : Promise.then() est une méthode utilisée pour gérer les promesses, tandis que async/await fournit du sucre syntaxique pour rendre le code asynchrone synchrone, améliorant ainsi la lisibilité.

---

3. Boucle d'événements et modèle de concurrence

Comment fonctionne la boucle d'événement ?
La boucle d'événement gère l'exécution du code JavaScript, y compris les rappels et les tâches asynchrones.

Exemple :

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 0);

console.log("End");

Sortie :

Start
End
Timeout

Question d'entretien :
Q : Expliquez la différence entre la pile d'appels et la boucle d'événements.
A : La pile d'appels assure le suivi de l'exécution des fonctions, tandis que la boucle d'événements garantit que les tâches asynchrones, telles que les rappels, sont exécutées une fois la pile vide.

---

4. Prototypes et Héritage

Que sont les prototypes en JavaScript ?

Les prototypes permettent aux objets d'hériter des propriétés et des méthodes d'autres objets.

Exemple :

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

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person("Alice");
person1.greet();

Sortie :

Hello, my name is Alice

Question d'entretien :
Q : En quoi l'héritage prototypique diffère-t-il de l'héritage classique ?
A : L'héritage prototypique est basé sur des objets héritant directement d'autres objets, tandis que l'héritage classique repose sur des hiérarchies de classes.

---

5. Curry

Qu’est-ce que le curry ?

Currying transforme une fonction avec plusieurs arguments en une séquence de fonctions, chacune prenant un seul argument.

Exemple:

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log(`Outer Variable: ${outerVariable}, Inner Variable: ${innerVariable}`);
    };
}

const closureFunction = outerFunction("Hello");
closureFunction("World");

Sortie :

Outer Variable: Hello, Inner Variable: World

Question d'entretien :
Q : Pourquoi utiliser le curry en JavaScript ?
R : Le currying permet une application partielle, ce qui peut améliorer la réutilisabilité et la lisibilité du code.

6. Systèmes de modules

Modules CommonJS contre ES

• CommonJS : Utilisés dans Node.js, les modules sont chargés de manière synchrone à l'aide de require().
• Modules ES : Natifs de JavaScript, les modules sont chargés de manière asynchrone par importation et exportation.

Exemple :

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Data fetched"), 2000);
    });
}

async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

getData();

Question d'entretien :
Q : Quels sont les avantages de l'utilisation des modules ES par rapport à CommonJS ?
A : Les modules ES prennent en charge le tremblement d'arborescence pour optimiser la taille des bundles et sont pris en charge de manière native dans les navigateurs modernes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!