Функция за повдигане и повдигане на интервюта

Това е част 2 за предишната ми статия за повдигане, озаглавена „Ръководство за повдигане на променлива на JavaScript? с нека и const ”. Така че не забравяйте да прочетете това, преди да се потопите в този.

Преди говорих за повдигане на променливи само защото функцията за повдигане в JavaScript не е същото като променливата, тя е уникална по свой начин. Ще разширя функцията за повдигане в тази, заедно с някои често срещани и сложни въпроси за интервюта за повдигане (променлива и функция), които всеки, който дава интервюта с JavaScript, е почти сигурен да срещне.

Надяваме се, след като завършите тези 2 части, ще бъдете готови да зачеркнете повдигането от вашия контролен списък за подготовка на JavaScript!

Нека да стигнем до него.

Функция повдигане

Има 2 начина за създаване на функции в JavaScript, чрез декларация за функции и чрез израз на функции . Нека да видим какви са това и как повдигането им влияе.

Декларация за функцията

Декларацията за функция дефинира функция с посочените параметри.

Синтаксис:

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

В JavaScript декларациите за функции повдигат дефинициите на функции.

Следователно тези функции могат да се използват преди да бъдат декларирани.

Пример:

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

Зад кулисите ето как JavaScript интерпретаторът гледа на горния код:

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

Това поведение е вярно, ако имате декларации за функции в глобалния обхват или функционалния обхват (основно Локален обхват в JavaScript).

Това може да бъде полезно, защото можете да използвате логиката си на по-високо ниво в началото на кода, което го прави по-четлив и разбираем.

Забележка: Никога не използвайте декларации за функции вътре в if / else блокове.

Израз на функцията

В functionдума може да се използва за определяне на функция в израз.

Синтаксис:

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

Това [name]е по избор, поради което това могат да бъдат анонимни функции. Можем да използваме и функции със стрелки както по следния начин:

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

Изрази на функции в JavaScript не са повдигнати.

Следователно не можете да използвате функционални изрази, преди да ги дефинирате.

Пример:

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

Това е всичко, което трябва да се има предвид при създаването на функции от повдигаща гледна точка.

Сега на няколко въпроса за интервю!

Въпроси за интервю за повдигане

Повдигането и непостоянното му поведение са гореща тема по време на интервюта. Използвайки знанията от предишната ми статия и тази, човек може да премине през всякакви въпроси по темата. С това казано, нека разгледаме някои често срещани въпроси.

Въпрос 1

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

Изход: 1, какво ?! ?

Това е така, защото function a() {}изявлението вече е създало локал, aкойто има функционален / локален обхват. Това ново aсе издига до върха на затварящата си функция b()с декларация и дефиниция. Това се случва зад кулисите:

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

Следователно изявлението a = 10;вече не променя стойността на глобалното, aкоето остава 1, а по-скоро променя локалното aот функция на цяло число 10. Тъй като регистрираме глобалното a, изходът е 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 ✌️