Questions d'entretien JavaScript essentielles que vous devez connaître

En tant que personne ayant parcouru de nombreux entretiens JavaScript, j'ai compilé une liste de questions essentielles qui ont testé mes compétences et ma compréhension des concepts de base. Dans cette première partie de la série, je partage 40 questions auxquelles j'ai personnellement été confronté, couvrant tout, des fondamentaux aux sujets clés des entretiens.

Ces questions ne sont pas seulement théoriques ; ils vous mettent au défi de démontrer vos connaissances pratiques et vos capacités à résoudre des problèmes. Que vous vous prépariez à un rôle front-end ou full-stack, ces questions vous aideront à perfectionner vos compétences.

Chalo Shuru karte hai !

1. JavaScipt est-il un langage de type dynamique ou de type variable ?

Réponse : JavaScript est un langage typé dynamiquement, ce qui signifie que les types de variables peuvent changer au exécution au lieu d'être définis au moment de la compilation.

2. Comment envoyer des requêtes http au backend ?

Réponse : Récupérer l'API, Axios, XMLHttpRequest

3. Qu'est-ce que le contexte d'exécution ?

Réponse : En JavaScript, le contexte d'exécution est l'environnement dans lequel le code s'exécute et décide quelles variables, objets et fonctions peuvent être utilisés. Chaque fois qu'une fonction s'exécute, un nouveau contexte d'exécution est créé uniquement pour cette fonction, contenant ses propres variables et portée.

Chaque contexte d'exécution comporte deux phases principales :

1. Phase de création de mémoire : JavaScript analyse d'abord le code et alloue de la mémoire pour les variables et les fonctions.
2. Phase d'exécution : Le code s'exécute ligne par ligne.

4. Qu'est-ce que l'environnement lexical ?

Réponse : Un environnement lexical en JavaScript est une structure de données qui stocke les variables et les fonctions définies dans la portée actuelle, ainsi que les références à toutes les portées externes. On l'appelle également la portée lexicale.

5. Quelle est la différence entre null et indéfini ?

Réponse : null : une valeur d'affectation qui signifie qu'une variable ne pointe vers aucun objet, montrant qu'elle n'a pas de valeur spécifique.

non défini : signifie qu'une variable est déclarée mais n'a aucune valeur assignée, ce qui indique qu'il manque une valeur à la variable elle-même.

Le type de null est un objet.
Le type d'indéfini n'est pas défini.

6. Comment JavaScript gère la mémoire ?

Réponse : JavaScript gère la mémoire principalement via le garbage collection automatique, ce qui signifie qu'il alloue et libère automatiquement de la mémoire pendant l'exécution du code.

7. Expliquez la boucle d'événement ?

Réponse : JavaScript est un langage à thread unique, ce qui signifie qu'il ne peut exécuter qu'une seule tâche à la fois au sein d'une seule pile d'appels. Cependant, malgré cette nature monothread, JavaScript est capable d'effectuer des opérations asynchrones et non bloquantes grâce à la boucle d'événements.

La boucle d'événements est un mécanisme fondamental en JavaScript qui gère les opérations asynchrones. Lorsqu'une tâche, telle qu'une requête HTTP ou un événement DOM, est lancée, elle est transmise aux API du navigateur.

La boucle d'événements surveille en permanence la pile d'appels et la tâche
files d'attente. Si la pile d'appels est vide, la boucle d'événements vérifie d'abord le
file d'attente des microtâches pour toutes les tâches en attente et les exécute.

Une fois la file d'attente des microtâches vide, la boucle d'événements vérifie ensuite la file d'attente des macrotâches et déplace les tâches de là vers la pile d'appels pour exécution. Ce processus garantit que les tâches hautement prioritaires (microtâches) sont exécutées avant les tâches moins prioritaires (macrotâches).

8. Levage et Zone Morte Temporelle ?

Réponse : Hoisting est une fonctionnalité JavaScript qui vous permet d'utiliser des variables et des fonctions avant qu'elles ne soient déclarées. Cela signifie que vous pouvez utiliser des variables et des fonctions avant qu'elles ne soient définies dans votre code. Le levage est effectué par le moteur JavaScript, qui déplace la déclaration des variables et des fonctions vers le haut de leur "portée".

