Fungsi Pertanyaan Wawancara Mengangkat & Mengangkat

Ini adalah bagian 2 untuk artikel saya sebelumnya tentang Hoisting yang berjudul “Panduan untuk mengangkat variabel JavaScript? dengan let dan const ”. Jadi pastikan Anda membacanya sebelum menyelami yang satu ini.

Sebelumnya saya berbicara tentang pengangkatan variabel hanya karena pengangkatan fungsi di JavaScript tidak sama dengan pengangkatan variabel, ia unik dengan caranya sendiri. Saya akan memperluas fungsi mengangkat dalam yang satu ini bersama dengan beberapa pertanyaan wawancara umum dan rumit tentang mengangkat (variabel dan fungsi) yang siapa pun yang memberikan wawancara JavaScript hampir pasti akan bertemu.

Mudah-mudahan, setelah menyelesaikan 2 bagian ini, Anda siap untuk mencoret Hoisting dari daftar periksa persiapan JavaScript Anda!

Mari kita mulai.

Fungsi Mengangkat

Ada 2 cara untuk membuat fungsi di JavaScript, melalui Deklarasi Fungsi dan melalui Ekspresi Fungsi . Mari kita lihat apa saja ini dan bagaimana pengangkatan memengaruhi mereka.

Deklarasi Fungsi

The deklarasi fungsi mendefinisikan fungsi dengan parameter yang ditentukan.

Sintaksis:

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

Dalam JavaScript, deklarasi fungsi mengangkat definisi fungsi.

Oleh karena itu, fungsi-fungsi ini dapat digunakan sebelum dideklarasikan.

Contoh:

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

Di balik layar, beginilah tampilan penerjemah JavaScript pada kode di atas:

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

Perilaku ini benar jika Anda memiliki deklarasi fungsi di Cakupan Global atau Cakupan Fungsional (pada dasarnya Cakupan Lokal di JavaScript).

Ini dapat membantu karena Anda dapat menggunakan logika tingkat yang lebih tinggi di awal kode sehingga lebih mudah dibaca dan dipahami.

Catatan: Jangan pernah menggunakan deklarasi fungsi di dalam blok if / else.

Ekspresi Fungsi

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

Sintaksis:

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

Ini [name]opsional, oleh karena itu ini bisa menjadi fungsi anonim. Kita bisa menggunakan fungsi panah juga seperti ini:

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

Ekspresi fungsi dalam JavaScript tidak diangkat.

Oleh karena itu, Anda tidak dapat menggunakan ekspresi fungsi sebelum menentukannya.

Contoh:

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

Ini semua yang harus diingat untuk membuat fungsi dari sudut pandang pengangkat.

Sekarang ke beberapa pertanyaan wawancara!

Mengangkat Pertanyaan Wawancara

Mengangkat dan tingkah lakunya yang tidak menentu adalah topik hangat selama wawancara. Menggunakan pengetahuan dari artikel saya sebelumnya dan yang satu ini, seseorang dapat menjawab pertanyaan apa pun tentang topik tersebut. Karena itu, mari kita lihat beberapa pertanyaan umum.

pertanyaan 1

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

Output: 1, Apa ?! ?

Ini karena function a() {}pernyataan tersebut sekarang telah membuat lokal ayang memiliki cakupan fungsional / lokal. Yang baru ini asekarang diangkat ke atas dari fungsi penutupnya b()dengan deklarasi dan definisinya. Inilah yang terjadi di balik layar:

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

Oleh karena itu, pernyataan a = 10;tersebut tidak lagi mengubah nilai global ayang tetap menjadi 1, melainkan mengubah lokal adari fungsi menjadi nilai integer 10. Karena kita melakukan logging 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 ✌️