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

در جلسه قبل مکانیزم Hoisting در Ecmascript 5 رو به شما آموزش دادیم. در این جلسه قصد داریم این مکانیزم رو در Ecmascript 6 یا Ecmascript 2015 با هم بررسی کنیم. همونطور که میدونین این نسخه از javascript در ماه ژوئن سال 2015 میلادی منتشر شد و امکانات زیادی رو به Javascript اضافه کرد. در ES6 تقریبا همه موارد مربوط به ES5 وجود داره و معتبر هستن و اگر کدی با قواعد ES5 دارید، با قواعد ES6 نیز سازگاری خواهد داشت. در آینده مطالبی در مورد ES6 و نسخه های بعدی Ecmascript قرار میدیم تا بتونین از مزایای اونا بهره ببرید.

یکی از تغییرات و ویژگی هایی که به ES6 اضافه شد، کلمات کلیدی let و const هستن که با استفاده از اونا نحوه تعریف و مقداردهی متغیرها، رفتار متفاوتی با تعریف متغیر با var دارد.

کلمه کلیدی let

همونطور که در جلسات قبلی اشاره شد، متغیرهایی که با استفاده از var تعریف میشن، function scope هستن و اگر درون یک تابع تعریف بشوند، همون تابع، دامنه یا Scope آن متغیر خواهد بود. اما زمانی که متغیر رو با استفاده از let تعریف میکنید، اون متغیر Block scope خواهد شد و دیگر function scope نخواهد بود. در Javascript به {} یک بلاک یا block گفته میشه. حالا {} برای حلقه for باشه و یا برای if باشه و یا برای تابع و ... فرقی نمیکنه. خب حالا رفتار let در مکانیزم Hoisting رو بررسی میکنیم. کد زیر رو در نظر بگیرید:

مثل گذشته که این مثال رو برای var بررسی کردیم، انتظار داریم که در Console مقدار undefined چاپ بشه. در ES6 زمانی که از let استفاده میکنیم، تعریف متغیر به بالای scope انتقال داده میشه ولی رفتار متفاوتی با var دارد. زمانی که متغیر تعریف شده با var به بالا hoist میشد، مقدار undefined بصورت ضمنی به اون نسبت داده میشد ولی در اینجا بجای undefined، مقدار پنهان uninitialised برای متغیر hoist شده نسبت داده میشه و در ظاهر اینطور به نظر میرسه که اصلا Hoisting صورت نگرفته است. به همین دلیل در مرورگر با یک ارور Uncaught ReferenceError: hoist is not defined مواجه خواهیم شد. این حالت در let ما رو مجبور میکنه که همیشه اون رو قبل از استفاده تعریف کنیم. کد زیر رو در نظر بگیرید:

همونطور که در بالا میبینید، در ابتدا متغیر رو با let تعریف کردیم و بعد از console اون رو مقدار دهی کردیم. اگر کد بالا رو اجرا کنیم مقدار undefined رو خواهیم دید و اگر از یک console.log دیگر بعد از خط 4 استفاده کنیم، مقدار Hoisted چاپ خواهد شد.

کلمه کلیدی const

با استفاده از این کلمه کلیدی میتونین متغیرهای تغییرناپذیر یا Immutable رو تعریف کنید. زمانی که یک مقدار رو برای این مورد قرار میدین، دیگه نمیتونین اون رو تغییر بدین. در ابتدا بیاید سعی کنیم که مقداری که به یک متغیر const دادیم رو تغییر بدیم. کد زیر رو در نظر بگیرید:

بعنوان یک نکته اینو بگم که بهتره همیشه نام متغیرهایی که با const تعریف میکنید رو با حروف بزرگ قرار بدین. در خط 1 کد بالا، در ابتدا یک مقدار رو قرار دادیم و در خط 3 قصد داریم اون رو تغییر بدیم. اگر این کد رو در مرورگر باز کنیم، با ارور زیر مواجه خواهیم شد:

همونطور که میبینید یک ارور Type Error به ما نمایش داده میشه و در اون به ما میگه که نمیتونیم یک مقدار دیگه رو به متغیر ثابت، نسبت بدیم. حالا کدی که برای let بررسی کردیم رو برای const هم بررسی میکنیم. کد بصورت زیر هست:

در اینجا هم const مثل let عمل میکنه و چون اون رو بعد از console.log تعریف کردیم، برای اجراکننده تعریف نشده هست و با یک ارور ReferenceError: hoist is not defined مواجه خواهیم شد. یک حالت دیگر رو نیز با هم بررسی میکنیم:

همونطور که میبینید یک متغیر const رو در خط اول فقط تعریف کردیم و اون رو در همونجا مقدار دهی نکردیم. اینجا هست که با یک ارور دیگه مواجه میشیم و بصورت زیر هست:

میبینید که ارور به ما میگه که نمیتونین یک متغیر const رو فقط تعریف کنید و حتما باید اون رو همزمان مقداردهی هم بکنید. پس باید قبل از اینکه بخواید از یک متغیر ثابت استفاده کنید، declaration و Initialization رو قرار بدین.

زمانی که از let یا const استفاده میکنید، متغیرهای ما hoist میشن و به بالای Scope خودشون انتقال داده میشن ولی مطابق با چیزی که در استاندارد اومده، تا زمانی که اجرا کننده به تعریف اصلی متغیر نرسه، نمیتونه به اونا دسترسی داشته باشه و به همین دلیل هست که یک ارور Reference Error رو در Console مشاهده میکنیم.

همونطور که میبینید با استفاده از let و const کدهای ما قابلیت پیش بینی بهتری رو دارند و بهتر میتونیم رفتار اونا رو بفهمیم. برای مطالعه بیشتر در این زمینه میتونین این لینک رو مطالعه کنید.

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

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

یا علی