JavaScript - الرفع (Hoisting)

JavaScript - الرفع (Hoisting)

🔸 Hoisting في JavaScript هو سلوك يتم فيه "رفع" تعريفات المتغيرات والدوال إلى أعلى نطاقها (scope) قبل تنفيذ الكود فعليًا. لكن يجب الانتباه أن قيمة المتغير لا تُرفع، فقط تعريف الاسم.

---

🔹 مثال على رفع المتغير

console.log(x); // undefined
var x = 5;

📌 المتغير x تم رفع تعريفه، لكن لم يتم تعيين القيمة 5 إلا بعد السطر الثاني.

---

🔹 كيف يفسر المترجم الكود السابق؟

var x;
console.log(x); // undefined
x = 5;

✅ هذه هي النتيجة التي يتم تنفيذها بالفعل بسبب "الرفع".

---

🔹 رفع الدوال (Function Hoisting)

greet();

function greet() {
  console.log("مرحبًا!");
}

📌 تعريف الدالة بالطريقة التقليدية يتم رفعه بالكامل، لذلك يمكن استدعاؤها قبل التعريف.

---

🔹 ماذا عن الدوال باستخدام التعبيرات؟

greet(); // ❌ TypeError: greet is not a function

var greet = function () {
  console.log("أهلاً!");
};

📌 في هذه الحالة، يتم رفع المتغير فقط وليس محتوى الدالة. لذا يكون greet معرفًا لكن بدون قيمة (undefined).

---

🔹 هل let و const يتم رفعهم؟

console.log(a); // ❌ ReferenceError
let a = 10;

📌 نعم، يتم رفعهم داخليًا لكن لا يمكن الوصول إليهم قبل السطر الفعلي للتعريف بسبب "المنطقة المؤقتة الميتة" (TDZ).

---

⚠️ نصائح

• دائمًا عرّف متغيراتك في أعلى النطاق لتتجنب الغموض الناتج عن hoisting.
• استخدم let و const بدل var لتفادي السلوك غير المتوقع.
• اعرف متى يتم رفع الدالة بالكامل، ومتى يتم رفع اسم المتغير فقط.