Votre aide-mémoire JavaScript et React ultime pour les entretiens

Préparer votre prochain entretien : sujets clés JavaScript et React

Sujets JavaScript

1. Levage

Le levage est le mécanisme JavaScript permettant de déplacer les déclarations de variables et de fonctions vers le haut de leur portée pendant la phase de compilation, avant l'exécution du code. Cela signifie que vous pouvez référencer des variables et des fonctions avant qu'elles ne soient réellement déclarées dans le code. Cependant, seules les déclarations sont levées, pas les initialisations. Pour les variables déclarées avec var, elles sont levées et initialisées à undefined, tandis que let et const sont levées mais pas initialisées, provoquant une erreur de « zone morte temporelle » en cas d'accès avant la déclaration. Les déclarations de fonctions sont entièrement hissées, ce qui signifie qu'elles peuvent être appelées avant d'apparaître dans le code.

Exemple :

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

Les déclarations de fonctions sont également hissées :

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

2. Clôture

Une fermeture est une fonctionnalité en JavaScript où une fonction conserve l'accès à sa portée lexicale même lorsqu'elle est exécutée en dehors de cette portée. Cela permet à la fonction de « mémoriser » les variables de sa portée environnante. Les fermetures sont souvent utilisées pour l'encapsulation de données, le maintien de l'état ou la création de variables privées en JavaScript. Ils sont formés chaque fois qu'une fonction est définie à l'intérieur d'une autre fonction et que la fonction interne fait référence à des variables dans la fonction externe.

Exemple :

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

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

3. Promesse

Les promesses représentent un espace réservé pour une valeur qui sera disponible dans le futur. Ils sont utilisés pour gérer les opérations asynchrones plus efficacement que les fonctions de rappel traditionnelles, réduisant ainsi « l’enfer des rappels ». Les promesses peuvent être dans l'un des trois états suivants : en attente, réalisée ou rejetée. Une fois qu’une promesse est tenue ou rejetée, elle devient immuable. Les promesses améliorent la lisibilité du code et facilitent l'enchaînement des opérations asynchrones.

Exemple :

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

4. Fonction Curry

Le currying de fonctions est une technique où une fonction avec plusieurs arguments est transformée en une séquence de fonctions, chacune prenant un seul argument. Cette approche est largement utilisée en programmation fonctionnelle pour créer des fonctions réutilisables en corrigeant certains arguments de la fonction d'origine. Le currying permet une meilleure lisibilité, réutilisation et modularisation du code.

Exemple :

function add(a) {
  return function(b) {
    return a + b;
  };
}

const add5 = add(5);
console.log(add5(3)); // 8

5. Contexte d'exécution

Le contexte d'exécution définit l'environnement dans lequel le code JavaScript est exécuté. Il comprend des variables, des objets et des fonctions accessibles à un moment donné. Il existe trois types de contextes d'exécution :

• Contexte d'exécution global : Créé lors de la première exécution d'un script. Les variables et fonctions déclarées dans la portée globale font partie de ce contexte.
• Contexte d'exécution de fonction : Créé chaque fois qu'une fonction est invoquée, contenant ses variables et paramètres locaux.
• Contexte d'exécution d'Eval : rarement utilisé, créé lorsque eval() est invoqué. Le contexte d'exécution en détermine également la valeur et implique la création de la chaîne de portée.

Exemple :

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

6. Appeler, postuler, lier

Ce sont des méthodes pour définir explicitement la valeur de this lors de l'appel d'une fonction.

• Call : appelle une fonction avec un contexte donné et des arguments passés individuellement.
• Apply : similaire à call, mais les arguments sont passés sous forme de tableau.
• Bind : renvoie une nouvelle fonction avec un contexte et des arguments spécifiques prédéfinis, sans l'invoquer immédiatement.

Exemple :

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

7. Polyfills pour les méthodes courantes

Les polyfills sont des extraits de code qui implémentent des fonctionnalités dans des environnements où elles ne sont pas disponibles nativement. Ils permettent aux anciens navigateurs ou environnements d'exécution de prendre en charge les fonctionnalités JavaScript modernes telles que Array.map, Promise ou Object.assign. Les polyfills sont souvent utilisés pour garantir la compatibilité et sont implémentés à l'aide d'une logique de secours qui imite le comportement de la fonctionnalité manquante.

Exemple : Array.prototype.map Polyfill :

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

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

Réagir aux sujets

1. Réconciliation

La réconciliation est le processus de React consistant à mettre à jour le DOM pour qu'il corresponde au DOM virtuel. React utilise un algorithme différent pour déterminer le nombre minimal de mises à jour nécessaires, ce qui rend le rendu efficace. Lorsque l'état ou les accessoires changent, React crée un nouveau DOM virtuel, le compare au précédent et met à jour uniquement les parties qui ont changé.

