🧠 ما هو الـ 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 | إعادة تعريف | إعادة تعيين |
---|---|---|---|
var | Function Scope فقط | نعم | نعم |
let | Block Scope | لا | نعم |
const | Block 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 |
✅ أفضل الممارسات:
- استخدم
let
وconst
بدلًا منvar
. - لا تُعرّف متغيرات في النطاق العام بدون سبب.
- افهم جيدًا أين يبدأ وينتهي نطاق المتغير قبل استخدامه.
- اعتمد على الكتابة النظيفة لتنظيم النطاقات بشكل واضح.