Scope In JavaScript

🧠 ما هو الـ Scope؟

Scope هو النطاق أو المدى الذي تكون فيه المتغيرات والدوال معروفة ومسموح باستخدامها.
بمعنى آخر: هو المكان الذي “تعيش” فيه المتغيرات في الكود.

✅ أولًا: Global Scope (النطاق العام)

📌 التعريف:

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

📌 المثال:
let name = "أحمد";

function sayHello() {
  console.log("مرحبًا " + name);
}

sayHello(); // مرحبًا أحمد
JavaScript

✅ المتغير name معروف داخل كل مكان لأنه في النطاق العام.

✅ ثانيًا: Local Scope (النطاق المحلي)

📌 التعريف:

أي متغير يتم تعريفه داخل دالة يكون مرئيًا فقط داخلها.

📌 المثال:
function greet() {
  let message = "مرحبًا بك!";
  console.log(message);
}

greet(); // مرحبًا بك!
// console.log(message); ❌ خطأ: message غير معرف هنا
JavaScript

❗️ لا يمكنك الوصول إلى message خارج الدالة.

✅ ثالثًا: Block Scope (نطاق البلوك)
📌 التعريف:

منذ ES6، المتغيرات باستخدام let و const تكون محصورة داخل الكتل if, for, switch, {}.

📌 المثال:
if (true) {
  let color = "أزرق";
  const size = "كبير";
  var shape = "دائري"; // انتبه هنا!
}

console.log(shape); // ✅ دائري (لأن var لا يحترم block scope)
// console.log(color); ❌ خطأ: color غير معرف
// console.log(size); ❌ خطأ: size غير معرف
JavaScript

❗️ var لا يلتزم بنطاق البلوك، بل بالنطاق الوظيفي فقط.

✅ مقارنة بين var, let, const من حيث النطاق:

الكلمةScopeإعادة تعريفإعادة تعيين
varFunction Scope فقطنعمنعم
letBlock Scopeلانعم
constBlock Scopeلالا
✅ رابعًا: Lexical Scope (النطاق الثابت / المعجمي)
📌 التعريف:

JavaScript تستخدم Lexical Scope، أي أن الدوال الداخلية تستطيع الوصول للمتغيرات الخارجية التي عُرّفت عند كتابتها، وليس عند تنفيذها.

📌 مثال مهم:
function outer() {
  let outerVar = "أنا في الخارج";

  function inner() {
    console.log(outerVar); // ✅ الدالة الداخلية ترى المتغير الخارجي
  }

  inner();
}

outer(); // أنا في الخارج
JavaScript

الدالة inner لديها وصول إلى outerVar لأنها كتبت داخل نفس النطاق.

🎯 لماذا Lexical Scope مهم؟
  • يسمح ببناء أطر عمل تعتمد على المفاهيم الوظيفية مثل closures.
  • يمكّنك من تنظيم الكود باستخدام دوال متداخلة.
  • يسهل فهم سلوك المتغيرات (لأن كل شيء يعتمد على مكان الكتابة، وليس وقت التشغيل).

✅ استخدامات الـ Scope عمليًا:

الاستخداممثال
تنظيم الكود ومنع التصادمباستخدام الكتل أو الدوال لإخفاء المتغيرات
بناء مكتباتتعتمد على Scope لحماية البيانات الداخلية
كتابة Closuresلتذكر القيم داخل دوال أخرى
React و JS الحديثةتعتمد بشدة على فهم Scope و Lexical Scope
✅ أفضل الممارسات:
  1. استخدم let و const بدلًا من var.
  2. لا تُعرّف متغيرات في النطاق العام بدون سبب.
  3. افهم جيدًا أين يبدأ وينتهي نطاق المتغير قبل استخدامه.
  4. اعتمد على الكتابة النظيفة لتنظيم النطاقات بشكل واضح.