Questions d'entretien sur le levage et le levage de fonctions

Ceci est une partie 2 de mon précédent article sur le levage intitulé «Un guide sur le levage variable JavaScript? avec let et const ». Alors assurez-vous de lire cela avant de plonger dans celui-ci.

Auparavant, je parlais de levage variable uniquement parce que le levage de fonction en JavaScript n'est pas la même chose que le levage variable, il est unique à sa manière. Je vais développer le levage de fonctions dans celui-ci avec quelques questions d'entretien courantes et délicates sur le levage (variable et fonction) que quiconque donne des interviews JavaScript est presque certain de rencontrer.

Espérons qu'après avoir terminé ces 2 parties, vous serez prêt à rayer Levage de votre liste de contrôle de préparation JavaScript!

Allons-y.

Fonction de levage

Il existe 2 façons de créer des fonctions en JavaScript, via la déclaration de fonction et via l'expression de fonction . Voyons de quoi il s'agit et comment le levage les affecte.

Déclaration de fonction

La déclaration de fonction définit une fonction avec les paramètres spécifiés.

Syntaxe:

function name(param1, param2, ...) { [statements]}

En JavaScript, les déclarations de fonction hissent les définitions de fonction.

Par conséquent, ces fonctions peuvent être utilisées avant d'être déclarées.

Exemple:

hoisted() // output: "Hoisted"
function hoisted() { console.log('Hoisted')}

Dans les coulisses, voici comment l'interpréteur JavaScript examine le code ci-dessus:

// Hoisted codefunction hoisted() { console.log('Hoisted')}
// Rest of the codehoisted() // output: "Hoisted"

Ce comportement est vrai si vous avez des déclarations de fonction dans l'étendue globale ou l'étendue fonctionnelle (essentiellement l'étendue locale en JavaScript).

Cela peut être utile car vous pouvez utiliser votre logique de niveau supérieur au début du code pour le rendre plus lisible et compréhensible.

Remarque: n'utilisez jamais de déclarations de fonction dans les blocs if / else.

Expression de fonction

Le functionmot-clé peut également être utilisé pour définir une fonction à l'intérieur d'une expression.

Syntaxe:

const myFunction = function [name](param1, param2, ...) { [statements]}

Le [name]est facultatif, il peut donc s'agir de fonctions anonymes. Nous pouvons également utiliser des fonctions fléchées comme ceci:

const myFunction = (param1, param2, ...) => { [statements]}

Les expressions de fonction en JavaScript ne sont pas hissées.

Par conséquent, vous ne pouvez pas utiliser d'expressions de fonction avant de les définir.

Exemple:

notHoisted() // TypeError: notHoisted is not a function
const notHoisted = function() { console.log('foo')}

C'est tout ce qu'il faut garder à l'esprit pour créer des fonctions du point de vue du levage.

Passons maintenant à quelques questions d'entrevue!

Questions d'entrevue de levage

Le levage et son comportement erratique sont un sujet brûlant lors des entretiens. En utilisant les connaissances de mon article précédent et de celui-ci, on peut parcourir toutes les questions sur le sujet. Cela dit, examinons quelques questions courantes.

question 1

var a = 1;
function b() { a = 10; return;
 function a() {}}
b();
console.log(a);

Sortie: 1, qu'est-ce que c'est?! ?

Cela est dû au fait que l' function a() {}instruction a maintenant créé un local aqui a une portée fonctionnelle / locale. Ce nouveau est amaintenant hissé au sommet de sa fonction englobante b()avec sa déclaration et sa définition. Voici ce qui se passe dans les coulisses:

var a = 1;
function b() { // Hoisted function a() {}
 a = 10; return;}
b();
console.log(a)

Par conséquent, l'instruction a = 10;ne change plus la valeur du global aqui reste à 1, mais plutôt elle change le local ad'une fonction à une valeur entière de 10. Puisque nous enregistrons le global a, la sortie est 1.

Had the statement function a() {} not been there, the output would have been 10.

Question 2

function foo(){ function bar() { return 3; } return bar(); function bar() { return 8; }}alert(foo());

Output: 8

Both the bar() functions are function declarations and will therefore be hoisted to the top of foo() local scope. However, the bar() returning 8 will be hoisted after the one returning 3. Therefore, the one returning 8 will be executed.

Behind the scenes:

function foo(){ //Hoisted before function bar() { return 3; } // Hoisted after function bar() { return 8; }
 return bar(); }alert(foo());

Question 3

function parent() { var hoisted = "I'm a variable"; function hoisted() { return "I'm a function"; } return hoisted(); }console.log(parent());

Output: “TypeError: hoisted is not a function”

This one’s tricky. Its Function vs. Variable! Let’s break it down.

We know that when it comes to variable hoisting, only the declaration(with a value of “undefined”) is hoisted, not the definition!

In the case of function declarations, the definitions are hoisted as well!

Now, in such a case of multiple declarations(variable and function in the same scope) with the same identifier, the hoisting of variables is simply IGNORED. The the interpreter comes across the function declaration and hoists it.

Finally, the statement of variable assignment (which was not hoisted) is executed and “I’m a variable” is assigned to hoisted, which is a simple string value and not a function. Hence the error!

Here’s the behind the scenes for this problem:

function parent() {
 // Function declaration hoisted with the definition function hoisted() { return "I'm a function"; }
 // Declaration ignored, assignment of a string hoisted = "I'm a variable"; 
 return hoisted(); 
}console.log(parent());

Question 4

alert(foo());function foo() { var bar = function() { return 3; }; return bar(); var bar = function() { return 8; };}

Output: 3

This one’s easy. The function foo() itself will be hoisted in the global scope as its a function declaration. As for inside foo(), its a clear case of function expression for both the bar()functions.

The second bar() will not be read by the interpreter ahead of time (no hoisting). The first one will be executed and returned.

Question 5

var myVar = 'foo';
(function() { console.log('Original value was: ' + myVar); var myVar = 'bar'; console.log('New value is: ' + myVar);})();

Output: “Original value was: undefined”, “New value is: bar”

In this one, again the global value of myVar(‘foo’) is out of the picture. This is because variable myVar is being declared and defined inside the local function scope and is therefore hoisted to the top of the IIFE with a value of ‘undefined’ which is logged first. The value ‘bar’ is then assigned and logged subsequently.

This concludes JavaScript Hoisting from my side. ?

Hope both the articles are of help to you.

Please check out the article below if you want to learn arrow functions and other ES6 functionality related to functions.

JavaScript ES6 Functions: The Good Parts

ES6 offers some cool new functional features that make programming in JavaScript much more flexible. Let’s talk about…medium.freecodecamp.org

Peace ✌️