Funkciju pacelšana un intervijas jautājumi

Šī ir mana iepriekšējā raksta par pacelšanu 2. daļa ar nosaukumu “Ceļvedis JavaScript mainīgo pacelšanai? ar let un const ”. Tāpēc pārliecinieties, ka esat to izlasījis, pirms ienirstat šajā.

Iepriekš es runāju par mainīgu pacelšanu tikai tāpēc, ka funkciju pacelšana JavaScript nav tas pats, kas mainīgais pacelšana, tas ir unikāls savā veidā. Es paplašināšu funkciju celšanu šajā kopā ar dažiem izplatītiem un sarežģītiem intervijas jautājumiem par pacelšanu (mainīgais un funkcija), ar kuru gandrīz noteikti var sastapties ikviens, kurš sniedz JavaScript intervijas.

Cerams, ka pēc šo 2 daļu pabeigšanas jūs būsiet gatavs izslēgt Hoisting no sava JavaScript sagatavošanas kontrolsaraksta!

Tiksim pie tā.

Funkcijas pacelšana

Funkcijās JavaScript var izveidot 2 veidos, izmantojot funkciju deklarāciju un funkciju izteiksmi . Apskatīsim, kas tie ir un kā pacelšana tos ietekmē.

Funkciju deklarācija

Funkcija deklarācija nosaka funkcija ar noteiktajiem parametriem.

Sintakse:

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

JavaScript funkciju deklarācijas paceļ funkciju definīcijas.

Tādēļ šīs funkcijas var izmantot pirms to deklarēšanas.

Piemērs:

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

Aiz ainas JavaScript tulks aplūko iepriekš minēto kodu:

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

Šī uzvedība ir taisnība, ja jums ir funkciju deklarācijas globālajā darbības jomā vai funkcionālajā tvērumā (galvenokārt vietējā joma JavaScript).

Tas var būt noderīgi, jo koda sākumā varat izmantot augstākā līmeņa loģiku, padarot to saprotamāku un saprotamāku.

Piezīme: Nekad nelietojiet funkciju deklarācijas iekšpusē, ja / cits bloķē.

Funkcijas izteiksme

functionAtslēgvārdu var arī izmantot, lai definētu funkciju iekšpusē izteiksmi.

Sintakse:

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

Tas [name]nav obligāts, tāpēc tās var būt anonīmas funkcijas. Mēs varam izmantot arī bultiņu funkcijas, piemēram:

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

Funkciju izteiksmes JavaScript valodā netiek paceltas.

Tāpēc pirms definēšanas nevar izmantot funkciju izteiksmes.

Piemērs:

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

Tas ir viss, kas jāpatur prātā, lai izveidotu funkcijas no pacelšanas viedokļa.

Tagad par dažiem intervijas jautājumiem!

Intervijas jautājumu pacelšana

Interviju laikā aktuāla tēma ir pacelšana, un tā ir neregulāra uzvedība. Izmantojot zināšanas no mana iepriekšējā un šī raksta, var apskatīt visus jautājumus par šo tēmu. Pateicoties tam, apskatīsim dažus izplatītākos jautājumus.

jautājums 1

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

Izeja: 1, kas ?! ?

Tas ir tāpēc, ka function a() {}paziņojums tagad ir izveidojis lokālu a, kuram ir funkcionāls / lokāls tvērums. Šis jaunais atagad tiek pacelts tā pievienošanas funkcijas augšdaļā b()ar tā deklarāciju un definīciju. Aizkulisēs notiek šādi:

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

Tāpēc paziņojums a = 10;vairs nemaina globālā vērtību, akas paliek 1, bet drīzāk maina vietējo ano funkcijas uz veselu skaitli 10. Tā kā mēs reģistrējam globālo a, izeja ir 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 piedāvā dažas atdzist jaunas funkcionālās funkcijas, kas padara JavaScript programmēšanu daudz elastīgāku. Parunāsim par ... medium.freecodecamp.org

Miers ✌️