Fragen zum Heben und Heben von Vorstellungsgesprächen

Dies ist Teil 2 meines vorherigen Artikels über das Heben mit dem Titel „Eine Anleitung zum Heben von JavaScript-Variablen? mit let und const ”. Lesen Sie das also unbedingt durch, bevor Sie in dieses eintauchen.

Bisher habe ich nur über das Heben von Variablen gesprochen, da das Heben von Funktionen in JavaScript nicht mit dem Heben von Variablen identisch ist, sondern auf seine Weise einzigartig ist. Ich werde das Heben von Funktionen in diesem Artikel zusammen mit einigen allgemeinen und kniffligen Interviewfragen zum Heben (Variable und Funktion) erweitern, auf die jeder, der JavaScript-Interviews gibt, mit ziemlicher Sicherheit stoßen wird.

Hoffentlich sind Sie nach Abschluss dieser beiden Teile bereit, das Heben von Ihrer JavaScript-Vorbereitungs-Checkliste zu streichen!

Lasst uns anfangen.

Funktion Heben

Es gibt zwei Möglichkeiten, Funktionen in JavaScript zu erstellen: durch Funktionsdeklaration und durch Funktionsausdruck . Mal sehen, was das ist und wie sich das Heben auf sie auswirkt.

Funktionserklärung

Die Funktionsdeklaration definiert eine Funktion mit den angegebenen Parametern.

Syntax:

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

In JavaScript heben Funktionsdeklarationen die Funktionsdefinitionen an.

Daher können diese Funktionen verwendet werden , bevor sie deklariert werden.

Beispiel:

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

Hinter den Kulissen sieht der JavaScript-Interpreter den obigen Code folgendermaßen aus:

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

Dieses Verhalten ist wahr, wenn Sie Funktionsdeklarationen im globalen Bereich oder im funktionalen Bereich haben (im Grunde lokaler Bereich in JavaScript).

Dies kann hilfreich sein, da Sie Ihre übergeordnete Logik am Anfang des Codes verwenden können, um ihn lesbarer und verständlicher zu machen.

Hinweis: Verwenden Sie niemals Funktionsdeklarationen in if / else-Blöcken.

Funktionsausdruck

Das functionSchlüsselwort kann auch verwendet werden, um eine Funktion innerhalb eines Ausdrucks zu definieren.

Syntax:

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

Das [name]ist optional, daher können dies anonyme Funktionen sein. Wir können auch Pfeilfunktionen wie folgt verwenden:

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

Funktionsausdrücke in JavaScript werden nicht gehisst.

Daher können Sie keine Funktionsausdrücke verwenden, bevor Sie sie definiert haben.

Beispiel:

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

Dies ist alles, was Sie beachten müssen, um Funktionen unter dem Gesichtspunkt des Hebens zu erstellen.

Nun zu einigen Interviewfragen!

Fragen zum Heben von Interviews

Heben und sein unberechenbares Verhalten ist ein heißes Thema bei Interviews. Mit dem Wissen aus meinem vorherigen und diesem Artikel kann man alle Fragen zum Thema durchgehen. Nachdem dies gesagt ist, schauen wir uns einige häufig gestellte Fragen an.

Frage 1

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

Ausgabe: 1, was zum?! ?

Dies liegt daran, dass die function a() {}Anweisung jetzt ein lokales aElement mit einem funktionalen / lokalen Bereich erstellt hat. Dieser neue wird ajetzt b()mit seiner Deklaration und Definition an die Spitze seiner umschließenden Funktion gehievt . Dies geschieht hinter den Kulissen:

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

Daher a = 10;ändert die Anweisung nicht mehr den Wert des globalen Wertes, der anoch 1 sein muss, sondern den lokalen aWert von einer Funktion in einen ganzzahligen Wert von 10. Da wir den globalen Wert protokollieren a, ist die Ausgabe 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 ✌️