23 questions difficiles pour les interviews JavaScript

1. Expliquer les fonctionnalités de validation de l'égalité JavaScript

Difficulté: *

• L'opérateur d'égalité stricte ( ===) vérifie l'égalité des valeurs sans effectuer de conversions de type.
• L'opérateur d'égalité non strict ( ==) vérifie l'égalité des valeurs, les convertissant en un type commun.

var a = "42";
var b = 42;

a == b;         // true
a === b;        // false

• Si l'une des valeurs comparées peut être une valeur trueou false- essayez d'éviter l'opérateur ==. Utilisez un opérateur ===.
• Utilisez l'opérateur ===dans le cas où si vous travaillez avec les valeurs suivantes: 0, «»ou [](tableau vide).
• Dans tous les autres cas, vous pouvez utiliser l'opérateur en toute sécurité ==. De plus, cela est non seulement sûr, mais contribue également à simplifier le code et à améliorer sa lisibilité.

2. Donnez des exemples de transtypage en un type logique de valeurs qui ne sont pas liées à ce type

Difficulté: ***

• «» (ligne vide).
• 0, -0, NaN(Pas un nombre).
• null, undefined.

• «hello».
• 42.
• [ ], [ 1, «2», 3 ](tableaux).
• { }, { a: 42 }(objets).
• function foo() { .. } (les fonctions).

3. Qu'est-ce que l'IIFE?

Difficulté: ***

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

4. Quand dois-je utiliser les fonctions fléchées apparues dans ES6?

Difficulté: ***

• Utilisez le mot clé functiondans la portée globale et pour les propriétés Object.prototype.
• Utilisez le mot-clé functionpour les constructeurs d'objets.
• Dans d'autres cas, utilisez les fonctions fléchées.

• Travail pratique avec le contexte. Les fonctions fléchées utilisent la valeur du thiscontexte environnant sans avoir la leur this. Si ces fonctions sont utilisées séquentiellement, sans utiliser de fonctions ordinaires dans des constructions complexes, cela garantit un travail sûr avec le contexte.
• Compacité. Le code de la fonction flèche est plus facile à saisir et à lire. Cet avantage des fonctions fléchées par rapport aux fonctions ordinaires vous semblera peut-être controversé et dépend du point de vue de chaque développeur spécifique.
• Clarté du code. Si presque tout le code est représenté par des fonctions fléchées, toute fonction ordinaire se distingue dans un tel code en créant son propre contexte. À l'aide des fonctions fléchées, le programmeur crée un code plus compréhensible dans lequel il est plus facile de travailler qu'avec du code sans fonctions fléchées this.

5. Quelle est la différence entre les classes ES6 et les constructeurs de fonctions?

Difficulté: ***

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

class Person {
  constructor(name) {
    this.name = name;
  }
}

function Student(name, studentId) {
  //      ,   .
  Person.call(this, name);

  //    .
  this.studentId = studentId;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

class Student extends Person {
  constructor(name, studentId) {
    super(name);
    this.studentId = studentId;
  }
}

6. Parlez-nous de la méthode Function.prototype.bind ().

Difficulté: ***

7. À quoi servent les fonctions anonymes?

Difficulté: ***

(function() {
  // - .
})();

setTimeout(function() {
  console.log('Hello world!');
}, 1000);

const arr = [1, 2, 3];
const double = arr.map(function(el) {
  return el * 2;
});
console.log(double); // [2, 4, 6]

8. Quelle est la différence entre la méthode Object.freeze () et le mot clé const?

Difficulté: ***

const person = {
    name: "Leonardo"
};
let animal = {
    species: "snake"
};
person = animal; // Uncaught TypeError: Assignment to constant variable.

let person = {
    name: "Leonardo"
};
Object.freeze(person);
person.name = "Lima"; // Uncaught TypeError: Cannot assign to read only property 'name' of object
console.log(person);

9. Qu'est-ce qu'un «générateur»?

Difficulté: ***

function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
    let iterationCount = 0;
    for (let i = start; i < end; i += step) {
        iterationCount++;
        yield i;
    }
    return iterationCount;
}

10. Quand faut-il utiliser des générateurs?

Difficulté: ***

• Le code dans lequel le générateur est utilisé détermine le moment où la prochaine valeur est reçue. Le générateur est uniquement responsable du retour des valeurs, il est contrôlé de l'extérieur.
• Il existe des générateurs asynchrones. Ils vous permettent de travailler avec des flux de données asynchrones.

11. Qu'est-ce que «l'augmentation des variables»?

Difficulté: ****

12. Que produira le code suivant?

Difficulté: ****

var output = (function(x) {
  delete x;
  return x;
})(0);

console.log(output);

13. Que produira le code suivant?

Difficulté: ****

var Employee = {
  company: 'xyz'
}
var emp1 = Object.create(Employee);
delete emp1.company
console.log(emp1.company);

console.log(emp1.hasOwnProperty('company')); // false

14. Parlez-nous du modèle de conception du prototype.

Difficulté: ****

15. Qu'est-ce qu'une «zone morte temporaire» dans ES6?

Difficulté: ****

//console.log(aLet)  //  ReferenceError

let aLet;
console.log(aLet); // undefined
aLet = 10;
console.log(aLet); // 10

16. Pouvez-vous décrire la principale différence entre les méthodes de tableau forEach () et map ()? Dans quelles situations préféreriez-vous une de ces méthodes à une autre?

Difficulté: ****

• Il itère sur les éléments du tableau.
• Il exécute la fonction de rappel qui lui est transmise pour chaque élément du tableau.
• Il ne retourne rien.

