شرح Execution Context & Call Stack في JavaScript

وانت بتكتب كود JavaScript… هل فكرت إزاي المتصفح بينفذه؟ إيه اللي بيحصل بالظبط لما بتستدعي Function؟ وازاي بتتحفظ البيانات؟

هنا بقا بييجي دور Execution Context و Call Stack اللي بيتحكموا في تنفيذ الكود سطر بسطر حرفيا.

📌 أولاً: Execution Context 

Execution Context هو البيئة اللي JavaScript بتنفذ فيها الكود. يعني لما بتشغل ملف JS المتصفح بيحط الكود جوه Execution Context ويبدأ ينفذه.

🔹 أنواع Execution Context:

• Global Execution Context (GEC):

  • بيتكون أوتوماتيك مع بداية تشغيل الكود.
  • المتغيرات والدوال اللي بتكون في المستوى العام (global scope) بتتحط فيه.
  • فيه this اللي في الـ Global Context بتشير لـ window في المتصفح.

• Function Execution Context (FEC):

  • بيتكون لما بتستدعي Function جديدة.
  • كل function ليها Execution Context خاص بيها منفصل عن غيرها.
  • بيتم إضافتها لـ Call Stack لحين تنفيذها بالكامل
•  

📌 ثانياً: مراحل Execution Context 

كل Execution Context بيعدي على مرحلتين رئيسيتين أثناء تنفيذ الكود:

• مرحلة Creation Phase (مرحلة الإنشاء)

  JavaScript بتجهز البيئة قبل تنفيذ الكود.. بيتم:

  • إنشاء window (في المتصفح) أو global (في Node.js).
  • تخزين المتغيرات بـ undefined (لو تم تعريفها بـ var).
  • تخزين تعريفات الدوال بالكامل في الذاكرة.

• مرحلة Execution Phase (مرحلة التنفيذ)

  • هنا بقا بيتم تشغيل الكود سطر بسطر.
  • JavaScript بتستبدل undefined بالقيم الفعلية للمتغيرات.
  • تنفيذ الـ Functions لما يتم استدعاؤها.
•  

📌 ثالثاً: Call Stack

Call Stack هو الآلية اللي JavaScript بتستخدمها لإدارة تنفيذ الدوال.

🔹 إزاي بيشتغل Call Stack؟

• أول ما يبدأ الكود JavaScript بيدخل Global Execution Context جوه الـ Stack.
•  لما تستدعي دالة بيتم إضافتها على الـ Stack
• لو الدالة استدعت دالة تانية التانية بتتحط فوقها وهكذا.
• لما تخلص أي دالةبتتشال من الـ Stack و يرجع التنفيذ للدالة اللي قبلها.
•  لما يفضى الـ Stack معناها إن الكود كله خلص.

لو الـ Call Stack امتلى بدون ما يفضى هيحصل Stack Overflow وتوقف الكود

مثال عملي يوضح Execution Context & Call Stack

خطوات تنفيذ الكود في Call Stack:

•  first() تتحط في الـ Stack → يتم تنفيذها.
• console.log(“Hello from first”) يطبع الكلام → يستمر التنفيذ.
•  second() تتحط في الـ Stack فوق first() → يتم تنفيذها.
•  console.log(“Hello from second”) يطبع الكلام → يستمر التنفيذ.
•  third() تتحط في الـ Stack فوق second() → يتم تنفيذها.
•  console.log(“Hello from third”) يطبع الكلام → يتم إزالة third() من الـ Stack.
• second() تخلص وتتزال من الـ Stack.
•  first() تخلص وتتزال من الـ Stack.
• Stack يبقى فاضي والكود يخلص

🎯 تـــاســك عــمــلــي

المطلوب:

•  اكتب كود فيه 3 دوال كل واحدة بتستدعي اللي بعدها واستخدم console.log عشان تطبع كل مرحلة.
• ضيف setTimeout جوه دالة واحدة وشوف هل بيتم تنفيذها فورًا ولا بتستنى؟
• جرب تعمل Recursion (استدعاء ذاتي للفنكشن) وشوف تأثيره على Call Stack

📢 شاركني الحلول بتاعتك في الكومنتات