ما هو الـ Scope في JavaScript ؟ شرح شامل للمبتدئين مع أمثلة

🔍 فهم الـ Scope في JavaScript: دليلك الشامل للتحكم في متغيراتك

الـ Scope أو "النطاق" هو مفهوم أساسي في JavaScript يحدد مكان توفر المتغيرات والوظائف (Functions) داخل الكود الخاص بك. بمعنى آخر، هو مجموعة القواعد التي تحدد من أين يمكنك الوصول إلى متغير معين في برنامجك. فهم النطاق هو مفتاح كتابة كود نظيف، خالٍ من الأخطاء، وسهل الصيانة.

📌 لماذا نتعلم الـ Scope؟

تخيل أنك تعيش في منزل. الأغراض الموجودة في غرفة نومك (مثل وسادتك) هي خاصة بك وحدك، بينما الأغراض الموجودة في الصالة (مثل الأريكة) متاحة للجميع. الـ Scope يعمل بنفس الطريقة! فهو يمنع "تلوث" المساحات المختلفة في برنامجك ويحمي متغيراتك من التداخل غير المرغوب فيه.

فوائد فهم النطاق:

• منع conflits الأسماء: يمكنك استخدام نفس اسم المتغير في دوال مختلفة دون أن يتعارضا.
• تحسين الذاكرة: المتغيرات المحلية تُحذف من الذاكرة بعد انتهاء استخدامها.
• الأمان والتنظيم: تحجز البيانات الحساسة داخل نطاقها المحدد فقط.

🌍 النطاق العام (Global Scope)

المتغير المعلن خارج أي دالة أو كتلة (Block) يقع في النطاق العام. هذا يعني أنه يمكن الوصول إليه وتعديله من أي مكان في البرنامج، سواء من داخل الدوال أو خارجها.

مثال على النطاق العام:

// هذا المتغير في النطاق العام
let globalVariable = "I'm a global variable";

function sayHello() {
  // يمكنني الوصول إلى المتغير العام من داخل الدالة
  console.log(globalVariable); // ✅ ستطبع: "I'm a global variable"
}

sayHello();
// ويمكنني الوصول إليه من خارج الدالة أيضاً
console.log(globalVariable); // ✅ ستطبع: "أنا متغير عام"

ملاحظة: استخدام الكثير من المتغيرات العامة قد يؤدي إلى فوضى ويصعب تتبع الأخطاء، لذا يجب استخدامها بحكمة.

🏠 النطاق المحلي (Local Scope)

عندما تقوم بتعريف متغير داخل دالة أو كتلة، فإن هذا المتغير يصبح محلياً. مما يعني أنه لا يمكن الوصول إليه إلا من داخل تلك الدالة أو الكتلة نفسها.

1. نطاق الدالة (Function Scope)

المتغيرات المعرفة باستخدام var داخل دالة تكون محصورة في نطاق تلك الدالة.

مثال على نطاق الدالة مع var:

function myFunction() {
  // هذا المتغير محلي وموجود فقط داخل هذه الدالة
  var localVar = "I'm a local variable";

  console.log(localVar); // ✅ ستطبع: "I'm a local variable"
}

myFunction();

// المحاولة للوصول إلى المتغير المحلي من النطاق العام ستسبب خطأ
console.log(localVar); // ❌ ReferenceError: localVar is not defined

2. نطاق الكتلة (Block Scope)

تم تقديم let و const في ES6، وهما يتبعان قاعدة نطاق الكتلة. الكتلة (Block) هي أي مجموعة من الأكواد محصورة بين curly braces {}، مثل تلك المستخدمة مع if, for, while.

مثال على نطاق الكتلة مع let و const:

if (true) {
  // هذه متغيرات ذات نطاق كتلة
  let blockScopedLet = "I'm block scoped let";
  const blockScopedConst = "I'm block scoped const";

  console.log(blockScopedLet); // ✅ ستطبع: "I'm block scoped let"
  console.log(blockScopedConst); // ✅ ستطبع: "I'm block scoped const"
}

// المحاولة للوصول من خارج الكتلة ستسبب خطأ
console.log(blockScopedLet); // ❌ ReferenceError
console.log(blockScopedConst); // ❌ ReferenceError

🔄 الفرق بين var و let من حيث الـ Scope

هذا هو أحد أهم الفروقات بين var و let/const.

• var له نطاق دالة (Function Scope) فقط.
• let و const لهما نطاق كتلة (Block Scope).

لنرى الفرق في المثال التالي:

// مثال يوضح الفرق بين var و let داخل كتلة
if (true) {
  var usingVar = "I'm using var";
  let usingLet = "I'm using let";
}

console.log(usingVar); // ✅ ستطبع: "I'm using var" (لأن var لا يحترم نطاق الكتلة)
console.log(usingLet); // ❌ ReferenceError (لأن let محصور داخل الكتلة)

هذا يوضح لماذا يفضل استخدام let و const في الوقت الحالي، لأنهما يوفران تحكماً أدق في نطاق المتغيرات ويقللان من الأخطاء.

🧠 الاختبار العملي: هل تستطيع تحديد النطاق؟

دعنا نطبق ما تعلمناه في مثال بسيط. حاول توقع ما ستفعله الشيفرة التالية قبل النظر إلى الإجابة.

let global = "I'm global";

function testScope() {
  let local = "I'm local";
  console.log(global); // ماذا ستطبع هنا؟ ✅
  console.log(local); // ماذا ستطبع هنا؟ ✅
}

testScope();

console.log(global); // ماذا ستطبع هنا؟ ✅
console.log(local); // ماذا ستطبع هنا؟ ❌