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

سلام دوستان عزیز، امیدوارم حالتون خوب باشه. من امیر حسین خاطری هستم و در این پست قصد دارم با شما در مورد یکی از مفاهیم مهم و جالب در جاوا اسکریپت صحبت کنم. این مفهوم، منطقه مرده موقت یا به انگلیسی Temporal Dead Zone (TDZ) نام دارد. شاید عبارت جدیدی براتون باشه اما من قصد دارم که به زبانی ساده و با مثال‌ این مفهوم رو براتون توضیح بدم.

TDZ چیست؟

TDZ یک مفهوم در جاوا اسکریپت است که به بخشی از کد اشاره می‌کند که در آن یک متغیر تعریف شده است اما هنوز مقداردهی نشده است. خب به همین علت اگر سعی کنید به متغیر دسترسی پیدا کنید یا آن را تغییر دهید، با خطای مرجع تعریف نشده (ReferenceError) مواجه خواهید شد.

TDZ برای متغیرهایی که با Let و Const تعریف می‌شوند مربوط است، زیرا این متغیرها در زمان اجرای کد به‌صورت ارتقاء یافته (Hoisted) تعریف می‌شوند…

چرا TDZ ایجاد می‌شود؟

برای پاسخ به این سوال، باید کمی در مورد مفهوم Hoisting در جاوا اسکریپت بدانیم. Hoisting به معنی ارتقاء یا بالا بردن است و به این اشاره دارد که تعریف متغیرها و توابع در جاوا اسکریپت به بالای برنامه یا اسکوپ (Scope) مربوطه منتقل می‌شوند. این یعنی می‌توانیم قبل از تعریف یک متغیر یا تابع، از آن استفاده کنیم. اما این فقط برای تعریف متغیر یا تابع صدق می‌کند، نه برای مقداردهی آن. یعنی مقدار دهی در همون خط اتفاق میوفته ولی تعریف اون متغییر در اپتدای اسکوپ.

برای مثال، اگر متغیر x را با کلمه کلیدی var تعریف کنیم، Hoisting این متغیر را به بالای برنامه منتقل می‌کند و هم تعریف و هم مقداردهی اولیه (Undefined) می‌شود. بنابراین، در کد زیر، اگر در خط دوم به x دسترسی پیدا کنیم، خطایی دریافت نمی‌کنیم، اما مقدار undefined چاپ می‌شود.

console.log(x); // undefined
var x = 10;

اما اگر متغیر x را با کلمه کلیدی let تعریف کنیم، Hoisting فقط تعریف متغیر را به بالای برنامه منتقل می‌کند و مقداردهی اولیه نمی‌شود. بنابراین، در کد زیر، اگر در خط دوم به x دسترسی پیدا کنیم، با خطای مرجع تعریف نشده مواجه می‌شویم.

console.log(x); // ReferenceError: x is not defined
let x = 10;

اینجاست که TDZ به وجود می‌آید. ‘تی دی زد’ برای متغیر x از ابتدای برنامه تا خط دوم ایجاد می‌شود و در این بازه، متغیر x در حالت تعلیق (Suspended) قرار دارد و نمی‌توان به آن دسترسی پیدا کرد. این محدودیت برای اجبار برنامه‌نویس به استفاده صحیح از متغیرها و جلوگیری از خطاهای احتمالی طراحی شده است.

چگونه با TDZ کار کنیم؟

TDZ یک ویژگی ثابت جاوا اسکریپت است و نمی‌توانیم آن را تغییر بدیم. اما می‌توانیم با رعایت چند نکته، از بروز خطاهای مربوط به TDZ جلوگیری کنیم. این نکته‌ها عبارتند از:

• همیشه متغیرها را قبل از استفاده از آن‌ها تعریف و مقداردهی کنیم.
• از کلمه کلیدی var برای تعریف متغیرها استفاده نکنیم و به جای آن از let و const استفاده کنیم.
• متغیرها را در ابتدای اسکوپ مربوطه تعریف کنیم و از تعریف متغیرها درون حلقه‌ها و شرط‌ها خودداری کنیم.
• و…

منابع یادگیری بیشتر TDZ:

در ادامه چند مقاله کاربردی و خوب در زمینه TDZ بهتون معرفی میکنم که یادگیریتونو در این زمینه ادامه بدید:

• What is the Temporal Dead Zone (TDZ) in JavaScript? – freeCodeCamp.org: این مقاله به زبان ساده و با مثال‌های کاربردی مفهوم TDZ را توضیح می‌دهد.
• Temporal Dead Zone (TDZ) and Hoisting in JavaScript – Explained with Examples: این مقاله نه تنها TDZ را شرح می‌دهد، بلکه رابطه آن را با مفهوم دیگری به نام Hoisting نیز بیان می‌کند.
• JavaScript Temporal Dead Zone & Hoisting: A Guide: این راهنما به صورت جامع و با جزئیات TDZ و Hoisting را بررسی می‌کند و نکات مهمی را برای برنامه‌نویسان ارائه می‌دهد.
• A Beginner’s Guide to Understanding the Temporal Dead Zone in JavaScript: این مقاله برای کسانی که تازه با جاوا اسکریپت آشنا شده‌اند، TDZ را به زبانی ساده و روان توضیح می‌دهد.
• Mastering JavaScript Variables: Hoisting, Temporal Dead Zone, and Top 10 Best Practices: این مقاله نه تنها TDZ و Hoisting را مورد بحث قرار می‌دهد، بلکه ده تا از بهترین روش‌ها و استانداردها را برای کار با متغیرها در جاوا اسکریپت معرفی می‌کند.

امیدوارم این مطلب براتون مفید باشه و باعث بشه که به درک عمیق تر جاوا اسکریپت و برنامه نویسی علاقه مند تر بشید… ❤️