Funkcija podizanja i podizanja pitanja za intervju

Ovo je dio 2 za moj prethodni članak o dizanju pod nazivom "Vodič za JavaScript dizanje varijabli? s dopustiti i const ". Svakako ga pročitajte prije nego što zaronite u ovaj.

Prije sam govorio o dizanju varijabli samo zato što funkcijsko dizanje u JavaScript-u nije isto što i dizanje varijabli, već je jedinstveno na svoj način. Proširit ću na ovom načinu dizanja funkcija, zajedno s nekim uobičajenim i nezgodnim pitanjima o dizanju (varijabla i funkcija) s kojima će se gotovo sigurno susresti svatko tko daje JavaScript intervjue.

Nadamo se da ćete nakon završetka ova dva dijela biti spremni za precrtavanje podizanja s vašeg popisa za pripremu za JavaScript!

Krenimo na to.

Podizanje funkcije

Postoje 2 načina za stvaranje funkcija u JavaScript-u, kroz izjavu o funkciji i kroz izražavanje funkcije . Pogledajmo što su to i kako dizanje utječe na njih.

Izjava o funkciji

Funkcija izjava definira funkciju s navedenim parametrima.

Sintaksa:

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

U JavaScript-u deklaracije funkcija podižu definicije funkcija.

Stoga se ove funkcije mogu koristiti prije nego što budu deklarirane.

Primjer:

hoisted() // output: "Hoisted"

function hoisted() { console.log('Hoisted')}

Iza kulisa, ovako kako JavaScript interpreter gleda na gornji kod:

// Hoisted codefunction hoisted() { console.log('Hoisted')}

// Rest of the codehoisted() // output: "Hoisted"

Ovo je ponašanje istinito ako imate deklaracije funkcija u Globalnom opsegu ili Funkcionalnom opsegu (u osnovi Lokalni opseg u JavaScript-u).

To može biti korisno jer možete koristiti svoju logiku više razine na početku koda čineći je čitljivijom i razumljivijom.

Napomena: Nikada nemojte koristiti deklaracije funkcija unutar blokova if / else.

Izraz funkcije

functionKljučne riječi se također može koristiti za definiranje funkcije unutar izraza.

Sintaksa:

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

Nije [name]obavezno, stoga to mogu biti anonimne funkcije. Funkcije strelica možemo koristiti i na sljedeći način:

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

Izrazi funkcija u JavaScript-u nisu podignuti.

Stoga ne možete koristiti funkcionalne izraze prije nego što ih definirate.

Primjer:

notHoisted() // TypeError: notHoisted is not a function

const notHoisted = function() { console.log('foo')}

To je sve što treba imati na umu za stvaranje funkcija s gledišta podizanja.

A sad neka pitanja iz intervjua!

Pitanja za intervju za podizanje

Dizanje i nestalno ponašanje vruća su tema tijekom razgovora. Koristeći znanje iz mog prethodnog i ovog članka, možete proći kroz sva pitanja na tu temu. Uz to, pogledajmo neka uobičajena pitanja.

Pitanje 1

var a = 1;

function b() { a = 10; return;

 function a() {}}

b();

console.log(a);

Izlaz: 1, što ?! ?

To je zato što je function a() {}izjava sada stvorila lokalni akoji ima funkcionalni / lokalni opseg. Ovaj novi asada se podiže na vrh svoje funkcije zatvaranja b()sa svojom deklaracijom i definicijom. Evo što se događa iza kulisa:

var a = 1;

function b() { // Hoisted function a() {}

 a = 10; return;}

b();

console.log(a)

Stoga izjava a = 10;više ne mijenja vrijednost globalne akoja ostaje 1, već mijenja lokalnu aiz funkcije u cjelobrojnu vrijednost 10. Budući da bilježimo globalnu a, izlaz je 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 ✌️