Soalan Temuduga Fungsi Mengangkat & Mengangkat

Ini adalah bahagian 2 untuk artikel saya sebelumnya mengenai Hoisting yang bertajuk “Panduan untuk mengangkat variabel JavaScript? dengan let and const ”. Oleh itu, pastikan anda membacanya sebelum menyelami yang ini.

Sebelum ini saya bercakap mengenai pengangkatan pemboleh ubah hanya kerana fungsi mengangkat dalam JavaScript tidak sama dengan pengangkatan pemboleh ubah, ia unik dengan caranya sendiri. Saya akan memperluas fungsi pengangkatan dalam yang satu ini bersama dengan beberapa soalan wawancara yang biasa dan rumit mengenai pengangkatan (pemboleh ubah dan fungsi) yang hampir pasti akan dihadapi oleh sesiapa sahaja yang memberikan wawancara JavaScript.

Mudah-mudahan, setelah menyelesaikan 2 bahagian ini, anda akan bersedia untuk melenyapkan Hoisting dari senarai semak persediaan JavaScript anda!

Mari sampai ke sana.

Fungsi Mengangkat

Ada 2 cara untuk membuat fungsi dalam JavaScript, melalui Function Declaration dan melalui Function Expression . Mari lihat apakah ini dan bagaimana pengaruhnya mempengaruhi mereka.

Deklarasi Fungsi

The pengisytiharan fungsi mentakrifkan fungsi dengan parameter yang dinyatakan.

Sintaks:

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

Dalam JavaScript, deklarasi fungsi mengangkat definisi fungsi.

Oleh itu, fungsi ini dapat digunakan sebelum diisytiharkan.

Contoh:

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

Di sebalik tabir, ini adalah bagaimana jurubahasa JavaScript melihat kod di atas:

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

Tingkah laku ini berlaku jika anda mempunyai deklarasi fungsi dalam Skop Global atau Skop Fungsional (pada asasnya Skop Lokal dalam JavaScript).

Ini dapat membantu kerana anda boleh menggunakan logik tahap tinggi anda pada awal kod menjadikannya lebih mudah dibaca dan difahami.

Catatan: Jangan sekali-kali menggunakan pernyataan fungsi di dalam jika / yang lain menghalang.

Ekspresi Fungsi

Kata functionkunci juga dapat digunakan untuk menentukan fungsi di dalam ekspresi.

Sintaks:

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

Ini [name]adalah pilihan, oleh itu ini boleh menjadi fungsi tanpa nama. Kita boleh menggunakan fungsi anak panah seperti:

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

Ungkapan fungsi dalam JavaScript tidak disokong.

Oleh itu, anda tidak boleh menggunakan ungkapan fungsi sebelum menentukannya.

Contoh:

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

Ini hanya perlu diingat untuk membuat fungsi dari sudut pengangkatan.

Sekarang ke beberapa soalan temu ramah!

Soalan Temuduga Mengangkat

Mengangkat dan tingkah laku yang tidak menentu adalah topik hangat semasa temu ramah. Dengan menggunakan pengetahuan dari artikel saya sebelumnya dan yang satu ini, seseorang dapat melayari sebarang pertanyaan mengenai topik ini. Dengan itu, mari kita lihat beberapa soalan biasa.

soalan 1

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

Keluaran: 1, Apa ?! ?

Ini kerana function a() {}pernyataan itu sekarang telah membuat lokal ayang mempunyai ruang lingkup fungsional / tempatan. Yang baru ini akini dilambung ke bahagian atas fungsi penutupnya b()dengan perisytiharan dan definisi. Inilah yang berlaku di sebalik tabir:

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

Oleh itu, pernyataan a = 10;itu tidak lagi mengubah nilai global ayang tetap menjadi 1, melainkan mengubah lokal adari fungsi menjadi nilai integer 10. Oleh kerana kita mencatat log global a, outputnya adalah 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 ✌️