تعلم جافا سكريبت 2023 #067_Global Scope & Local

قبل أيكما سكريبت ES6 (2015), كانت جافا سكريبت لديها فقط “Global Scope and Function Scope“. قدمت ES6 كلمتان جديدتان على جافا سكريبت هما let and const, هاتان الكلمتان قدمتا لـ جافا سكريبت Block Scope.

function scope vs block scope JavaScript

نطاق القالب block scope js

المتغيرات المعلنة داخل البلوك, لا يمكن الوصول إليها من خارج البلوك:

“Variables declared inside a { } block cannot be accessed from outside the block:”

مثال

{
  let x = 2;
}
// x can NOT be used here
****************************************

Variables declared with the var keyword can NOT have block scope.

المتغيرات المعلنة بـ var, لا يمكن استخدامها كا نطاق للقالب “JavaScript Block Scope“

وأيضا المتغيرات المعلنة بـ var داخل البلوك, يمكن استخدامها من خارج البلوك.

مثال

{
  var x = 2;
}
// x CAN be used here
*******************************************

النطاق المحلي local scope javascript

ومعناه هنا أن المتغير المعلن داخل البلوك لا يمكن استخدامه من خارج البلوك

Variables declared within a JavaScript function, become LOCAL to the function.

Function Scope

function myFunction() {
  var carName = "Volvo"; // Function Scope
}

function myFunction() {
  let carName = "Volvo"; // Function Scope
}

function myFunction() {
  const carName = "Volvo"; // Function Scope
}

سوف نقوم في المثال التالي بعمل Function Scope لا يمكن استخدامه من خارج البلوك

مثال

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

Local variables have Function Scope:

في المثال السابق :

متغير محلي داخل” Function Scope “, ولا يمكن الوصول اليه إلا من داخل بلوك الـ Function

المتغير المعلن عنه خارج البلوك, يصبح متغير عام, ويمكن استخدامه من أي مكان.

مثال

let carName = "Volvo";

// code here can use carName

function myFunction() {

// code here can also use carName

}

****************************************

في المثال السابق :

1- قمنا بالإعلان عن متغير عام “carName “, ولذلك يمكن استخدامه من أي مكان.

2- قمنا بعمل Function, وبداخله يمكنك استخدام المتغير العام أيضاً “carName “.

مثال أخر على استخدام المتغير العام :

Using Globle variables 
var a = 1; 
let b = 2; 
function showText (){   // Using local variables     
console.log(`Function - From Globle ${a}`);   // Function - From Globle 1
console.log(`Function - From Globle ${b}`);   // Function - From Globle 2
} 
console.log(`From Globle ${a}`);   // Function - From Globle 1
console.log(`From Globle ${b}`);   // Function - From Globle 2
showText(); 
****************************************

في المثال السابق:

1- هناك متغيرات عامة (a = 1, b = 2) يمكن استخدامهم من أي مكان.

2- هناك Function لا يوجد بها متغيرات, ونريد الطباعة بنفس قيم المتغيرات العامة. لذلك تم استخدمها.

مثال على استخدام النطاق المحلى داخل Function

Using Globle variables 
var a = 1; 
let b = 2; 
function showText (){   // Using local variables   
   var a = 10;   
   let b = 20;   
console.log(`Function - From local ${a}`);   
console.log(`Function - From local ${b}`); 
} 
console.log(`From Globle ${a}`); 
console.log(`From Globle ${b}`); 
showText(); 
****************************************

في المثال السابق :

استخدمنا متغيرات داخل الـ Function Block, لها نفس أسم المتغير العام, ومع ذلك أخد الـFunction المتغير المحلي (Local Scope) بقيم (a = 10, b = 20) لأنه موجود ولا يحتاج غيره.
في نفس الوقت فأن الكود الخارجي استخدم المتغيرات العامة (Global Scope) بقيم (a = 1, b = 2) .

المتغيرات العامة لها نطاق عام, كل (Scripts and Functions) في صفحة الويب لها وصول لهذه المتغيرات.

المتغيرات في الجافا سكريبت

في جاقا سكريبت تعتبر (objects and functions) هم أيضاً متغيرات.

يحدد النطاق إمكانية الوصول إلي المتغيرات والكائنات والوظائف من أجزاء مختلفة من الكود.

****************************************

المتغيرات العامة التلقائية Automatically Global

ّإذا قمت بربط قيمة ب متغير لم تقم بالأعلام عنة, فأنه يصبح تلقائياً متغير عام (Global Scope).

This code example will declare a global variable carName, even if the value is assigned inside a function.

في المثال التالي:

في النطاق العام سوف نقوم باستخدام متغير داخل Function لم نقم بالإعلان عنه, وسوف يتم التعامل معه على أنه متغير عام.

myFunction();

// code here can use carName

function myFunction() {

  carName = "Volvo";

}