Функція підняття та піднімання запитань інтерв'ю

Це частина 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 ✌️