بررسی scope در JavaScript

از جمله مباحث گیج کننده ای که هنگام مصاحبه ها با اون مواجه میشیم میتونه scope ها باشه.

درک بهتر scope ها میتون از باگ های خاموش جلوگیری کنه .

پس بدونه فوت وقت بریم سر اصل داستان

قبل از هرچیز خوبه بدونیم که scope چیه و به چه درد میخوره ؟ scope خیلی ساده بخوام بگم، یک محدوده از برنامه هست که داخل اون متغییر قابل دسترسه

نکته: scope در کل قراره راجب ( متغییر ها ، فانکشن ها ، آبجکت ها ) به ما بگه که اینجا میتونی از فلان ( متغییر فانکشن یا آبجکت ) استفاده کنی یا نه !

سه نوع scopeداریم :

1. Global scope

2. Function scope ( Local scope )

3. Block scope

گلوبال اسکوپ Global scope

به بیرونی ترین لایه برنامه ( خارج از function scope و block scope ) میگن global scope

// Global Scope
const name = &quotmilad&quot

function func() {
  alert(name); // milad
}

func();

متغییر های گلوبال در سرتاسر برنامه قابل دسترسی و استفاده هستند

const name = &quotmilad&quot
//name is available

function func() {
  //name is available
}
//name is available

متغییرهای Const, Let, Var در global scope یک جور رفتار میکنند. یعنی از لحاظ در دسترس بودن متغیر ما چه var باشه چه let چه const همه یک رفتار رو از خودشون نشون میدن ( حالا جلوتر متوجه میشیم. قول میدم :)

فانکشن اسکوپ : Function scope یا Local scope

همونطور که از اسمش پیداس به اسکوپ فانکشن ها گفته میشه

function func(){
  //Local scope
}

متغییر های لوکال فقط و فقط داخل فانکشن دردسترس هستند

داخل اسکوپ فرزند میتونیم به متغییرهای اسکوپ پدر دسترسی داشته باشیم ولی برعکسش این قضیه با ارور مواجع میشه

var x = 1
// y is not available :   error 

function func() {
  // x is available
 var y = 2
}
// y is not available :   error 

متغییرهای Const, Let, Var در function scope یک جور رفتار میکنند. یعنی از لحاظ در دسترس بودن متغیر ما چه var باشه چه let چه const همه یک رفتار رو از خودشون نشون میدن ( جلوتر متوجه میشیم )

بلاک اسکوپ Block scope

بلاک به محدوده داخل {...} گفته میشه مثل: {...}()if{...}, while(){...}, for

خوب قول داده بودم که جلوتر متوجه میشم ! الان وقتشه

تو دو مورد قبل گفتیم که متغییرهای Const, Let, Var یک جور رفتار میکنند ولی اینجا اینطور نیست

به این عکس نگاه کنید :|

اینجا تو خط چهارم به متغییر secret ( که var هست ) دسترسی داریم و حتی مقدار اون رو میتونیم تغییر بدیم !!!!! که این موضوع خودش میتونه منجر به باگ های زیادی بشه . ( این اون تفاوته است ، خارج از بلاک اسکوپ میتونیم به متغییر var دسترسی داشته باشیم، برخلاف موارد قبل )

خوشبختانه در ES6، جاوااسکریپت جهت جلوگیری از این اتفاق Const , Let رو آورد که جلوی این داستان رو بگیره ( دمش گرم )

اینجا var بیرون از scope هم قابل کنترله برخلاف حالت function scope

اگه این چیزای که گفتم رو بخوام به صورت نکات کنکوری دربیارم اینطوری میشه :

نکته: داخل block scope متغییر های const , let , var دردسترس هستند
نکته: بیرون از block scope متغییر های const , let در دسترس نیستند
نکته: بیرون از block scope متغییر های var در دسترس هستند

جهت واضح شدن نکته بالا کد زیر رو ببینیم :

if( true ) {
// our block scope

  const x = 1;
  let y = 2;
  var z = 3;

  // x, y, z are available

}

// x, y are not available
// z is available !!!

نکته : در block scope ها، متغییر های var میتونند هم به متغییر های scope پدر و هم scope فرزند دسترسی داشته باشند ولی const , let فقط میتونند به متغییر های scope پدر دسترسی داشته باشند

جهت وضوح کار کد زیر رو ببینید:

while(true ) {
// our block scope
const a =  1;
let b = 2 ;
var c = 3;

// x, y are not available    // z is available !!!

if( true ) {  
   // our block scope
   const x =  1;   
   let y =  2;   
   var z =  3;    

   // x, y, z are available    // a, b, c are available  too
  }  
}

مفهومی به اسم Automatically global

اینم بدونیم بد نیست !

اگر به متغییری که تعریف نشده ( const, let, var نداره) رو مقدار دهی کنیم

اون متغییر به صورت global درنظرگرفته میشه

نکته : متغییری که تعریف نشده ( const, let, var نداره) حتی اگر داخل function هم باشه باز به صورت global درنظر گرفته میشه . مثل کد زیر :

myFunction();

// code here can use carName

function myFunction() {
  carName = &quotPride !&quot
}

نکته : زمانی که در حالت strict mode باشیم متغییرهایی که تعریف نشده اند ( const, let, var نداره) به صورت global درنظر گرفته نمیشه

و نکته اخرهم اینکه بدون حساب و کتاب، متغیر ها Global ایجاد نکنید چرا که این متغیر ها و توابع میتونند متغیر ها یا توابعِ شیء window را overwrite کنند. تنها زمانی از متغیر های سراسری استفاده کنید که کاملا نسبت به شرایط آگاهی داشته باشید

عرضی نمونده مراقب خودتون باشید

آها راستی اگه که نظری داشتید خیلی خوشحال میشم تو کامنت ها بهم بگید ?