ما المقصود بالـ Scope في جافاسكريبت وما الإختلافات ما بين Global Scope و Function Scope وBlock Scope

المدى يحدد مكان تواجد وصول المتغيرات في برنامجك.

1. Global Scope:

المتغيرات في الـ Global Scope تكون متاحة في كل مكان في البرنامج، سواء داخل functions او خارجها.

يمكن الوصول إلى محتويات Global Scope من أي مكان آخر في الكود.

  var globalVar = "I'm global!";

    function exampleFunction() {
        console.log(globalVar); // result = "I'm global!"
    }

    exampleFunction();
    console.log(globalVar); // result = "I'm global!"

2. Function Scope:
   المتغيرات في الـ Function Scope تكون محدودة ب fucntion التي تم تعريفها فيها.
   يعني أن المتغير لا يمكن الوصول إليه خارج الدالة. 

  function exampleFunction() {
        var localVar = "I'm local!";
        console.log(localVar); // result = "I'm local!"
    }

    exampleFunction();
    console.log(localVar); // سيؤدي إلى خطأ، لأن المتغير ليس متاحًا هنا

3. Block Scope:

المتغيرات في الـ Block Scope تكون محدودة بالأقواس `{}` التي تحتوي عليها، كما في الـ if والـ for.

هذا النوع من المدى تم إضافته في ECMAScript 6 (ES6).

    if (true) {
        let blockVar = "I'm inside a block!";
        console.log(blockVar); // result = "I'm inside a block!" 
    }

    console.log(blockVar); // سيؤدي إلى خطأ، لأن المتغير ليس متاحًا هنا

 السكوب مهم جدا لفهم عمل جافاسكريبت، وخاصة لمبتدئين يجب فهمه جيدا لتجنب أخطاء عديدة.

الفهم الجيد للـ Block Scope مهم مع ES6.

قد يكون ذلك مبدئيًا معقدًا، ولكن مع التمارين والتطبيق، ستصبح هذه المفاهيم أكثر وضوحًا.

1-الglobal scope 

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

- يكون هناك متغيرات على مستوى البرنامج والتي يمكن الوصول إليها من أي مكان في الكود.

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

 

var globalVar = "I am global"; // في ال global scope

function exampleFunction() {
    console.log(globalVar); // يمكن الوصول إلى المتغير العالمي داخل الدالة
}

2-function scope 

-عند تعريف متغير داخل دالة، فإن هذا المتغير يكون محددًا للنطاق الذي يتم فيه تعريف الدالة.

-لا يمكن الوصول إلى المتغيرات داخل دالة من خارجها.

إذا توجد دالة بداخل الدالة تسطيع الوصول الى متغيرات الدالة الأم . وليس العكس .
 

const outerFunction =()=>{
  
  	const X= 1;
	const innerFunction =()=>{
      const y=2;
      console.log(x,y)//1,2 =>لن يحدث خطا
	}
     console.log(x,y)//ReferenceError y is not defined
  
}

3-block scope 
 

منذ ES6، تمت إضافة النطاق الكتلي بواسطة let و const، ويتعلق هذا بكتلة الكود بين أقواس الفتح {}.

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

و تمة أضافتة لتسهيل القيام بعمليات مثل الloop , for,while و غيرها 

 

if (true) {
    var x = 5; // لديهfunction scope (ES5)
    let y = 10; // block scope  (ES6)
}

console.log(x); // يمكن الوصول إلى x 
console.log(y); // سيؤدي إلى خطأ لأن y RefrenceError

الفرق بين هذه المستويات هو فقط الوصول المتاح للمتغيرات ضمن الكود الخاص بك.

اليك الفرق التفصيلي بين هذا المستويات:

• Global Scope: هو المستوى الذي تقوم فيه بتعريف متغير يستطيع التطبيق بأكمله الوصول اليه، مثل وصول التابع لهذا المتغير هنا:

  var globalVariable = "global!";
  
  function exampleFunction() {
    console.log(globalVariable);
  }

• Function scope: هو المستوى الذي تعرف فيه متغير ضمن تابع، ولايمكن الوصول اليه عدا في ذلك التابع:

function exampleFunction() {
  var functionVariable = "local!";
  console.log(functionVariable);
}

• Block Scope: هو عندما تعرف متغيرا في block، لايمكن الوصول اليه الا في هذا ال block:

if (true) {
  let blockVariable = "block-scoped!";
  console.log(blockVariable);
}

ملاحظة: ال block في لغة Javascript هو أي شيء ضمن الأقواس المتعرجة {}
ملاحظة أخرى: هذا المفهوم تم تقديمه ال ES6 باستخدام الكلمات المفتاحية let و const عوضا عن var.