مفهوم Hoisting | آموزش جاوااسکریپت به زبان ساده

درود دوستان. جاوااسکریپت چند مفهوم اساسی داره که هر برنامه‌نویسی که با این زبان کار می‌کنه باید اونها رو بدونه. یکی از این مفاهیم Hoisting هست.

با موارد زیر توی این قسمت آشنا می‌شیم:

• Hoisting چیه
• Hoisting برای متغیرها
• Hoisting برای اسکوپ‌های تو در تو

Hoisting چیه؟ 🤔

معنی تحت‌اللفظی اون یعنی بالا بردن.

کد زیر رو در نظر بگیرین:

welcome();

function welcome() {
  alert("Hello");
}

این کد رو با ► اجرا کنین. همونطور که می‌بینیم تابع welcome قبل از تعریف شدن، صدا زده شده. اما با اجرای شدن کد می‌بینیم که کد کاملاً درسته و خروجی مد نظر برای ما نمایش داده میشه. چطوری تونستیم تابعی رو اجرا کنیم و بعد اون رو تعریف کنیم؟ به دلیل خاصیتی به اسم Hoisting!

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

function welcome() {
  alert("Hello");
}

welcome();

یعنی تابع به بالاترین قسمت اسکوپ خودش (که اینجا گلوبال اسکوپ هست) جابجا و سپس برنامه اجرا شد. خب این خاصیت Hoisting برای توابع بود. این اتفاق برای متغیرها هم رخ میده.

Hoisting برای متغیرها

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

Hoisting برای متغیرهای var

کد زیر رو اجرا کنید:

alert(x);

var x = "Hello";

همونطور که می‌بینیم undefined به ما نشون داده میشه. متغیرهای var هنگام Hoisting به بالاترین قسمت اسکوپ خودشون جابجا و با مقدار undefined پیاده‌سازی میشن.