En JavaScript, avant d'exécuter un code, le moteur JavaScript effectue une phase de préparation de la mémoire appelée hoisting. Durant cette phase, le moteur alloue de la mémoire pour les variables et les fonctions.

Les déclarations de fonctions sont entièrement hissées, ce qui signifie qu'elles peuvent être invoquées n'importe où dans leur portée, avant même leur ligne de déclaration réelle.

Les variables déclarées avec var sont hissées et initialisées avec undefined. Cela signifie que vous pouvez accéder aux variables var avant leur déclaration, mais leur valeur sera indéfinie.

Par contre : Les variables déclarées avec let et const sont également hissées mais restent non initialisées. Y accéder avant leur déclaration dans le code entraîne une ReferenceError.

Zone morte temporelle :

Cette période entre le début du bloc et la déclaration effective d'une variable let ou const est appelée la Zone Morte Temporelle (TDZ). Le TDZ existe depuis le début du bloc jusqu'à la ligne où la variable est déclarée et initialisée.

La zone morte temporelle est un concept en JS lié aux déclarations let et const. Les variables avec des déclarations let ou const sont hissées au sommet de leur portée, mais elles ne sont pas immédiatement disponibles dans le code. Cela signifie que vous pouvez utiliser une variable avant qu'elle ne soit déclarée, mais la valeur de la variable sera indéfinie jusqu'à ce qu'une valeur lui soit attribuée.

9. Portée et chaîne de portée ?

Réponse : La portée régit l'accessibilité des variables dans différentes parties du code. Il détermine où une variable est accessible et
là où il ne peut pas.

Il existe trois types de scopes :

Portée globale : Les variables déclarées dans la portée globale peuvent être
accessible de n'importe où dans le code.
Portée locale : Les variables déclarées dans une fonction ne sont que
accessible dans cette fonction.
Portée du bloc : variables déclarées à l'intérieur d'un bloc (comme dans curly
les accolades {}) ne sont accessibles que dans ce bloc.

Chaîne de portée :

Chaîne de portée désigne une chaîne de références. JavaScript n'abandonne pas ; il dispose d'un mécanisme de recherche de variables. Il continue de rechercher la variable. Tout d’abord, il vérifiera dans la portée locale si la variable est accessible. Dans le cas contraire, il examinera la portée extérieure. Cela continuera jusqu'à ce qu'il atteigne la portée globale ou le contexte d'exécution global. Cette recherche continue d'une variable au cours de la chaîne est appelée chaînage de portée. Le contexte d'exécution recherche toujours de la portée interne vers la portée externe, mais il ne peut pas passer de la portée externe à la portée interne.

10. Héritage prototypique ?

Réponse : Liaison de prototypes d'un objet parent à un objet enfant pour partager et utiliser les propriétés de la classe parent. Cela signifie que les propriétés et les méthodes peuvent être transférées d'un objet à un autre via le prototype.

Par exemple, des méthodes comme .join et .length font partie de l'héritage prototypique car ces propriétés proviennent de la classe Object principale en JavaScript et sont disponibles dans vos objets.

En JavaScript, tout est un objet, les objets peuvent donc partager des propriétés. Cela signifie que les tableaux peuvent utiliser des méthodes d'objets et que les chaînes peuvent faire de même.

let faang = {
    name: "google",
    salary: function(){
        console.log("100K Salary")
    }
}

let engineer = {
    employeeId: 1278,
    role: function(){
        console.log("Frontend Developer")
    }
}

À l'ancienne :

engineer.__proto__ = faang;

Nouvelle façon :

let engineer = Object.create(faang, {
    role: function(){
        console.log("Backend Developer")
    }
})

Object.setPrototypeOf(engineer, faang);

// let res = Object.getPrototypeOf(faang);

11. Expliquer les promesses en JavaScript ?

