Cinq questions d'entretien JavaScript typiques

Dans le monde informatique, un grand nombre de développeurs javascript sont nécessaires. Si le poste met le mieux en valeur vos capacités, il existe de nombreuses opportunités de changer d’entreprise et d’augmenter votre salaire. Mais avant de pouvoir être accepté dans une entreprise, vous devez démontrer vos compétences afin de réussir le processus d'entretien. Dans cet article, je vais vous montrer cinq questions typiques.

Articles connexes recommandés : La collection la plus complète de questions d'entretien js en 2020 (dernière)

Question 1 : Portée

Pensez au code suivant :

(function() {
   var a = b = 5;
})();

console.log(b);

Qu'imprimera la console ?

Réponse

Le code ci-dessus imprimera 5 .

Le piège de ce problème est que dans l'expression de fonction immédiatement exécutée (IIFE), il y a deux noms, mais la variable est déclarée via le mot-clé var. Cela signifie que a est une variable locale de cette fonction. En revanche, b est une variable globale appartenant à cette fonction.

Un autre écueil de ce problème est qu'il n'a pas utilisé le "mode strict" ( 'use strict'; ) dans la fonction. Si le mode strict est activé, le code signalera une Uncaught ReferenceError : b n'est pas défini. N'oubliez pas les exigences du mode strict, vous devez référencer explicitement les variables globales si tel est le comportement attendu. Il faut donc écrire comme ceci :

(function() {
   'use strict';
   var a = window.b = 5;
})();

console.log(b);

Question 2 : Créer une méthode « native »

Définir une fonction de répétition sur l'objet String. Cette fonction accepte un paramètre entier pour spécifier combien de fois la chaîne doit être répétée. Cette fonction nécessite qu'une chaîne soit répétée un nombre de fois spécifié. Par exemple :

`console.log('hello'.repeatify(3));``

devrait afficher hellohellohello .

Réponse

Une implémentation possible ressemble à ceci :

String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';

   for (var i = 0; i < times; i++) {
      str += this;
   }

   return str;
};

Cette question teste le compréhension par le développeur de l'héritage en JavaScript et de l'attribut prototype. Cela vérifie également que les développeurs ont la possibilité d'étendre les fonctions de type de données natives (bien qu'ils ne devraient pas le faire).

Un autre point important ici est de montrer que vous comprenez comment le faire sans écraser les fonctions qui peuvent déjà être définies. Cela nécessite de déterminer que la fonction n'existe pas avant de la personnaliser.

`String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};``

Cette astuce est utile lorsqu'on vous demande de caler une fonction JavaScript.

Question 3 : Levage

Quel sera le résultat de l'exécution du code suivant ? Pourquoi cela se produit-il ?

function test() {
   console.log(a);
   console.log(foo());

   var a = 1;
   function foo() {
      return 2;
   }
}

test();

Réponse

Le résultat de l'exécution de ce code est indéfini et 2 .

La raison de ce résultat est que les variables et les fonctions sont hissées. Par conséquent, à ce moment-là, a a été imprimé, il existait dans la fonction (c'est-à-dire qu'il a été déclaré), mais il n'était toujours pas défini . En d’autres termes, le code ci-dessus et le code ci-dessous sont identiques.

function test() {
   var a;
   function foo() {
      return 2;
   }

   console.log(a);
   console.log(foo());

   a = 1;
}

test();

Question 4 : Comment ça marche en javascript

Quel est le résultat du code suivant ? Veuillez expliquer votre réponse.

var fullname = 'John Doe';
var obj = {
   fullname: 'Colin Ihrig',
   prop: {
      fullname: 'Aurelio De Rosa',
      getFullname: function() {
         return this.fullname;
      }
   }
};

console.log(obj.prop.getFullname());

var test = obj.prop.getFullname;

console.log(test());

Réponse

Le code imprime Aurelio De Rosa et John Doe. La raison en est qu'en JavaScript, le contexte d'une fonction, qui est référencée par le mot clé this, dépend de la manière dont la fonction est appelée, et non de la manière dont elle est définie.

Dans le premier appel console.log(), getFullname() est appelé en fonction de obj.prop. Par conséquent, le contexte pointe ici vers ce dernier et la fonction renvoie la propriété fullname de l'objet. En revanche, lorsque getFullname() est spécifié comme variable de test , ce contexte pointe vers l'objet global (fenêtre). Parce que test équivaut à être défini comme propriété de l'objet global. Pour cette raison, la fonction renvoie une propriété fullname de window, qui dans ce cas est définie sur la première ligne de l'extrait de code.

Problème 5 : call() et apply()

Résolvez le problème précédent et laissez le dernier console.log() imprimer Aurelio De Rosa.

Réponse

Cette question peut forcer le contexte de la fonction via function call() ou apply(). Si vous ne connaissez pas la différence entre call() et apply(), je vous recommande de lire l'article Quelles sont les différences entre function.call et function.apply . Dans le code suivant, j'utiliserai call(), mais dans ce cas apply() peut également obtenir le même résultat :

`console.log(test.call(obj.prop));``

Conclusion

Dans cet article, nous avons discuté de cinq types questions posées lors des entretiens pour tester les développeurs JavaScript. Les questions réelles des entretiens peuvent varier, mais les concepts et les sujets abordés sont généralement très similaires. J'espère que vous vous amuserez à tester vos capacités. Si vous ne connaissez pas toutes les réponses, ne vous inquiétez pas : il n'y a rien que vous ne puissiez résoudre sans apprentissage et sans expérience.

Si d’autres questions intéressantes vous ont été posées lors de l’entretien, n’hésitez pas à nous les partager. Cela aidera beaucoup de développeurs.

Recommandations d'apprentissage associées : Tutoriel vidéo javascript