برسی منطقه مرده زمانی در جاوااسکریپت

اصطلاحی عجیب به نام منطقه مرده زمانی که حتی ممکنه پس از چندین سال کار کردن با جاوااسکریپت هم اونرو نشنیده باشید و امروز در این مقاله قصد داریم تا نگاهی کامل بهش بندازیم و در قدم اول ببینیم که اصلا TDZ یا همان منطقه مرده زمانی چی هست و چه تاثیری برروی کد ما میزاره.

منطقه مرده زمانی در جاوااسکریپت چیست ؟

مرحله ای از اجرای کدها در پشت صحنه که متغیرهای ما وجود دارند، اما هنوز قابل استفاده و دسترسی ما نیستند را منطقه مرده زمانی مینامیم و در زمانیکه یک متغیر در منطقه مرده زمانی قرار داره، هر تلاشی برای دسترسی و استفاده از اون متغیر، مارو با ارور referenceError مواجه میکنه. این مفهوم و رفتار هم فقط برای متغیرهایی وجود داره که با کلمه let یا const تعریف شده باشند و این مفهوم برای متغیرهای var وجود نداره.

console.log(myWebsite); // Output: ReferenceError: Cannot access 'myWebsite' before initialization

let myWebsite = &quotwww.vaspar.io&quot

در مثال بالا، اومدیم قبل از تعریف شدن متغیر myWebsite یعنی زمانیکه این متغیر توی منطقه مرده زمانی بود ازش استفاده کردیم و در نتیجه با ارور مواجه شدیم. هدف این رفتار فقط برای متغیرهای ایجاد شده با let و const هستش و به ما اجازه دسترسی به متغیرها، قبل از تعریف شدنشون را نمیده تا برخلاف متغیرهای قدیمی var که قبل از تعریف شدن هم میتونستیم ازشون استفاده کنیم، مطمعن بشه که کدی مطمئن و تمیز مینویسیم.

منطقه مرده زمانی و متغیرهای var

این رفتار برروی همه متغیرهای جاوااسکریپتی یکسان نیست و از اونجایی که متغیرهای ایجاد شده با var در زمان اجرای کد، بصورت اسمی و ظاهری به بالای scope منتقل میشن ( hoist میشن )  این رفتار فقط برای متغیرهای ایجاد شده با let و const وجود داره و اگر یک متغیری را با کلمه var در خط 2 تعریف کنیم و بخواهیم ازش در خط 1 استفاده کنیم، با هیچ ارور و مشکلی مواجه نمیشیم و تنها اتفاقی که میوفته اینه که مقدار اون متغیر var برابر با undefined خواهد بود.

console.log(myWebsite); // Output: undefined

var myWebsite = &quotwww.vaspar.io&quot

بخاطر داشته باشید که ما از اصطلاح زمان استفاده میکنیم نه محدوده ...

دقت کنید که ما میگیم منطقه مرده زمانی، نه محدوده مرده زمانی! یعنی چی ؟ یعنی اینکه اگر شما در یک فانکشنی، از متغیری که هنوز ایجاد نشده استفاده کنید و بعد از جاییکه اون متغیر ایجاد شد ازش استفاده کنید، دیگه با ارور مواجه نمیشید و کد شما به درستی کار میکنه و خبریم از منطقه مرده زمانی نخواهد بود:

{
  // shorooe TDZ
  const func = () => console.log(letVar); // OK

  // agar inja va ghabl az tarife letVar function ra seda bezanim error migirim

  let letVar = 3; // TDZ inja tamoom mishe
  func(); // code ro dige kharej az TDZ seda zadim va hame chiz ok hastesh
}

در مثال بالا ما فانکشنی داریم با نام func و در این فانکشن داریم از متغیری به نام letVar استفاده میکنیم که این متغیر چند خط بعد تر از فانکشن ما تعریف شده و بعد از محل تعریف شدن متغیر letVar هم میاییم فانکشن func را اجرا میکنیم. در این کد هیچ مشکلی وجود نخواهد داشت چراکه ما زمانی فانکشن خودمون را اجرا کردیم که متغیر مدنظر ما تعریف و مقدار دهی شده!

چطور از این رفتار دوری کنیم ؟

برای اینکه توی کدهامون با منطقه مرده زمانی یا TDZ روبرو نشیم، یکسری کارهای ساده را باید انجام داد:

• همیشه متغیرهای مدنظر خودرا، قبل از محلی که ازش استفاده کردید، تعریف کنید.
• scope ها در جاوااسکریپت را بشناسید، متغیرهای ایجاد شده با let و const اصطلاحا block scope هستند و ازشون فقط در محدوده ای که تعریف شدن میشه استفاده کرد ( مثلا فقط در فانکشنی که تعریفشون کردیم قابل دسترسین )
• از متغیرهای var دوری کنید و یا با احتیاط ازشون استفاده کنید. باوجود اینکه متغیرهای var به بالای scope منتقل میشن و منطقه مرده زمانی براشون وجود نداره، بازهم سعی کنید ازشون استفاده نکنید. حتما دلیلی داشته که با گذشت زمان متغیرهای let و const به جاوااسکریپت اضافه شدن!
• از ابزارهایی مثل ESLint استفاده کنید، این ابزارها مطمئن میشن تا شما کدی تمیز، مطمئن و طبق آخرین اصول های موجود بنویسید.

سخن پایانی ...

متوجه شدیم که منطقه مرده زمانی، به مرحله ای از اجرای کدها در پشت صحنه گفته میشه که در اون مرحله متغیرهای ما وجود دارند، اما غیر قابل دسترس اند و اگر بخواهیم قبل از جاییکه متغیر ما تعریف شده ازش استفاده کنیم، با ارور referenceError مواجه میشیم.

همچنین فهمیدیم که بدلیل مکانیزم hoisting در جاوااسکریپت، منطقه مرده زمانی فقط برای متغیرهای let و const وجود داره و این قضیه برای متغیرهای var صدق نمیکنه.

نکته مهمیم که بهش اشاره کردیم، این بود که ما داریم به زمان اشاره میکنیم نه مکان یا محدوده، بنابر این اگر در یک فانکشنی از متغیری که هنوز تعریف نشده استفاده کنیم و بعد از جایی که اون متغیر تعریف شده فانکشنمون را اجرا کنیم، دیگه به منطقه مرده زمانی بر نخواهیم خورد و کد ما بدون هیچ اروری کار خواهد کرد.

امیدوارم این مقاله براتون کاربردی و مفید بوده باشه و پیشنهاد میکنم نگاهی هم به دوره آموزش Frontend ما بندازید، تو این دوره سعی کردیم در مسیری متفاوت و مدرن فرانت اند را به شما آموزش بدیم.

منبع: https://vaspar.io/blog/temporal-dead-zone-in-javascript