هویستینگ (Hoisting) در جاوااسکریپت چیست؟

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

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

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

هویستینگ Hoisting چیه؟

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

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

welcome();

function welcome() {
  alert(&quotHello&quot);
}

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

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

function welcome() {
  alert(&quotHello&quot);
}

welcome();

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

هویستینگ Hoisting برای متغیرها

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

alert(x);

var x = &quotHello&quot

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

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

var x = undefined;
alert(x);

x = &quotHello&quot

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

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

alert(x);
let x = &quotHello&quot

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

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

alert(x);
const x = &quotHello&quot

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

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

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

outer();

function outer() {
  inner();
  var x = &quotHello&quot

  function inner() {
    alert(x);
    var y = &quotHi&quot    
  }
}

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

function outer() {
  var x = undefined;

  function inner() {
    var y = undefined;
    alert(x);
    y = &quotHi&quot
  }
  
  inner();
  x = &quotHello&quot
}

outer();

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

منبع : ditty.ir