Réponse : les promesses sont un moyen de gérer les opérations asynchrones en JavaScript. Ils vous permettent d'écrire du code pouvant être exécuté de manière asynchrone, sans bloquer le thread principal. Les promesses sont créées à l'aide du constructeur Promise et peuvent être enchaînées à l'aide de la méthode then.

Une promesse en JavaScript agit comme un espace réservé qui peut être résolu ou rejeté à l'avenir.

Les promesses ont trois états : en attente, remplies et rejetées. Lorsqu'une promesse est en attente, cela signifie que l'opération asynchrone est toujours en cours. Lorsqu'une promesse est tenue, cela signifie que l'opération asynchrone s'est terminée avec succès. Lorsqu'une promesse est rejetée, cela signifie que l'opération asynchrone a échoué.

Traitement des promesses

Les promesses fournissent des méthodes pour gérer le résultat de l'opération asynchrone :

.then() : Utilisé pour gérer l'état rempli et obtenir le
résolu valeur.
.catch() : utilisé pour gérer l'état rejeté et détecter les erreurs
qui s'est produit lors de l'exécution.
.finally() : Cette méthode exécute un rappel lorsque la promesse est
réglé, ce qui signifie qu'il se déroulera que la promesse soit tenue ou
rejeté.

12. Expliquez l'attente asynchrone ?

Réponse : Async/await est une fonctionnalité de syntaxe de JavaScript qui vous permet d'écrire du code asynchrone de manière plus synchrone. Il utilise les mots-clés async et wait pour définir des fonctions asynchrones

En JavaScript, la fonction asynchrone renvoie une promesse. Le mot-clé wait suspend l'exécution de la fonction asynchrone jusqu'à ce que la promesse attendue soit résolue. Après l'attente, le reste de la fonction asynchrone entre dans la file d'attente des microtâches. Cela permet un code asynchrone plus lisible et gérable.

let faang = {
    name: "google",
    salary: function(){
        console.log("100K Salary")
    }
}

13. Expliquez ce mot-clé ?

Réponse : Le mot-clé « this » fait référence à l'objet qui exécute actuellement la fonction. Sa valeur dépend du contexte dans lequel la fonction est appelée. Dans le contexte global (comme dans un navigateur), cela fait référence à l'objet window

14. Expliquer la clôture et la portée lexicale ?

Réponse : les fermetures sont des fonctions qui ont accès aux variables depuis leur portée externe, même une fois l'exécution de la fonction externe terminée.

Voici un exemple de fermeture en JavaScript :

let engineer = {
    employeeId: 1278,
    role: function(){
        console.log("Frontend Developer")
    }
}

Dans cet exemple, la fonction externalFunction définit une variable externalVariable et une fonction innerFunction qui a accès à externalVariable. La fonction innerFunction renvoie la fonction externalFunction, ce qui permet de l'appeler ultérieurement.

Un exemple de fermeture lié au DOM est la méthode addEventListener. La méthode addEventListener vous permet d'attacher des écouteurs d'événements aux éléments du DOM. La fonction d'écoute d'événements a accès aux propriétés et méthodes de l'élément, même après que l'élément a été supprimé du DOM.

Voici un exemple d'utilisation de la méthode addEventListener avec une fermeture :

engineer.__proto__ = faang;

Dans cet exemple, la fonction handleClick est définie dans la méthode addEventListener. La fonction handleClick a accès à l'élément bouton, même après que l'élément bouton a été supprimé du DOM.

Portée lexicale :

En JavaScript, la portée lexicale est le concept permettant de déterminer la portée d'une variable en fonction de sa déclaration. Cela signifie que la portée d'une variable est déterminée par le bloc de code dans
lequel il est déclaré, et non par le bloc de code dans lequel il est utilisé.

15. Le javascript est-il monothread ou multithread ?

Réponse : JavaScript est un langage à thread unique, ce qui signifie qu'il possède une pile d'appels et un tas de mémoire. Il exécute le code dans l’ordre, en complétant un morceau de code avant de passer au suivant. Cette structure permet à JavaScript de gérer les opérations asynchrones sans bloquer le thread principal.

