Hoisting funstions vs hoisting classes

احتمالا تا به حال توی برنامه به یه سری خطاها برخورد کردین که بعد از یکمی سرچ متوجه شدین به خاطر چیزی به نام "Hoisting" این خطا رخ داده. یا اگه (به عنوان یک برنامه‌نویس)، تجربه مصاحبه برای استخدام رو داشته باشید ممکنه ازتون پرسیده باشن که hoisting چی هست؟ توی این مقاله سعی می‌کنم خیلی ساده و مختصر این مفهوم رو توضیح بدم.

1. Hoisting Functions

در جاوااسکریپت توابع رو می‌تونیم به دوصورت زیر تعریف کنیم.

1.1. Function declaration

1.2. Function expression

برای پیاده‌سازی مورد اول کافیه که از کلمه کلیدی function قبل از اسم تابع استفاده کنیم. به اینصورت:

//function declaration
Function example() {}

اما اگه یک متغیر تعریف کنیم (یا constant) و بدنه تابع رو درون این متغیر بریزیم از روش دوم استفاده کردیم.

//function expression
Const example = function() {};

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

example();
.
.
Function example() {}

دلیل اینکه در این شرایط با خطایی مواجه نمی‌شیم این هست که جاوااسکریپت به طور خودکار در هنگامی که کد رو اجرا میکنه، تمامی توابعی که به صورت function declaration پیاده‌سازی شدن رو میاره میزاره اول فایل. (همینطور تمامی متغیرها رو) پس اینطور نیست که همیشه تمامی کدها به صورت خط به خط و به ترتیب اجرا شن.

اما اگه توبع رو به صورت function expression پیاده‌سازی کرده باشیم این اتفاق نمیفته. پس نمی‌تونیم قبل از تعریف یه تابع به صورت expression، اون رو فراخونی کنیم. با این تعاریف، کد زیر باعث ایجاد خطا میشه:

example();
.
.
Const example = function() {};

پس ما نمی‌تونیم از example قبل از خطِ تعریف بدنه تابع استفاده کنیم.

2. Hoisting classes

برای پیاده‌سازی کلاس هم دقیقا مثل توابع دوتا راه داریم.

2.1. Class declaration

//class declaration
class Example {}

1.2. Class expression

//class expression
Const Example = class {};

برخلاف توابع، اگه یه کلاس رو به صورت class declaration پیاده‌سازی کنیم، هنگامی که کدها اجرا میشه تعریف کلاس به بالای فایل منتقل نمیشه و نمی‌تونیم قبل از پیاده‌سازی کلاس، یک شی از اون کلاس ایجاد کنیم. بنابراین کد زیر باعث تولید خطا میشه:

Const ex = new Example(); //ReferenceError: Example in not defined
.
.
class Example {}

راجع به class expression هم شرایط به همین صورت هست و باید حتما ساخت یک instance از کلاس رو بعد از پیاده‌سازی بدنه کلاس قرار بدیم تا با خطا مواجه نشیم.

فکر می‌کنم تا اینجا به مقدار مناسبی با مفهوم hoisting آشنا شده باشید. اگه علاقه به مطالعه بیشتر درین زمینه دارید می‌تونید به لینک‌ زیر مراجعه کنید.

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

امیدوارم این مقاله براتون مفید بوده باشه. نظر، انتقاد یا پیشنهادی اگر دارین خوشحال میشم بشنوم تا باهم بیشتر یاد بگیریم. موفق باشید.

بقیه مقالات من در ویرگول: