مفهوم 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 پیاده‌سازی میشن.

یعنی کد بالا درست قبل از اجرا شدن به صورت زیر در میاد:

var x = undefined;
alert(x);

x = "Hello";

Hoisting برای متغیرهای let و const

Hoisting برای این متغیرها مقداری تفاوت داره با var. برای این نوع متغیرها Hoisting اتفاق میوفته اما با این شرایط که این متغیرها قبل از تعریف شدن، قابل دسترسی نیستن:

alert(x);
let x = "Hello";

// Error: can't access 'x' <<before initialization>>

با اجرای کد بالا خطا می‌گیریم که نمی‌تونیم قبل از پیاده‌سازی x به اون دسترسی داشته باشیم. این قضیه برای const هم برقرار هست:

alert(x);
const x = "Hello";

// Error: can't access 'x' <<before initialization>>

Hoisting برای اسکوپ‌های تو در تو

حالا کد زیر رو در نظر بگیرین که اسکوپ‌های تو در تو داریم:

outer();

function outer() {
  inner();
  var x = "Hello";

  function inner() {
    alert(x);
    var y = "Hi";    
  }
}

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

function outer() {
  var x = undefined;

  function inner() {
    var y = undefined;
    alert(x);
    y = "Hi";
  }
  
  inner();
  x = "Hello";
}

outer();

خب دوستان این قسمت هم به پایان رسید. با دونستن مفهوم Hoisting می‌تونیم کدهایی بنویسیم که سالم‌تر هستن و خطا توی اونها کمتر دیده میشه. روزتون خوش 😉✌️