آشنایی کامل با Hoisting در Javascript - قسمت 1

در این مطلب و مطالب بعدی قصد داریم شما رو با یکی از مفاهیم مهم در javascript بنام Hoisting آشنا کنیم. به احتمال زیاد اگر با Javascript کار کرده باشید زیاد این واژه به گوشتون خورده و شاید تا بحال خوب اون رو نفهمیده باشید. این مطلب آموزشی سعی میکنه که این مفهوم رو به شما آموزش بده. ما از این لینک به عنوان مرجع استفاده میکنیم.

اول از همه ببینیم تعریف Hoisting چی هست:

Hoisting یک مکانیزم javascript هست که توابع و متغیرهای تعریف شده را قبل از اجرا شدن برنامه، به بالاترین موقعیت Scope خودشون انتقال میده.

اگر معنای Hoisting رو بررسی کنیم، خواهیم دید که اون رو بالا بردن معنا کردن. پس میشه اینطور برداشت کرد که دیگه مهم نیس ما کجا متغیرها و توابع رو تعریف یا Declare میکنیم، اونا به بالای Scope خودشون که حالا یا میتونه global یا کلی و local یا محلی باشه، انتقال داده میشن.

اگر چه باید این رو هم در نظر بگیرید که این مکانیزم فقط تعاریف یا Declaration رو بالا میبره و Assignment و جاهایی که مقداری رو به متغیر نسبت دادیم، سر جای خودشون باقی میمونن.

اول از همه باید همین اول کار Declaration و Assignment رو براتون مقداری روشن کنم. کد زیر رو در نظر بگیرید:

همونطور که میبینید یک متغیر بنام sample تعریف یا Declare کردم و مقدار رشته 'Mohammad' رو به اون نسبت دادم یا Assign کردم. پس کد بالا رو میشه بصورت زیر هم نوشت:

همونطور که دیدید در کد بالا Declaration و Assignment از هم جدا شدن. خب حالا که این دو رو فهمیدید، در نظر بگیرید که مکانیزم Hoisting فقط خط اول یعنی Declaration رو به بالای Scope مربوط به خودش منتقل میکنه و بخش Assignment سرجای خودش باقی میمونه.

undefined در مقابل ReferenceError

قبل از اینکه وارد بحث اصلی بشیم بهتره که با این دو مورد هم آشنا بشید. در اینجا ما دو حالت رو در نظر میگیریم. کد زیر رو در نظر بگیرید:

اگر این کد رو اجرا کنید، خواهید دید که در Console مقدار undefined نمایش داده میشه. این یک نکته رو به ما نشون میده:

در Javascript، زمانی که برنامه اجرا یا Execute میشه، مقدار و نوع مقادیری که تعریف نشده اند برابر با undefined قرار میگیره.

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

زمانی که این کد رو اجرا میکنید، یک ارور بصورت زیر نمایش داده میشه:

همونطور که میبینید نوشته شده متغیر مورد نظر تعریف نشده است. این مورد نکته زیر رو به ما نشون میده:

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

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

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی