درک نحوه عملکرد Hoisting در جاوا اسکریپت

Hoisting یک ویژگی جالب جاوا اسکریپت است که می تواند حتی با تجربه ترین برنامه نویسان را گیج کند.

Hoisting یک مکانیسم جاوا اسکریپت است که به شما امکان می دهد به متغیرها و توابع قبل از مقداردهی اولیه آنها دسترسی داشته باشید. بالا بردن چنین اعلامیه ای عملاً آن را به بالاترین حد خود می رساند.

همه چیز را در مورد نحوه عملکرد hoisting در جاوا اسکریپت و نحوه مدیریت بهترین آن برای جلوگیری از خطا در کد خود بیاموزید.

متغیرهای بالابر با var، let و const

Hoisting امکان پذیر است زیرا جاوا اسکریپت از سیستم کامپایل JIT (Just-in-Time) استفاده می کند که کد شما را اسکن می کند تا همه متغیرها را در محدوده مربوطه شناسایی کند.

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

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

var

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

console.log(foo); // undefined
var foo = 2;

کد بالا تعریف نشده ثبت می شود زیرا قبل از اینکه متغیر را مقداردهی اولیه کند، console.log را فراخوانی می کند.

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

var foo;
console.log(foo); // undefined
foo = 2;

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

function myFunction() {
    console.log(foo); // undefined
    var foo = 10;
}
 
myFunction();
console.log(foo); // ReferenceError: foo is not defined

تلاش برای دسترسی به متغیری خارج از محدوده آن منجر به ReferenceError می شود.

اجازه دهید و ثابت کنید

با توجه به مستندات MDN در بالا بردن let و const، جاوا اسکریپت همچنین متغیرهای اعلام شده با کلمات کلیدی let و const را افزایش می دهد. با این حال، بر خلاف متغیرهای اعلام شده با کلمه کلیدی var، آنها با مقدار نامشخص مقداردهی اولیه نمی شوند.

مثلا:

function myFunction() {
    console.log(foo); // undefined
    console.log(bar); // ReferenceError: Cannot access 'bar' before initialization
    console.log(baz); // ReferenceError: Cannot access 'baz' before initialization
 
    var foo = 5;
    let bar = 10;
    const baz = 15;
}
 
myFunction();

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

توابع بالابر

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

اعلان تابع تابعی است که با یک نام اعلام می شود، در حالی که عبارت تابع تابعی است که می توانید نام آن را حذف کنید. مثلا:

function foo() {
    // function declaration
}
 
const bar = () => {
    // function expression
}

جاوا اسکریپت اعلان‌های توابع را بالا می‌برد اما عبارات توابع را نه. مثلا:

foo(); // 5
bar(); // TypeError: bar() is not a function
 
// Function Declaration
function foo() {
    console.log(5);
}
 
// Function Expression
var bar = function expression() {
    console.log(10);
};

این کد foo را قبل از اعلام و مقداردهی اولیه به عنوان یک تابع فراخوانی می کند، اما همچنان عدد 5 را در کنسول ثبت می کند. با این حال، تلاش برای فراخوانی نوار منجر به TypeError می شود.

مدیریت بالابر

آگاهی از بالا بردن و خطاهای احتمالی که در صورت مدیریت اشتباه ممکن است رخ دهد، می تواند ساعت های طولانی از اشکال زدایی شما را نجات دهد. در اینجا چند روش برای مدیریت بالابرها آورده شده است.

اعلان متغیرها در داخل توابع

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

متغیرها را با let یا const اعلان کنید

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

متغیرها را در بالای محدوده خود اعلام کنید

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

با استفاده از حالت سخت

حالت سختگیرانه یک حالت جاوا اسکریپت است که سینتکس ضعیف را تنظیم می کند، زمان اجرای کد شما را بهینه می کند و سوء استفاده از نحو تایپ شده جاوا اسکریپت را با ایجاد خطا در زمان کامپایل ممنوع می کند.

به عنوان مثال، در حالت Sloppy، به دلیل بالا بردن، می توانید به متغیری خارج از تابع مقداردهی اولیه دسترسی داشته باشید، حتی اگر اعلام نشده باشد:

myFunction();
console.log(foo); // 20
 
function myFunction() {
    foo = 20; 
}

در بلوک کد بالا، جاوا اسکریپت به طور خودکار foo را اعلام می کند و آن را به بالای محدوده جهانی می برد، بدون توجه به محدوده ای که آن را در آن مقداردهی اولیه کرده اید.

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

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

برای انتخاب حالت سخت در سطح جهانی، نحو را در بالای فایل اسکریپت خود اعلام کنید:

"use strict"; // or 'use strict'

برای انتخاب حالت سخت در سطح تابع، سینتکس را در بالای بدنه تابع قبل از هر عبارتی اعلام کنید:

function myStrictFunction() {
 "use strict";
}

اگر حالت سخت گیرانه را در سطح عملکرد اعلام کنید، این تنظیمات فقط برای عبارات داخل آن تابع اعمال می شود.

اعلام حالت سخت در سطح جهانی از دسترسی به متغیرها خارج از محدوده مربوطه آنها جلوگیری می کند:

"use strict";
myFunction();
console.log(foo); // ReferenceError: foo is not defined
 
function myFunction() {
    foo = 20; 
}

با روشن بودن حالت سخت، کامپایلر جاوا اسکریپت myFunction() را به بالای محدوده خود بدون متغیر اعلام نشده بالا می برد.

بفهمید که چه چیزی بر بلند کردن هواپیما تأثیر می گذارد

Hoisting برای جاوا اسکریپت کاملاً منحصر به فرد است و می تواند یک رفتار بسیار گیج کننده باشد. می تواند بر متغیرها و توابع تأثیر بگذارد، اما در صورت نیاز راه هایی برای جلوگیری از آن وجود دارد.

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

منبع مقاله