آموزش ویژگی های ECMAScript 6 (جلسه 4) : معرفی let و const - قسمت 1

همونطور که اطلاع دارید در جلسات قبل توضیحاتی مقدماتی در مورد Javascript و ECMAScript دادیم و شما رو با اونا آشنا کردیم. بعد از اون درون ویدیوها محیط کار با ES6 رو آماده سازی کردیم و از این جلسه به بعد، ویژگی های مهم و متداولی که شما باید اونا رو بدونین رو بهتون آموزش میدیم.

در این جلسه قصد داریم در مورد روشهای مختلف تعریف متغیر در ES6 صحبت کنیم. در ES2015 دو روش جدید برای تعریف متغیر به وجود اومده که ویژگی های خاصی رو به وجود میارن. این کلمه های کلیدی جدید let و const هستند. حتما شما میدونین که چطور با استفاده از var متغیرهای مختلف رو تعریف میکنیم. مثلا فرض کنید میخوام یک متغیر بنام name تعریف کنم و مقدار نام خودم رو درون اون قرار بدم. برای اینکار بصورت زیر عمل میکنم:

خب این کار ساده ای هست و خیلی از ما اون رو بلدیم. اما روشهای دیگه ای برای اینکار اومدن که بصورت زیر هستن:

و :

همونطور که دیدید بجای var از دو کلمه let و const نیز میشه استفاده کرد. اما تفاوت اونا در چی هست؟ خیلی از افراد نمیدونن که در چه مواقعی از کدوم یکی از کلمه های کلیدی بالا استفاده کنن. در زیر توضیحاتی در مورد هر کدام خدمتتون میدیم و در نهایت میگیم که هر کدام رو کی و چه موقع استفاده کنید.

در ابتدا بیاید با هم حالتی از var رو بررسی کنیم و ببینیم که اصلا چرا let و const در ES6 به وجود اومدن و بهشون نیاز پیدا شد. کد زیر رو در نظر بگیرید:

همونطور که دیدید در خط 1 یک تابع بنام print رو تعریف کردیم و این تابع true یا false رو بعنوان ورودی دریافت میکنه و متناسب با اون عملی رو انجام میده. ما در خط 9 این تابع رو با ورودی true صدا زدیم و با اینکار بلاک if درون تابع اجرا میشه و متغیر name تعریف میشه و در نهایت با استفاده از Console.log، نام مورد نظر رو درون Console چاپ میکنیم. پس به همین سادگی و بدون هیچ مشکلی این کار رو انجام دادیم. خب حالا بیاید یچیزایی به کد بالا اضافه کنیم. ما یک بخش else اضافه میکنیم و تابع رو این بار با false صدا میزنیم. بصورت زیر:

چون تابع رو با ورودی false صدا زدیم، پس بلاک else اجرا میشه و در اینجا میخوایم متغیر name رو در console چاپ کنیم. ولی صبر کنید!! متغیر name درون بلاک if تعریف شده و بلاک if اصلا اجرا نشده، پس قاعدتا باید با یک ارور مواجه بشیم. ولی اگر خروجی رو ببینید، undefined درون Console چاپ شده است!! اما چرا؟!

فرض کنید که بجای name یک متغیر که اصلا درون کد اون رو نیاوردیم، بزاریم:

میبینید که بجای name از lastName استفاده کردیم. اگر اینبار خروجی رو ببینیم، یک ارور نمایش داده خواهد شد:

میبینید که اینجا بجای undefined یک ارور not defined رو دریافت کردیم. پس یه کارایی در پشت صحنه اتفاق میوفته که این نتیجه رو به وجود میاره. این حالت عجیب مربوط به یک مکانیزم معروف در Javascript بنام Hoisting هست که گاهی اوقات کار رو برای ما سخت میکنه. یکبار دیگه بیاید کد قبلی رو در نظر بگیریم:

این کد خروجی undefined رو در خروجی چاپ میکنه و حالا دلیل اون رو با هم بررسی میکنیم. در Hoisting تعاریف مربوط به متغیرهایی که با کلمه کلیدی var تعریف شده اند، به بالای scope یا دامنه خودشون انتقال داده میشن. همونطور که میدونین متغیرهایی که با var تعریف میشن، function scope هستن و در نتیجه در کد بالا دامنه مربوط به متغیر name، تابع print هست. پس قبل از اینکه کدهای ما اجرا بشه، یک مرحله انجام میشه و تعریف یا declaration مربوط به name به بالای Scope انتقال داده میشه. بصورت زیر:

میبینید که تعریف متغیر name به بالا انتقال داده شد. پس میبینید که با اینکار بهتر میتونیم خروجی رو حدس بزنیم و اینکه در خروجی undefined چاپ میشه دیگه غیر عادی نیس. چون در خط 2 متغیر رو تعریف کردیم، پس در هر جایی به اون دسترسی داریم و اگر در بلاک else اون رو چاپ کنیم، چون اون رو مقدار دهی نکردیم، undefined چاپ میشه. ولی اگر تابع رو بجای false با true صدا بزنیم، چون درون بلاک if، متغیر name رو مقدار دهی کردیم، زمانی که اون رو چاپ میکنیم، مقدار Mohammad در Console چاپ خواهد شد. میبینید که بعد از فهمیدن مکانیزم Hoisting بهتر میتونین این موارد رو تجزیه و تحلیل کنید. به عنوان یک نکته بهتر هست که همیشه در ابتدای کدهاتون، متغیرهای مورد نظر رو تعریف کنید و هر جا که خواستید اونا رو مقدار دهی کنید تا با مشکلی روبرو نشید.

این موارد طی سالیان گذشته موجب گیج شدن و سردرگمی توسعه دهندگان Javascript شده و باعث میشد که نتونن همیشه خروجی کدهاشون رو حدس بزنن. پس در ES6 دو کلمه کلیدی جدید با نامهای let و const اومدن که میتونن این مشکل رو برای ما حل کنن. در جلسه بعد استفاده از این کلمات کلیدی جدید رو بهتون آموزش میدیم و میگیم که چطور این مشکلات رو برای ما حل میکنن.

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

یا علی