Funkció emelés és interjúk felvetése

Ez az előző cikkem az emelésről, amelynek címe: „Útmutató a JavaScript változó emeléséhez? let és const ”-val. Tehát mindenképpen olvassa el, mielőtt belemerülne.

Korábban csak azért beszéltem a változó emelésről, mert a JavaScript-ben a függvény-emelés nem azonos a változó emeléssel, egyedülálló a maga módján. Bővítem a funkció emelését, valamint néhány általános és trükkös interjúkérdést az emelésről (változó és függvény), amelyekkel szinte biztos, hogy bárki találkozik, akik JavaScript-interjúkat adnak.

Remélhetőleg, miután befejezte ezt a 2 részt, készen áll arra, hogy a JavaScript előkészítő ellenőrzőlistájáról leválassza a Hoisting alkalmazást!

Térjünk rá.

Funkció emelés

A függvények létrehozásának két módja van a JavaScript-ben, a Function Declaration és a Function Expression segítségével . Lássuk, mik ezek és hogyan befolyásolja őket az emelés.

Funkciónyilatkozat

A függvénydeklaráció meghatároz egy függvényt a megadott paraméterekkel.

Szintaxis:

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

A JavaScriptben a függvénydeklarációk emelik a függvénydefiníciókat.

Ezért ezek a függvények deklarálásuk előtt használhatók .

Példa:

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

A kulisszák mögött a JavaScript-tolmács így nézi meg a fenti kódot:

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

Ez a viselkedés igaz, ha a globális hatókörben vagy a funkcionális hatókörben (alapvetően a helyi hatókör a JavaScript-ben) van funkciódeklaráció.

Ez hasznos lehet, mert a kód elején használhatja a magasabb szintű logikáját, így az olvashatóbb és érthetőbb.

Megjegyzés: Soha ne használjon funkciódeklarációkat az if / else blokkolásakor.

Funkció kifejezés

A functionkulcsszó arra is használható, hogy meghatározzon egy funkciót egy kifejezésen belül.

Szintaxis:

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

Az [name]opcionális, ezért ezek anonim funkciók lehetnek. Használhatunk nyílfüggvényeket is, így:

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

A JavaScript-funkciók kifejezései nincsenek feloldva.

Ezért nem használhatja a függvénykifejezéseket, mielőtt meghatározná azokat.

Példa:

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

Csak ezt kell szem előtt tartani a függvények emelési szempontból történő létrehozásakor.

Most néhány interjú kérdésre!

Interjúkérdések emelése

Az emelés és a helytelen viselkedés az interjúk során kiemelt téma. Az előző cikkem és a mostani ismeretek felhasználásával áttekinthetjük a témával kapcsolatos kérdéseket. Ennek ellenére nézzünk meg néhány gyakori kérdést.

1. kérdés

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

Kimenet: 1, mi a ?! ?

Ez azért van, mert a function a() {}nyilatkozat most létrehozott egy lokálist a, amelynek funkcionális / helyi hatóköre van. Ezt az újdonságot aa b()deklarációval és a definícióval a záró funkciójának tetejére emelik . Ez történik a színfalak mögött:

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

Ezért az utasítás a = 10;már nem változtatja meg a globális értékét, aamely továbbra is 1, hanem inkább a lokálist váltja afüggvényről egész számra 10-es értékre. Mivel a globális értéket naplózzuk a, a kimenet 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 ✌️