Hoisting

بالا بردن (Hoisting) رفتار پیشفرض جاوا اسکریپت برای انتقال تعریف ها (declarations) به بالا است.

تعریف کردن (Declaration): زمانی که متغیر، تعریف می شود.

var x;

مقداردهی اولیه (Initialization): زمانی که متغییر علاوه بر تعریف، به آن مقدار داده می‌ شود.

var x  = 5;

تعریف ها بالا می روند!

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

x = "PNLdev"; // مقدار دهی به متغیر

document.getElementById("demo").elem.innerHTML = x; // استفاده از متغیر و نمایش آن

var x; // تعریف متغیر
var x; // تعریف متغیر
x = "PNLdev"; // مقدار دهی به متغیر

document.getElementById("demo").elem.innerHTML = x; // استفاده از متغیر و نمایش آن

برای درک این موضوع، باید اصطلاح "بالا بردن" را درک کنید.

ویژگی بالا بردن در جاوااسکریپت، ترتیب اجرای کد ها را تغییر می دهد. در واقع، جاوااسکریپت به طور پیشفرض تعریف متغیرها و تعریف توابع را به بالای محدوده (scope) منتقل می‌ کند تا در زمان استفاده، قابل دسترس باشند.

کلمات کلیدی let و const

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

استفاده از متغیر let قبل از تعریف آن، باعث خطای ReferenceError می شود. متغیر از ابتدای بلوک تا زمانی که تعریف شود در یک "منطقه مرده زمانی" قرار دارد.

x = "PNLdev";
let x;

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

x = "PNLdev";
const x;

مقداردهی اولیه بالا نمی رود!

جاوااسکریپت مقداردهی اولیه (initializations) را بالا نمی برد، و فقط تعریف ها را بالا می برد.

دو مثال زیر نتایج یکسانی ندارند!

var x = "PNLdev"; // مقداردهی اولیه

document.getElementById("demo").innerHTML = "x: " + x; // نمایش متغیر
document.getElementById("demo").innerHTML = "x: " + x; // نمایش متغیر

var x = "PNLdev"; // مقداردهی اولیه

در نمونه کد بالا:

  • ابتدا، جاوااسکریپت به طور پیشفرض تعریف متغیر x را به بالای کد می‌ برد (ویژگی hoisting).
  • x وجود دارد ولی مقدار آن هنوز به "PNLdev" اختصاص نیافته است.
  • بنابراین، مقدار undefined نمایش داده می شود.
var x; // تعریف کردن

document.getElementById("demo").innerHTML = "x: " + x; // نمایش متغیر

x = "PNLdev"; // مقداردهی

متغیر ها را ابتدا تعریف کنید!

Hoisting (بالا بردن) برای بسیاری از توسعه‌ دهندگان، یک رفتار ناشناخته یا نادیده گرفته شده در جاوااسکریپت است.

اگر یک توسعه‌دهنده Hoisting را درک نکند، ممکن است برنامه‌ ها با باگ‌ ها (خطا ها) مواجه شوند.

برای جلوگیری از بروز خطا، همیشه تمام متغیرها را در ابتدای هر محدوده (scope) اعلام کنید.

از آنجا که این نحوه‌ای است که جاوا اسکریپت کد را تفسیر می‌ کند، این یک قانون خوب است که همیشه باید رعایت شود.

نکته: جاوا اسکریپت در حالت strict mode اجازه نمی‌ دهد که از متغیرها استفاده شود مگر آنها تعریف شده باشند. در درس بعدی، مفهوم use strict را مطالعه کنید.

 

خلاصه درس

تمرین


مشاهده پاسخ
توسعه دهندگان
نیما عراقی