🪝 Hoisting در جاوا اسکریپت چیست؟

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

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

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

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

چگونه متغیرها در حافظه ذخیره می شوند؟

کلمات کلیدی متغیرهای تعریف شده با var، let یا const در مورد بالا بردن و همچنین یک تابع متفاوت رفتار می کنند. همانطور که قبلاً اشاره کردم، هنگامی که یک اعلان متغیر در حافظه ذخیره می شود، همراه با مقدار آن نیست، فقط اعلان – به ویژه نام. با این حال، آنها در ابتدا یک مقدار پیش فرض دریافت می کنند.
هنگامی که متغیر با کلمه کلیدی var اعلام می شود، در شی متغیر با مقدار پیش فرض تعریف نشده ذخیره می شود.

حالا تصور کنید که من سعی کردم ابتدا متغیر log را کنسول کنم و بعداً آن را اعلام کنم. چه اتفاقی خواهد افتاد؟

همانطور که می بینید، خروجی آن تعریف نشده است. چرا؟ از آنجا که حتی اگر گزارش کنسول طبق ترتیب اول است، وقتی نوبت به تهیه کد می رسد، موتور از این گزارش کنسول صرفنظر می کند زیرا مطمئن می شود که ابتدا اعلان متغیر را ذخیره کرده است. اما وقتی متغیر ما را ذخیره کرد، مقدار پیش‌فرض undefined را به آن داد. به همین دلیل است که لاگ کنسول یک مقدار پیش فرض var – undefined را به ما داد.
بعد، ما متغیرهایی داریم که با کلمات کلیدی let و const جدیدتر از var هستند. وقتی صحبت از این کلمات کلیدی می شود، روند یکسان است. با این حال، به آنها مقدار داده نمی شود و مقدار اولیه داده نمی شود و هیچ مقدار پیش فرضی به آنها داده نمی شود. آنها هنوز به نوعی در حافظه ذخیره می شوند اما هنوز راه اندازی نشده اند.

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

اکنون می دانیم که چگونه چیزها در همان مراحل تجزیه کد ذخیره می شوند. متغیر اعلام شده با var به صورت undefined ذخیره می شود، const و let به عنوان ذخیره می شود و توابع به صورت ذخیره می شوند.

متغیرها در حین بالا کشیدن چگونه رفتار می کنند؟

با توجه به این واقعیت که hoisting به معنای ذخیره متغیرها در حافظه قبل از اجرای کد است، به این معنی است که مهم نیست که یک متغیر را کجا اعلام کنید، ذخیره اعلان آن همیشه در اولویت خواهد بود.
بیایید سعی کنیم متغیرهای log را کنسول کنیم و ابتدا تابع را فراخوانی کنیم و سپس آنها را اعلام کنیم. فکر می کنید برای هر کدام از آنها چه اتفاقی می افتد؟

کلمه کلیدی var

قبلاً این مثال را دیده بودیم و خروجی در اینجا تعریف نشده است زیرا اعلان متغیر var با مقدار پیش‌فرض undefined ذخیره می‌شود.

کلمه کلیدی let

کلمه کلیدی let در حافظه ذخیره می شود اما مقداردهی اولیه نشده است به این معنی که وقتی سعی می کنیم به آن دسترسی پیدا کنیم یک ReferenceError ایجاد می کند زیرا هیچ مقداردهی اولیه ای انجام نشده است.

کلمه کلیدی const

کلمات کلیدی const دقیقاً مانند کلمه کلیدی let رفتار می کنند.

کارکرد

توابع به عنوان یک مرجع برای تابع ذخیره می شوند و همانطور که می بینید می توانیم تابع را فراخوانی کرده و بعداً آن را اعلام کنیم. این رفتار به این معنی است که عملکردها را می توان بالا برد.

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

چرا این کد ReferenceError را پرتاب کرد؟ از آنجایی که ما یک تابع را در داخل یک کلمه کلیدی متغیر let ذخیره کردیم تا مانند کلمه کلیدی let رفتار کند.

نتیجه

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

📌 آیا این به شما کمکی کرد؟ لطفا مرا در جریان قرار بدهید