كيف تجتاز مقابلة JavaScript: دليل للمطور

كيف تستعد لمقابلة JavaScript: دليل كامل

مقابلة JavaScript ليست امتحانًا مدرسيًا حيث تحتاج فقط إلى حفظ الإجابات. إنها محادثة يتم فيها اختبار ليس فقط معرفتك بقواعد اللغة، ولكن أيضًا قدرتك على التفكير، وفهم آليات اللغة، وحل المشكلات الحقيقية. إذا كنت تشعر أنك "تتخبط" في الإغلاقات، وتخلط بين this، وتخاف من event loop - فلا تقلق. لقد أعددنا دليلاً منظمًا سيساعدك على اجتياز مقابلة JavaScript بثقة.

لماذا يصعب التحضير لمقابلة JS؟

JavaScript هي لغة ذات روح (وأحيانًا مفاجآت). يمكن لنفس الدالة أن تتصرف بشكل مختلف اعتمادًا على السياق. لذلك، في مقابلة JavaScript، لا يُسأل فقط "ماذا سيطبع الكود" - بل يُطلب منك شرح لماذا. وهنا يفشل الكثيرون. لكننا سنعلمك كيفية اكتشاف هذه المزالق.

1. الأساسيات التي يجب أن تحفظها عن ظهر قلب

أنواع البيانات وتحويل الأنواع

لنبدأ من الأساسيات. في JavaScript هناك 7 أنواع بدائية: string، number، boolean، null، undefined، symbol، bigint - ونوع واحد معقد: object. لكن المهم هو أن typeof null يُرجع "object" - وهذا خطأ تاريخي يجب معرفته.

في مقابلة JavaScript، يحبون السؤال عن التحويل الضمني للأنواع. على سبيل المثال:

console.log([] + []);   // ""\nconsole.log([] + {});   // "[object Object]"\nconsole.log({} + []);   // 0 (في وحدة تحكم المتصفح)\n

لماذا يحدث ذلك؟ لأن عامل + يحاول تحويل المعاملات إلى أنواع بدائية عن طريق استدعاء toString() أو valueOf(). تذكر: المصفوفة الفارغة تتحول إلى سلسلة فارغة، والكائن يتحول إلى السلسلة "[object Object]".

الإغلاقات والبيئة المعجمية

هذا أحد أكثر المواضيع شيوعًا في مقابلة JavaScript. الإغلاق هو دالة "تتذكر" المتغيرات من نطاقها الخارجي حتى بعد انتهاء الدالة الخارجية من العمل.

function createCounter() {\n  let count = 0;\n  return function() {\n    count++;\n    return count;\n  };\n}\n\nconst counter = createCounter();\nconsole.log(counter()); // 1\nconsole.log(counter()); // 2

في المقابلة، قد يُطلب منك كتابة دالة مماثلة أو شرح سبب حدوث المشكلة الكلاسيكية في الحلقة مع var:

for (var i = 0; i < 5; i++) {\n  setTimeout(() => console.log(i), 1000);\n}\n// ستطبع 5, 5, 5, 5, 5

الحل هو استخدام let أو تغليفها في إغلاق. اشرح بالتأكيد أن var له نطاق دالة وليس نطاق كتلة.

2. "This" - ألم وفرحة كل مطور JS

الأسئلة حول this هي من الكلاسيكيات. القاعدة بسيطة: يتم تحديد قيمة this بناءً على كيفية استدعاء الدالة، وليس أين تم تعريفها.

\n
• في السياق العام (في المتصفح) this هو window.
\n
• في دالة كائن - الكائن نفسه.
\n
• في دالة المُنشئ - مثيل جديد.
\n
• في الدالة السهمية - this من البيئة المعجمية الخارجية.
\n

مثال للمقابلة:

const obj = {\n  name: "JS",\n  getName: function() {\n    return this.name;\n  }\n};\n\nconst fn = obj.getName;\nconsole.log(fn()); // undefined (فقدان السياق)

كيفية الإصلاح؟ استخدام bind، call، apply أو دالة سهمية.

3. Event Loop وعدم التزامن - موضوع للمحترفين

بدون فهم event loop، لن تتمكن من اجتياز مقابلة JavaScript للمستوى المتوسط. تذكر التسلسل: أولاً، يتم تنفيذ كل الكود المتزامن (المكدس