2. Crochets

Les hooks sont des fonctions qui permettent aux composants fonctionnels d'utiliser des fonctionnalités telles que les méthodes d'état et de cycle de vie, qui n'étaient auparavant disponibles que dans les composants de classe. Les exemples incluent useState pour la gestion de l’état et useEffect pour les effets secondaires. Les hooks rendent le code React plus concis et les composants fonctionnels plus puissants.

Exemple :

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

3. Classe vs composants fonctionnels

Les composants de classe sont des classes ES6 qui l'utilisent pour les méthodes d'état et de cycle de vie. Les composants fonctionnels sont des fonctions simples qui restituent l’interface utilisateur. Avec l'introduction des hooks, les composants fonctionnels peuvent gérer l'état et le cycle de vie sans avoir besoin de classes. Les composants fonctionnels sont privilégiés pour leur simplicité et leurs meilleures performances.

Exemple de composant de classe :

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

4. Mémorisation

La mémorisation est une technique d'optimisation des performances utilisée pour éviter les recalculs ou les rendus inutiles. Dans React, la mémorisation garantit que les composants sont restitués uniquement lorsque leurs accessoires ou leur état changent. Ceci est particulièrement utile dans les composants qui nécessitent des calculs coûteux ou qui nécessitent des mises à jour fréquentes.

Exemple :

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

5. Composant d'ordre supérieur (HOC)

Un HOC est un modèle de conception dans React où une fonction prend un composant en entrée et renvoie une version améliorée de ce composant. Les HOC sont couramment utilisés pour la réutilisation du code, la gestion de l'état et l'ajout de fonctionnalités telles que la journalisation ou l'authentification.

Exemple :

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

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

6. Performances

L'amélioration des performances de React implique des techniques telles que l'évitement des rendus inutiles, le chargement paresseux des composants et l'optimisation du rendu à l'aide de React.memo ou useMemo. Les développeurs utilisent également des outils comme React Profiler pour identifier les goulots d'étranglement.

7. Réagir au routeur

React Router est une bibliothèque permettant de gérer la navigation dans les applications React. Il permet aux développeurs de définir des itinéraires et de restituer dynamiquement les composants en fonction de l'URL. Les fonctionnalités incluent des itinéraires imbriqués, des paramètres d'itinéraire et des gardes de navigation.

Exemple :

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

8. Mise en cache

La mise en cache dans React implique de stocker les données fréquemment utilisées pour éviter de les récupérer. Ceci peut être réalisé en utilisant des bibliothèques telles que React-Query, Redux ou localStorage. La mise en cache améliore les performances et l'expérience utilisateur en réduisant les temps de chargement.

9. Sécurité

Pour sécuriser les applications React, les développeurs doivent valider et nettoyer les entrées des utilisateurs, utiliser HTTPS et éviter le JavaScript en ligne pour empêcher les attaques XSS. Des bibliothèques comme Helmet aident à définir des en-têtes HTTP sécurisés. L'authentification et l'autorisation doivent également être mises en œuvre de manière sécurisée.

10. Améliorer les performances

Les performances peuvent être améliorées par :

• Réduire la taille du bundle grâce au fractionnement du code.
• Éviter les mises à jour d'état inutiles.
• Utilisation de React.lazy pour un chargement paresseux.
• Optimisation des images et des ressources.
• Utiliser des algorithmes efficaces pour les tâches de calcul.

11. Fuites de mémoire

Les fuites de mémoire se produisent lorsque les objets ne sont plus utilisés mais ne sont pas récupérés. Dans React, les fuites résultent souvent d'un nettoyage inapproprié des écouteurs d'événements, des minuteries ou des abonnements. L'utilisation de useEffect avec une fonction de nettoyage garantit un nettoyage approprié, évitant ainsi de tels problèmes.

Nettoyer les abonnements ou les minuteries dans useEffect :

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

En conclusion, maîtriser les concepts fondamentaux de JavaScript et de React est crucial pour tout développeur souhaitant créer des applications robustes et efficaces. Ces principes constituent non seulement la base du développement Web, mais vous préparent également à relever des défis complexes en toute confiance. Qu'il s'agisse de comprendre les fermetures, d'optimiser les performances avec React ou de mettre en œuvre les meilleures pratiques de sécurité, une compréhension approfondie de ces sujets vous distinguera lors des entretiens et dans votre carrière. Continuez à explorer, à pratiquer et à perfectionner vos compétences, car le parcours d'apprentissage ne se termine jamais vraiment dans le monde en constante évolution de la programmation.

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!