Le comportement asynchrone nous permet d'utiliser des fonctionnalités telles que setTimeout, AJAX et promises. Ces fonctions sont gérées par le navigateur, et non par JavaScript lui-même, ce qui permet de garder le thread principal libre d'exécuter d'autres codes en attendant la fin de ces opérations.

16. Expliquez comment fonctionnent les moteurs javascript ?

Réponse : les moteurs JavaScript sont des programmes qui exécutent du code JavaScript. On les trouve dans les navigateurs Web et autres environnements hébergeant JavaScript. Les moteurs JavaScript les plus populaires sont le V8, SpiderMonkey et JavaScriptCore de Google. Ces moteurs sont écrits en C et sont utilisés pour exécuter du code JavaScript.

17. Différence entre var, let et const ?

Réponse :

-var : La portée d'une variable définie avec le mot-clé « var » est limitée à la « fonction » dans laquelle elle est définie. Si elle est définie en dehors d'une fonction, la portée de la variable est globale. La valeur par défaut de var n'est pas définie.

• let : La portée d'une variable définie avec le mot-clé "let" ou "const" est limitée au "bloc" défini par des accolades, c'est-à-dire {}. La valeur par défaut de let n'est pas initialisée.
• const : La portée d'une variable définie avec le mot-clé « const » est limitée au bloc défini par des accolades. Cependant si une variable est définie avec le mot-clé const, elle ne peut pas être réaffectée. La valeur par défaut de const n'est pas initialisée.

18. Différents types de types de données en javascript ?

Réponse : Il existe principalement deux types de types de données en JavaScript : les types de données primitifs et les types de données objet (référence).

Les types de données primitifs sont les types de données de base en JavaScript. Ils incluent des nombres, des chaînes, des booléens, des valeurs nulles et indéfinies. Les symboles sont également des types de données primitifs, qui représentent des identifiants uniques.

Les types de données d'objet sont des types de données qui contiennent d'autres types de données. Ils sont créés à l'aide de littéraux d'objet ou de fonctions de constructeur. Les objets, les tableaux et les fonctions sont des exemples de types de données d'objet.

19. Discuter du rappel ?

Réponse : les fonctions de rappel sont des fonctions qui sont transmises comme arguments à d'autres fonctions et sont appelées lorsqu'un certain événement se produit. Ils sont couramment utilisés en JavaScript pour gérer des opérations asynchrones, telles que l'envoi de requêtes HTTP ou la lecture d'un fichier.

20. Discutez de l’enfer des rappels ?

Réponse : L'enfer des rappels est un problème en JavaScript où les fonctions sont imbriquées les unes dans les autres, ce qui rend le code difficile à lire et à comprendre. Cela peut conduire à ce que les rappels soient appelés plusieurs fois ou ne soient pas appelés du tout, ce qui peut provoquer un comportement inattendu.

Voici un exemple d'enfer de rappel :

let faang = {
    name: "google",
    salary: function(){
        console.log("100K Salary")
    }
}

21. Comment créer un objet en javascript ?

Réponse : les objets sont un type de données fondamental en JavaScript. Ils peuvent être créés à l'aide de littéraux d'objet ou de fonctions de constructeur.

Les littéraux d'objet sont placés entre accolades {} et sont utilisés pour créer des objets avec des paires clé-valeur. Voici un exemple de littéral d'objet :

let engineer = {
    employeeId: 1278,
    role: function(){
        console.log("Frontend Developer")
    }
}

Les fonctions constructeur sont utilisées pour créer des objets avec des propriétés et une méthode personnalisées :

engineer.__proto__ = faang;

Bien qu'il existe d'autres façons de créer des objets, comme l'utilisation de la méthode Object.create(), les littéraux d'objet et les fonctions de constructeur sont les moyens les plus courants de créer des objets en JavaScript.

22. Comment cloner un objet en JavaScript ?

Réponse :

1. Utilisation d'Object.assign() :

let engineer = Object.create(faang, {
    role: function(){
        console.log("Backend Developer")
    }
})

Object.setPrototypeOf(engineer, faang);

