الـ Scope في JavaScript

الدرس السادس عشر: الـ Scope في JavaScript

ما هو Scope؟

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

---

أنواع الـ Scope في JavaScript

1. Global Scope

• المتغيرات أو الدوال الموجودة في الـ Global Scope تكون متاحة في جميع أنحاء الكود.
• يتم تعريفها خارج أي دالة أو كتلة.
• هذه المتغيرات تصبح جزءًا من الكائن window في المتصفحات.

مثال:

let globalVariable = "I am global";

function showGlobal() {
  console.log(globalVariable); // يمكن الوصول إليه هنا
}

showGlobal(); // الإخراج: I am global

---

2. Local Scope

• المتغيرات المعرفة داخل دالة تكون متاحة فقط داخل تلك الدالة.
• لا يمكن الوصول إلى المتغيرات المحلية من خارج الدالة.

مثال:

function showLocal() {
  let localVariable = "I am local";
  console.log(localVariable); // الإخراج: I am local
}

showLocal();
console.log(localVariable); // خطأ: localVariable غير معرّف

---

3. Function Scope

• المتغيرات المعرفة باستخدام var تكون مرئية فقط داخل الدالة التي تم تعريفها فيها، حتى لو كانت داخل كتلة (مثل if أو for).

مثال:

function functionScopeExample() {
  if (true) {
    var x = "I am function scoped";
  }
  console.log(x); // الإخراج: I am function scoped
}

functionScopeExample();

---

4. Block Scope

• المتغيرات المعرفة باستخدام let أو const تكون مرئية فقط داخل الكتلة ({}) التي تم تعريفها فيها.
• هذا يجعلها أكثر أمانًا من var.

مثال:

function blockScopeExample() {
  if (true) {
    let y = "I am block scoped";
    const z = "I am also block scoped";
    console.log(y); // الإخراج: I am block scoped
    console.log(z); // الإخراج: I am also block scoped
  }
  // console.log(y); // خطأ: y غير معرّف
  // console.log(z); // خطأ: z غير معرّف
}

blockScopeExample();

---

الفرق بين Function Scope و Block Scope

الميزة	Function Scope	Block Scope
تعريف المتغيرات	باستخدام var فقط	باستخدام let و const
نطاق الرؤية	مرئي داخل الدالة فقط	مرئي داخل الكتلة فقط
إعادة التعريف	يمكن إعادة تعريف المتغيرات	لا يمكن إعادة تعريف المتغيرات

---

Closures: الدوال المغلقة في JavaScript

ما هو Closure؟

• Closure هو وظيفة تُنشأ داخل وظيفة أخرى وتحتفظ بإمكانية الوصول إلى المتغيرات الموجودة في النطاق الخارجي حتى بعد انتهاء تنفيذ الوظيفة الخارجية.
• الـ Closure يمكن أن “يغلق” على المتغيرات الموجودة في النطاق الذي تم إنشاؤه فيه.

مثال بسيط:

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log(`Outer: ${outerVariable}, Inner: ${innerVariable}`);
  };
}

const closureFunc = outerFunction("Hello");
closureFunc("World"); // الإخراج: Outer: Hello, Inner: World

لماذا نستخدم Closures؟

1. إنشاء وظائف خاصة:
   • الـ Closures تسمح بإنشاء وظائف يمكنها “تذكر” حالة معينة.
   • مثال: function counter() { let count = 0; return function() { count++; console.log(`Count: ${count}`); }; } const increment = counter(); increment(); // الإخراج: Count: 1 increment(); // الإخراج: Count: 2
2. إخفاء البيانات (Data Encapsulation):
   • يمكن استخدام Closures لإخفاء البيانات عن النطاق الخارجي.
   • مثال: function createBankAccount() { let balance = 0; return { deposit: function(amount) { balance += amount; console.log(`Deposited: ${amount}, Balance: ${balance}`); }, withdraw: function(amount) { if (amount > balance) { console.log("Insufficient funds"); } else { balance -= amount; console.log(`Withdrawn: ${amount}, Balance: ${balance}`); } }, }; } const myAccount = createBankAccount(); myAccount.deposit(100); // الإخراج: Deposited: 100, Balance: 100 myAccount.withdraw(50); // الإخراج: Withdrawn: 50, Balance: 50

---

أفضل الممارسات عند التعامل مع الـ Scope و Closures

1. استخدام Block Scope (let و const) بدلاً من var:
   • لتجنب الأخطاء الناتجة عن تعريف المتغيرات في النطاق الخاطئ.
2. تسمية المتغيرات بوضوح:
   • لتجنب التداخل بين المتغيرات في النطاقات المختلفة.
3. تجنب التعقيد الزائد:
   • حاول أن تجعل النطاقات واضحة وبسيطة، ولا تستخدم Closures إلا إذا كان هناك حاجة فعلية.
4. اختبار Closures بدقة:
   • تأكد من أن الوظائف المغلقة تعمل كما هو متوقع وتقوم بالاحتفاظ بالحالة المطلوبة.

---

الخاتمة

الـ Scope و Closures هما جزءان أساسيان لفهم كيفية عمل JavaScript. باستخدامك لهذه الأدوات بشكل صحيح، يمكنك كتابة كود أكثر قوة وتنظيمًا، مع ضمان أن المتغيرات والدوال تُستخدم في نطاقها الصحيح وتوفر المرونة اللازمة للتعامل مع البيانات بطريقة آمنة وفعالة.