Funktion Hejsning & Hejsning Interview Spørgsmål

Dette er en del 2 til min tidligere artikel om hejsning med titlen “En guide til JavaScript-variabel hejsning? med let og const ”. Så sørg for at læse det, før du dykker ned i denne.

Tidligere talte jeg kun om variabel hejsning, fordi funktionsløft i JavaScript ikke er det samme som variabel hejsning, det er unikt på sin egen måde. Jeg udvider funktionsløft i denne sammen med nogle almindelige og vanskelige interviewspørgsmål om hejsning (variabel og funktion), som enhver, der giver JavaScript-interviews, næsten er sikker på at støde på.

Forhåbentlig, når du er færdig med disse 2 dele, vil du være klar til at afkrydse Hejsning fra din JavaScript prep tjekliste!

Lad os komme til det.

Funktionsløft

Der er 2 måder at oprette funktioner i JavaScript gennem funktionsdeklaration og gennem funktionsudtryk . Lad os se, hvad disse er, og hvordan hejsning påvirker dem.

Funktionserklæring

Den funktion erklæring definerer en funktion med de angivne parametre.

Syntaks:

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

I JavaScript hejser funktionserklæringer funktionsdefinitionerne.

Derfor kan disse funktioner bruges, før de erklæres.

Eksempel:

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

Bag kulisserne ser dette sådan på JavaScript-tolken på ovenstående kode:

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

Denne adfærd er sand, hvis du har funktionserklæringer i det globale omfang eller funktionelle omfang (grundlæggende lokalt omfang i JavaScript).

Dette kan være nyttigt, fordi du kan bruge din logik på højere niveau i begyndelsen af ​​koden, hvilket gør den mere læselig og forståelig.

Bemærk: Brug aldrig funktionserklæringer inde i hvis / ellers blokke.

Funktionsudtryk

Den functionnøgleord kan også anvendes til at definere en funktion inde et udtryk.

Syntaks:

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

Det [name]er valgfrit, derfor kan disse være anonyme funktioner. Vi kan også bruge pilfunktioner som sådan:

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

Funktionsudtryk i JavaScript hejses ikke.

Derfor kan du ikke bruge funktionsudtryk, før du definerer dem.

Eksempel:

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

Dette er alt hvad der skal holdes for øje for oprettelse af funktioner fra et hejsesynspunkt.

Nu videre til nogle interviewspørgsmål!

Spørgsmål om hejsning af interviews

Hejsning, og det er uregelmæssig adfærd er et varmt emne under interviews. Ved hjælp af viden fra min tidligere artikel og denne kan man sejle igennem alle spørgsmål om emnet. Med det sagt, lad os se på nogle almindelige spørgsmål.

Spørgsmål 1

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

Output: 1, hvad er det ?! ?

Dette skyldes, at function a() {}erklæringen nu har oprettet et lokalt, ader har et funktionelt / lokalt omfang. Denne nye abliver nu hejst til toppen af ​​sin omslutningsfunktion b()med dens erklæring og definition. Dette er hvad der sker bag kulisserne:

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

Derfor a = 10;ændrer udsagnet ikke længere værdien af ​​det globale, asom forbliver at være 1, men snarere ændrer det det lokale afra en funktion til et helt tal på 10. Da vi logger det globale a, er output 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 tilbyder nogle seje nye funktionelle funktioner, der gør programmering i JavaScript meget mere fleksibel. Lad os tale om ... medium.freecodecamp.org

Fred ✌️