تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۲۰ خرداد ۱۳۹۶

در جلسه قبل مکانیزم 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 رو بررسی میکنیم. کد زیر رو در نظر بگیرید:

console.log(hoist);
let hoist = 'The variable has been hoisted.';

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

let hoist;

console.log(hoist);
hoist = 'Hoisted';

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

کلمه کلیدی const

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

const PI = 3.142;

PI = 22/7;

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

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

console.log(hoist);
const hoist = 'The variable has been hoisted.';

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

const PI;
console.log(PI);
PI = 3.142;

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

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

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

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

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

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

یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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