const a = [1, 2, 3];
const doubled = a.forEach((num, index) => {
  //  -  num /  index.
});

// doubled = undefined

• Il itère sur les éléments du tableau.
• Il convertit chaque élément du tableau d'origine en un élément du nouveau tableau, en appelant la fonction qui lui est transmise pour chaque élément du tableau d'origine.

const a = [1, 2, 3];
const doubled = a.map(num => {
  return num * 2;
});

// doubled = [2, 4, 6]

17. Quelle est la différence entre une variable non déclarée, une variable contenant une valeur nulle et une variable non définie? Comment vérifier qu'une variable est non déclarée, ainsi que nulle et non définie?

Difficulté: ****

function foo() {
  x = 1; //     ReferenceError
}

foo();
console.log(x); // 1

var foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
console.log(typeof foo === 'undefined'); // true

console.log(foo == null); // true.        undefined!

function bar() {}
var baz = bar();
console.log(baz); // undefined

var foo = null;
console.log(foo === null); // true
console.log(typeof foo === 'object'); // true

console.log(foo == undefined); // true        null!

18. Parlez-nous du module de conception "Module ouvert"

Difficulté: *****

var Exposer = (function() {
  var privateVariable = 10;

  var privateMethod = function() {
    console.log('Inside a private method!');
    privateVariable++;
  }

  var methodToExpose = function() {
    console.log('This is a method I want to expose!');
  }

  var otherMethodIWantToExpose = function() {
    privateMethod();
  }

  return {
      first: methodToExpose,
      second: otherMethodIWantToExpose
  };
})();

Exposer.first();        // : This is a method I want to expose!
Exposer.second();       // : Inside a private method!
Exposer.methodToExpose; // undefined

19. Quelle est la différence entre les objets Map et WeakMap?

Difficulté: *****

var map = new Map();
var weakmap = new WeakMap();

(function() {
    var a = {
        x: 12
    };
    var b = {
        y: 12
    };

    map.set(a, 1);
    weakmap.set(b, 2);
})()

20. Comment les paramètres sont-ils transmis à la fonction JavaScript: par référence ou par valeur?

Difficulté: *****

function changeStuff(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num);
console.log(obj1.item);
console.log(obj2.item);

10
changed
unchanged

21. Comment organiser un «gel profond» d'un objet?

Difficulté: *****

let person = {
    name: "Leonardo",
    profession: {
        name: "developer"
    }
};
Object.freeze(person); //   
person.profession.name = "doctor";
console.log(person); // { name: 'Leonardo', profession: { name: 'doctor' } }

function deepFreeze(object) {
    let propNames = Object.getOwnPropertyNames(object);
    for (let name of propNames) {
        let value = object[name];
        object[name] = value && typeof value === "object" ?
            deepFreeze(value) : value;
    }
    return Object.freeze(object);
}
let person = {
    name: "Leonardo",
    profession: {
        name: "developer"
    }
};
deepFreeze(person);
person.profession.name = "doctor"; // TypeError: Cannot assign to read only property 'name' of object

22. Pourquoi les programmeurs JavaScript ont-ils du mal à utiliser le mot-clé this?

Difficulté: *****

• Si la fonction est appelée sous la forme habituelle (c'est-à-dire en utilisant la construction de vue someFunc()), elle thisse référera à l'objet global (dans le navigateur ceci window). Si le code est exécuté en mode strict, une thisvaleur sera écrite undefined.
• Si la fonction est appelée comme méthode d'un objet, le mot-clé thissera représenté par l'objet auquel appartient la méthode.
• call apply, this , call apply.
• , this .
• , new, this , prototype -.
• Si la fonction a été créée à l'aide de la méthode bind , le mot this- clé function sera lié de manière rigide à la valeur transmise en bindtant que premier argument. Il s'agit de la seule exception à la règle selon laquelle les fonctions n'ont pas de valeur codée en dur this. Les fonctions créées à l'aide bindsont immuables this.

23. Comparez l'utilisation de la construction et des générateurs async / attendent pour implémenter la même fonctionnalité

Difficulté: *****

• Lors de l'itération d'un générateur à l'aide d'une méthode, .next()chaque appel à cette méthode renvoie une valeur unique à l'aide du mot clé yield. Lors de l'utilisation de la construction async / attendent, les expressions attendent sont exécutées séquentiellement.
• La conception asynchrone / attente simplifie la mise en œuvre d'un cas d'utilisation de générateur spécifique.
• Les valeurs renvoyées par le générateur ont toujours la forme {value: X, done: Boolean}et les fonctions asynchrones renvoient les promesses résolues avec la valeur X, ou échouent.
• Une fonction asynchrone peut être convertie en générateur à l'aide de promesses. Voici un exemple d'une telle conversion.

//  
async function init() {
    const res1 = await doTask1();
    console.log(res1);

    const res2 = await doTask2(res1);
    console.log(res2);

    const res3 = await doTask3(res2);
    console.log(res3);

    return res3;
}

init();

//    
function runner(genFn) {
    const itr = genFn();

    function run(arg) {
        let result = itr.next(arg);

        if (result.done) {
            return result.value;
        } else {
            return Promise.resolve(result.value).then(run);
        }
    }

    return run;
}

//   runner    
runner(function* () {
    const res1 = await doTask1();
    console.log(res1);

    const res2 = await doTask2(res1);
    console.log(res2);

    const res3 = await doTask3(res2);
    console.log(res3);

    return res3;
});