Funktsioonide tõstmine ja intervjuu küsimuste tõstmine

See on 2. osa minu eelmisele artiklile Hoisting pealkirjaga “Juhend JavaScripti muutuva tõstmise kohta? koos let ja constiga ”. Nii et enne selle sukeldumist lugege see kindlasti läbi.

Varem rääkisin muutuvast tõstmisest ainult seetõttu, et JavaScripti funktsioonide tõstmine ei ole sama mis muutuvtõstmine, see on omal moel ainulaadne. Laiendan selles funktsioonide tõstmist koos mõningate levinud ja keeruliste intervjuuküsimustega tõstmise kohta (muutuja ja funktsioon), millega keegi JavaScripti intervjuusid andmas on peaaegu kindel.

Loodetavasti olete pärast nende kahe osa viimistlemist valmis tõstma oma JavaScripti eeltingimustega kontrollnimekirja!

Läheme selle juurde.

Funktsiooni tõstmine

JavaScripti funktsioonide loomiseks on kaks võimalust, funktsioonide deklaratsiooni ja funktsioonide avaldiste kaudu . Vaatame, mis need on ja kuidas heiskamine neid mõjutab.

Funktsioonide deklaratsioon

Funktsiooni deklaratsiooni määratleb funktsiooni määratud parameetrid.

Süntaks:

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

JavaScripti funktsioonide deklaratsioonid tõstavad funktsioonide definitsioone.

Seetõttu saab neid funktsioone kasutada enne nende deklareerimist.

Näide:

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

Stseenide taga vaatab JavaScripti tõlk ülaltoodud koodi:

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

See käitumine on tõene, kui teil on funktsioonide deklaratsioonid globaalses ulatuses või funktsionaalses ulatuses (JavaScripti põhiliselt kohalik ulatus).

See võib olla kasulik, kuna saate koodi alguses kasutada oma kõrgema taseme loogikat, muutes selle loetavamaks ja arusaadavamaks.

Märkus: Ärge kunagi kasutage funktsioonideklaratsioone, kui / else blokeerib.

Funktsiooni avaldis

functionMärksõna saab kasutada ka määratleda funktsiooni sees väljendus.

Süntaks:

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

See [name]on valikuline, seetõttu võivad need olla anonüümsed funktsioonid. Saame kasutada ka noole funktsioone:

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

JavaScripti funktsiooniväljendeid ei tõsteta.

Seetõttu ei saa te enne nende määratlemist kasutada funktsiooniväljendeid.

Näide:

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

See on kõik, mida tõstmise vaatepunktist funktsioonide loomisel tuleb meeles pidada.

Nüüd mõned intervjuuküsimused!

Intervjuuküsimuste tõstmine

Tõstmine ja selle ebakorrapärane käitumine on intervjuude ajal kuum teema. Kasutades minu eelmise artikli ja selle artikli teadmisi, saab tutvuda teemakohaste küsimustega. Seda öeldes vaatame mõningaid levinumaid küsimusi.

küsimus 1

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

Väljund: 1, mis ?! ?

Seda seetõttu, et function a() {}avaldus on nüüd loonud kohaliku a, millel on funktsionaalne / kohalik ulatus. See uus atõstetakse nüüd oma kinnitusfunktsiooni tippu b()koos selle deklaratsiooni ja määratlusega. Lava taga toimub nii:

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

Seetõttu a = 10;ei muuda avaldus enam globali väärtust, amis jääb väärtuseks 1, vaid pigem muudab alokaali funktsioonist täisarvuks 10. Kuna logime globaalse logimise a, on väljundiks 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 pakub uusi lahedaid funktsionaalseid funktsioone, mis muudavad JavaScripti programmeerimise palju paindlikumaks. Räägime ... medium.freecodecamp.org

Rahu ✌️