هل JavaScript مفسرة ولا مترجمة؟ شرح مبسط!!

JavaScript: مفسرة (Interpreted) ولا مترجمة (Compiled)؟
زمان كان الناس بتقول إن JavaScript لغة interpreted - يعني بتتنفذ سطر سطر. بس مع تطور محركات الجافاسكربت الحديثة بقيت حاجة تانية: دلوقتي معظم المحركات بتستخدم JIT (Just-In-Time) Compilation.
يعني بدل ما تفسر الكود سطر سطر، المحرك بيحلل الكود وفي نفس وقت التشغيل بيحوّله لـ machine code (أصفار وواحدات) وبكده الأداء بيتحسن جامد .

ايه هو الـ JIT Compilation ببساطة؟​

JIT معناه إن المحرك ما بيعملش ترجمة ثابتة قبل التشغيل ولا تفسير كامل أثناء التشغيل، لكنه بيخلط بينهم: يبدأ يفسر أو يعمل تمثيل داخلي للكود، وبعد كده يحوّل الأجزاء اللي بتتكرر أو المهمة لآلة بسرعة (compile on the fly). النتيجة: سرعة أفضل مع مرونة كبيرة في التعامل مع الديناميكية بتاعة JavaScript.

---

فين الكود بيتنفذ؟ (Environment & Engines)​

الجافاسكربت محتاجة بيئة تشغيل علشان الكود يشتغل. أشهر البيئات دي:

• المتصفح (Browser) - فيه Engine مخصوص لكل متصفح.
• Node.js - بيشغل JS على السيرفر، وعادة بيستخدم V8 (محرك Chrome).

أمثلة لمحركات JS:

• Chrome → V8 (الأشهر)
• Firefox → SpiderMonkey
• Safari → JavaScriptCore

كل محرك ليه تصميمه وتقنيات التحسين الخاصة بيه، لكن الفكرة العامة واحدة: تحويل الكود لتمثيل داخلي وبعدين تنفيذه بكفاءة.

---

مراحل تنفيذ الكود في المحرك (Parsing → Compilation → Execution)​

العملية بتتقسم عادة لثلاث خطوات رئيسية:

1. Parsing
   المحرك بيقرأ الكود النصي ويحوّله لـ AST (Abstract Syntax Tree) - شجرة بتوصف تركيب الكود. في المرحلة دي بتتعرف الأخطاء النحوية (Syntax Errors).
2. Compilation / Optimization
   بناءً على الـ AST، المحرك ممكن يولّد bytecode أو يجمّع كود (compile) للأجزاء اللي مهمة، وبعدين يطبق تحسينات زي inline caching أو hidden classes.
3. Execution
   الكود المُحول بيتشغّل على الـ CPU، مع مراقبة الأداء وتحديث التحسينات لو اتكرر الكود كتير.

---

المكونات الأساسية في المحرك: Heap و Call Stack​

Heap​

دي منطقة في الذاكرة بتتخزن فيها الـ objects بشكل ديناميكي. كل لما تعمل new Object() أو تخلق array، الحاجات دي بتتحط في الـ Heap.

Call Stack​

ده مكان تنفيذ الكود - بيشتغل بطريقة LIFO (Last In, First Out). كل مرة تستدعي Function بيتحط Execution Context فوق الـ Stack، ولما تنتهي تتشال. نفس فكرة رصة أطباق - آخر طبق اتحط هو أول واحد يترجع.

---

مثال عملي بسيط يوضّح Call Stack وEvent Loop (الكود يشرح)​

الكود ده يوريك ازاي synchronous و asynchronous بيتعاملوا مع بعض:

<!-- index.html -->
<script>
console.log('Start');

function a() {
  console.log('Inside a');
}

function b() {
  a();
  setTimeout(() => console.log('Timeout callback'), 0);
  console.log('Inside b');
}

b();
console.log('End');
</script>

النتيجة المتوقعة في الـ Console:

Start
Inside a
Inside b
End
Timeout callback

التفسير: الـ setTimeout بيأجل الكولباك للـ task queue، وعلشان الـ Call Stack لازم يفضى الأول، فبعضيجي الكولباك بعد ما الـ Stack يخلص. دي فكرة Event Loop - بيراقب الـ Stack والـ Queue ويشغل اللي جاهز بعد ما الـ Stack فاضي.

---

ازاي المحركات بتحسّن الأداء؟ (JIT وOptimizations)​

محركات زي V8 بتستخدم تقنيات كتير:

• JIT Compilation: يحول الحاجات اللي بتتكرر لآلة بسرعة.
• Inline Caching: يسجّل طرق الوصول للـ properties عشان يبقى سريع بعد المرة الأولى.
• Garbage Collection: ينضّف ذاكرة الـ Heap من الأشياء المهجورة تلقائيًا.

كل ده يخلي JS تطلع أداء قريب من لغات "مترجمة" تانية في حاجات معينة.

---

نصايح عملية عشان الكود يتنفذ بكفاءة​

• قلل الوصول المتكرر للـ DOM - ده غلوة في الأداء.
• استخدم defer أو async للسكريبتات الخارجية حسب السيناريو.
• استعمل الـ DevTools (Performance tab) لتحليل البوتل نِك (bottlenecks).
• في Node.js، حاول تبقى non-blocking - يعني ما تعملش عمليات ثقيلة بتمنع الـ event loop من الشغل.
• اكتب كود واضح وبسيط - المحرك يقدر يحسّن بس لو الكود ليه نمط ثابت.

---

حاجات لازم تفتكرها للمقابلات (Interview Tips)​

لو جالك سؤال في الانترفيو عن النوعية دي، اذكر النقاط دي:

• JS تاريخيًا اتصنفت كمفسرة، لكن دلوقتي المحركات بتستخدم JIT.
• اشرح الفرق بين Parsing, Compilation, Execution.
• اشرح الـ Heap والـ Call Stack بإختصار عملي.
• ادي مثال بسيط يوضح Event Loop والـ Async behavior.
  لو اديتهم مثال كود زي اللي فوق وهتشرح الناتج، هتبقى مبهر .

خلاصة سريعة ​

• JavaScript ممكن تتصنّف كـ interpreted تاريخيًا، لكن الواقع العملي دلوقتي بيقودها ناحية JIT compilation وده بيحسّن الأداء.
• الـ Engines (V8, SpiderMonkey, JavaScriptCore) هما اللي بيحولوا الكود لتمثيل داخلي وبعدين لـ machine code.
• مهم تعرف الـ Parser, AST, Heap, Call Stack وEvent Loop، خصوصًا لو بتجهز لمقابلة أو بتحاول تحسّن أداء تطبيقك.