پشت کد: متغیرها و توابع

Hoisting یک مفهوم اساسی در جاوا اسکریپت است که اغلب افراد تازه وارد و حتی توسعه دهندگان باتجربه را گیج می کند. هدف این مقاله رفع ابهام از hoisting با توضیح اینکه چیست، چگونه کار می‌کند، و چگونه بر نحوه نوشتن و اشکال زدایی کد جاوا اسکریپت تأثیر می‌گذارد.

بالا بردن چیست؟

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

چگونه بالابر کار می کند

بالابر متغیر

در جاوا اسکریپت، هر دو var و اعلامیه های عملکرد بالا می روند. با این حال، نحوه بالا بردن آنها متفاوت است.

بالا بردن با var

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

console.log(hoistedVar); // Output: undefined
var hoistedVar = "I am hoisted!";
console.log(hoistedVar); // Output: I am hoisted!

در این مثال، اعلامیه var hoistedVar; به بالا بلند شده است، اما انتساب hoistedVar = "I am hoisted!"; در جای اصلی خود باقی می ماند

بالا بردن با let و const

متغیرهای اعلام شده با let و const نیز بلند شده اند، اما بر خلاف var، آنها با مقداردهی اولیه نمی شوند undefined. درعوض، آنها از ابتدای بلوک تا زمانی که با اعلان مواجه شود، در یک “منطقه مرده زمانی” (TDZ) باقی می مانند. دسترسی به این متغیرها قبل از اعلام منجر به a ReferenceError.

console.log(hoistedLet); // ReferenceError: Cannot access 'hoistedLet' before initialization
let hoistedLet = "I am not hoisted!";

عملکرد بالابر

اعلان های تابع به طور کامل افزایش یافته اند، به این معنی که هم اعلان و هم تعریف به بالای محدوده منتقل می شوند.

hoistedFunction(); // Output: I am hoisted!
function hoistedFunction() {
 console.log("I am hoisted!");
}

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

عبارات تابع و توابع پیکان

عبارات توابع و توابع پیکان بلند نمی شوند. این توابع مانند متغیرهای اعلام شده با آن رفتار می کنند let یا const.

hoistedFunctionExpression(); // TypeError: hoistedFunctionExpression is not a function
var hoistedFunctionExpression = function() {
 console.log("I am not hoisted!");
};

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

مفاهیم عملی بالا بردن

اجتناب از دام های رایج

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

// Bad practice
console.log(value); // Output: undefined
var value = 10;
// Good practice
var value;
console.log(value); // Output: undefined
value = 10;

استفاده كردن let و const

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

if (true) {
 let blockScopedVar = "I am block scoped!";
 console.log(blockScopedVar); // Output: I am block scoped!
}
// console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

توابع و بالابر

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

// Function declaration
hoistedFunction();
function hoistedFunction() {
 console.log("This is a hoisted function!");
}
// Function expression
// nonHoistedFunction(); // TypeError: nonHoistedFunction is not a function
var nonHoistedFunction = function() {
 console.log("This is not a hoisted function!");
};

نتیجه

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