Hoisting چیه؟

معنای تحت‌الفظی کلمه Hoisting "بالا بردن" هست. توی جاوااسکریپت قبل از اینکه کدهای ما به شکل واقعی اجرا بشن، همه‌ی توابع و متغیرها به اول حوزه‌ی خودشون جابجا میشن. به همین دلیل هست که زیر بدون خطا کار می‌کنه:

smile();

function smile() {
    return ":)";
}

اول تابع رو صدا زدیم و پایین‌تر خود تابع رو تعریف کردیم.

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

نکته: قبل از اجرای کد و وقتی که Hoisting انجام میشه، متغیرها، بدون مقدار به اول حوزه‌ی خودشون میرن. کد زیر رو درنظر بگیرید:

console.log(name);

var name = "Serena";

کد بالا در واقع به شکل زیر در نظر گرفته میشه:

var name;

console.log(name);

name = "Serena";

خب احتمالا باید بدونیم که خروجی console.log برابر با undefined هست. به این دلیل که متغیر name تعریف شده ولی مقدار دهی نشده.

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

let me = "know";
console.log(me); // know

console.log(puppy); // ReferenceError: Cannot access 'puppy' before initialization
let puppy = 30; 

توی مقاله تفاوت‌های var و let و const برای هر آیتم Hoisting توضیح داده شده.

منبع: