منطقه مرده زمانی در جاوااسکریپت، اصطلاحی عجیب که حتی ممکنه پس از چندین سال کار کردن با جاوااسکریپت هم اونرو نشنیده باشید و امروز در این مقاله قصد داریم تا نگاهی کامل بهش بندازیم و در قدم اول ببینیم که اصلا TDZ یا همان منطقه مرده زمانی چی هست و چه تاثیری برروی کد ما میزاره.
منطقه مرده زمانی در جاوااسکریپت چیست ؟
مرحله ای از اجرای کدها در پشت صحنه که متغیرهای ما وجود دارند، اما هنوز قابل استفاده و دسترسی ما نیستند را منطقه مرده زمانی مینامیم و در زمانیکه یک متغیر در منطقه مرده زمانی قرار داره، هر تلاشی برای دسترسی و استفاده از اون متغیر، مارو با ارور referenceError
مواجه میکنه. این مفهوم و رفتار هم فقط برای متغیرهایی وجود داره که با کلمه let
یا const
تعریف شده باشند و این مفهوم برای متغیرهای var
وجود نداره.
console.log(myWebsite); // Output: ReferenceError: Cannot access 'myWebsite' before initialization
let myWebsite = "www.vaspar.io";
در مثال بالا، اومدیم قبل از تعریف شدن متغیر myWebsite
یعنی زمانیکه این متغیر توی منطقه مرده زمانی بود ازش استفاده کردیم و در نتیجه با ارور مواجه شدیم. هدف این رفتار فقط برای متغیرهای ایجاد شده با let
و const
هستش و به ما اجازه دسترسی به متغیرها، قبل از تعریف شدنشون را نمیده تا برخلاف متغیرهای قدیمی var
که قبل از تعریف شدن هم میتونستیم ازشون استفاده کنیم، مطمعن بشه که کدی مطمئن و تمیز مینویسیم.
منطقه مرده زمانی و متغیرهای var
این رفتار برروی همه متغیرهای جاوااسکریپتی یکسان نیست و از اونجایی که متغیرهای ایجاد شده با var
در زمان اجرای کد، بصورت اسمی و ظاهری به بالای scope منتقل میشن ( hoist میشن ) این رفتار فقط برای متغیرهای ایجاد شده با let
و const
وجود داره و اگر یک متغیری را با کلمه var
در خط 2 تعریف کنیم و بخواهیم ازش در خط 1 استفاده کنیم، با هیچ ارور و مشکلی مواجه نمیشیم و تنها اتفاقی که میوفته اینه که مقدار اون متغیر var
برابر با undefined
خواهد بود.
console.log(myWebsite); // Output: undefined
var myWebsite = "www.vaspar.io";
بخاطر داشته باشید که ما از اصطلاح زمان استفاده میکنیم نه محدوده ...
دقت کنید که ما میگیم منطقه مرده زمانی، نه محدوده مرده زمانی! یعنی چی ؟ یعنی اینکه اگر شما در یک فانکشنی، از متغیری که هنوز ایجاد نشده استفاده کنید و بعد از جاییکه اون متغیر ایجاد شد ازش استفاده کنید، دیگه با ارور مواجه نمیشید و کد شما به درستی کار میکنه و خبریم از منطقه مرده زمانی نخواهد بود:
{
// 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 ما بندازید، تو این دوره سعی کردیم در مسیری متفاوت و مدرن فرانت اند را به شما آموزش بدیم.