رفع أسئلة المقابلة الشخصية

هذا جزء 2 من مقالتي السابقة حول الرفع بعنوان "دليل لرفع متغير JavaScript؟ مع Let and const ". لذا تأكد من قراءة ذلك قبل الغوص في هذا.

لقد تحدثت سابقًا عن الرفع المتغير فقط لأن رفع الوظيفة في JavaScript يختلف عن الرفع المتغير ، فهو فريد بطريقته الخاصة. سأقوم بتوسيع نطاق رفع الوظيفة في هذا السؤال جنبًا إلى جنب مع بعض أسئلة المقابلة الشائعة والصعبة حول الرفع (المتغير والوظيفة) والتي من المؤكد تقريبًا أن يواجهها أي شخص يجري مقابلات JavaScript.

نأمل ، بعد الانتهاء من هذين الجزأين ، أن تكون جاهزًا لشطب Hoisting من قائمة التحقق من إعداد JavaScript!

دعنا نذهب اليها.

وظيفة الرفع

هناك طريقتان لإنشاء وظائف في 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;لم يعد البيان يغير قيمة global aالتي تظل 1 ، بل تقوم بتغيير المحلي aمن دالة إلى قيمة عدد صحيح من 10. نظرًا لأننا نسجل العام a، يكون الناتج 1.

لو function a() {}لم يكن البيان موجودًا ، لكان الناتج 10.

السؤال 2

function foo(){ function bar() { return 3; } return bar(); function bar() { return 8; }}alert(foo());

الإخراج: 8

كلتا bar()الوظيفتين عبارة عن إعلانات وظيفية ، وبالتالي سيتم رفعها إلى أعلى foo()النطاق المحلي. ومع ذلك ، bar()سيتم رفع 8 العائدين بعد عودة الشخص 3. لذلك ، سيتم تنفيذ 8 العائد.

خلف الكواليس:

function foo(){ //Hoisted before function bar() { return 3; } // Hoisted after function bar() { return 8; }
 return bar(); }alert(foo());

السؤال 3

function parent() { var hoisted = "I'm a variable"; function hoisted() { return "I'm a function"; } return hoisted(); }console.log(parent());

الإخراج: "TypeError: الرفع ليس دالة"

هذا صعب. وظيفتها مقابل المتغير! دعونا نكسرها.

نحن نعلم أنه عندما يتعلق الأمر بالرفع المتغير ، يتم رفع الإعلان فقط (بقيمة "غير محدد") ، وليس التعريف!

في حالة إعلانات الوظائف ، يتم رفع التعريفات أيضًا!

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 بعض الميزات الوظيفية الجديدة الرائعة التي تجعل البرمجة في JavaScript أكثر مرونة. دعونا نتحدث عن ... medium.freecodecamp.org

سلام ✌️