JavaScript Visualized: Hoisting

مفهوم Hoisting ...
Hoisting یکی از اصطلاحاتی هست که هر توسعه دهنده جاوااسکریپتی وقتی به اروری میخوره و اون رو گوگل میکنه و به آخر استک اور فلو میرسه یک نفره به اون گفته که این ارور به خاطر Hoisting اتفاق افتاده!?

پس بریم سراغ اینکه Hoisting چیه ؟
اگر شما تازه وارد جاوااسکریپت شدید ( مثل من :دی ) ممکن هست رفتارهای عجیب‌و‌غریبی رو تجربه کرده باشید که بعضی متغیر ها به طور تصادفی undefined برگشت داده میشوند یا خطای ReferenceError و چیزهای دیگه. Hoisting اغلب با قرار گرفتن متغیر ها و توابع بالای فایل تعریف میشوند اما نه! این چیزی نیست که اتفاق میفته، اگرچه ممکنه رفتارش همینطوری به نظر برسه.. ?

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

در متغیرها، تعریف کردن کمی متفاوت هست. ES6 دو تا کلمه کلیدی برای تعریف کردن متغیرها: let و const معرفی کرده. متغیرهای تعریف شده با let و const بدون مقداردهی ابتدایی(uninitialized) ذخیره میشوند .

متغیرهای تعریف شده با کلمه var به صورت پیشفرض تعریف نشده(undefined) ذخیره میشوند.

حالا که مرحله تولید و ذخیره متغیر ها و تابع ها انجام شد، ما میتوانیم کد رو اجرا کنیم.
بریم ببینیم قبل تعریف (declare) تابع یا هر متغیر دیگری وقتی سه تا console.log بالای کد هامون داریم چی میشه.

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

وقتی که ما اشاره میکنیم به متغیری که با کلمه کلیدی var آن را تعریف کردیم به صورت خیلی ساده مقدار پیشفرض خودش رو کهundefinedهست رو برمیگردونه! به هرحال ممکن هست گاهی منجر به رفتار غیر منتظره "unexpected" بشه. احتمالا مواقعی که نمیخواید مقدار undefiend داشته باشید!

مثل وقتی که ما یک متغیری را که تعریف شده اما مقدار دهی نشده رو میخواهیم برگردانیم و با خطایی undefined برخورد میکنیم موقع فراخوانی متغیر های(uninitialized) هم با خطای ReferenceError مواجه میشویم.

وقتی انجین خط هایی که ما متغیر تعریف کردیم رو اجرا میکنه، متغیر هایی که در رم وجود دارند با متغیر های جدیدی که تعریف کردیم overwrite می شوند.

تمام ! یه جمع بندی سریع ? :

• توابع و متغیر ها قبل از اینکه ما آنها رو اجرا کنیم در معموری ذخیره میشوند. به این عمل Hoisting می گویند.
• توابع با رفرنسی که به خود تابع اشاره میکند ذخیره میشوند، متغیر ها با کلمه کلیدی var و مقدار undefined، و متغیر هایی که با کلمات کلیدی let و const تعریف میشوند مقدار uninitialized دارند.

کمی این مفهوم مبهم هست اما یاد گرفتیم وقتی کد ما اجرا میشود چه اتفاقی می افتد نگران نباشید اگر هنوز براتون مبهم هست با تمرین بیشتر بهتر متوجه این مفهوم خواهید شد.

این مقاله ترجمه شد از مقاله های Lydia hallie هست.

امیدوارم تونسته باشم تو درک این موضوع کمکی به دوستداران جاوااسکریپت کرده باشم.