// let res = Object.getPrototypeOf(faang);

1. Utilisation de l'opérateur Spread :

async function fetchData() {
  try {
    const response = await fetch('https://api.freeapi.app/v1/jokes/random');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData()
  .then(() => console.log('Data fetched'))
  .catch(error => console.error(error));

23. Que sont les opérateurs rest et spread en javascript ?

Réponse : Les opérateurs Rest et Spread sont deux fonctionnalités importantes de JavaScript qui vous permettent de travailler avec des tableaux et des objets de manière plus concise et lisible.

L'opérateur rest vous permet de prendre un tableau ou un objet comme argument et de l'utiliser dans un appel de fonction.

L'opérateur spread vous permet d'étendre un tableau ou un objet en éléments individuels.

function outerFunction() {
  const outerVariable = 'I am an outer variable';

  function innerFunction() {
    console.log(outerVariable); // Output: I am an outer variable
  }

  return innerFunction;
}

const closure = outerFunction();
closure(); // Output: I am an outer variable

Dans cet exemple, la fonction somme prend un tableau de nombres comme argument en utilisant l'opérateur reste.
L'opérateur spread est utilisé pour étendre le tableau en éléments individuels, qui sont ensuite transmis à la fonction de réduction.

24. Qu'est-ce qu'une fonction d'ordre supérieur en javascript ?

Réponse : les fonctions d'ordre supérieur sont des fonctions qui prennent d'autres fonctions comme arguments ou renvoient des fonctions comme résultats. Il s'agit d'un outil puissant en JavaScript qui vous permet d'écrire du code plus flexible et réutilisable.

const button = document.getElementById('myButton');

function handleClick() {
  console.log('Button clicked');
}

button.addEventListener('click', handleClick);

25. Nommez quelques fonctionnalités d’ES6 en javascript.

Réponse : Voici quelques-unes des fonctionnalités clés d'ES6 :

• Fonctions fléchées : les fonctions fléchées fournissent une syntaxe plus concise pour l'écriture de fonctions. Ils sont définis à l'aide du => opérateur.
• Littéraux de modèle : les littéraux de modèle vous permettent d'incorporer des expressions dans des chaînes. Ils sont entourés de guillemets (`) et peuvent être utilisés pour créer des chaînes multilignes.
• Affectation de déstructuration : L'affectation de déstructuration vous permet d'extraire des valeurs de tableaux ou d'objets et de les affecter à des variables. Cela se fait en utilisant l'opérateur =.
• Opérateur Spread : L'opérateur spread vous permet d'étendre un tableau ou un objet en éléments individuels. Il est utilisé pour passer plusieurs arguments à une fonction.
• Classes : les classes fournissent un moyen de définir des objets avec des propriétés et des méthodes. Ils sont définis à l'aide du mot-clé class.
• Modules : les modules vous permettent de diviser votre code en fichiers séparés et de bénéficier de fonctionnalités d'importation/exportation entre eux. Ils sont définis à l’aide des mots-clés import et export.
• Promesses : les promesses fournissent un moyen de gérer les opérations asynchrones en JavaScript. Ils sont utilisés pour représenter l'achèvement ou l'échec éventuel d'une opération asynchrone.
• Générateurs : Les générateurs permettent de définir des fonctions qui peuvent être mises en pause et reprises. Ils sont définis à l'aide du mot-clé function.
• Cartes et ensembles : les cartes et les ensembles sont des structures de données qui vous permettent de stocker des paires clé-valeur. Ils sont définis à l'aide des constructeurs Map et Set.

Pourquoi ces questions sont importantes

Ces questions reflètent les concepts fondamentaux que j'ai rencontrés lors de mes entretiens. Ils sont conçus pour tester votre compréhension de JavaScript dans des scénarios réels.

Vous préparez un entretien JavaScript ? Revisitez ces questions et mettez en pratique vos réponses. Pour une expérience d'apprentissage plus approfondie, consultez mes cours sur quicknxt.com pour acquérir des connaissances pratiques et améliorer vos compétences en codage. Continuons à apprendre ensemble !

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!