قسمت اول

دوستان عزیز این مقاله ترجمه‌ای است بر مقاله Modern javascript cheatsheet است که به زبان خودمانی و ساده امکانات جاوا اسکریپت ES6 رو در چند قسمت به شما ارائه خواهم داد.

مقدمه

این مقاله نگاهی کوتاه (به همراه مثال) به امکانات جدید جاوا اسکریپت در نسخه ES2015 یا ES6 هست.

تو این مقاله قصد یاد دادن جاوا اسکریپت از پایه رو به شما نداریم .

میخوایم به کسانی که دانشی پایه از جاوا اسکریپت دارند کمک کنیم تا با Syntax جدید جاوا اسکریپت بیشتر آشنا بشن.

تعریف متغییر : (var, let, const)

در جاوا اسکریپت سه کلیدواژه برای تعریف متغییر وجود داره که هر کدام تفاوت هایی دارند.

این سه کلیدواژه عبارت است از : var, let, const

توضیح مفصل

متغییرهای تعریف شده با const قابلیت انتساب مقدار مجدد رو ندارند در حالی که دو کلیدواژه دیگه دارند.

پیشنهاد میشه که به طور پیشفرض متغییرهاتون رو با کلیدواژه const تعریف کنید.

درصورتی که نیاز به تغییر یا انتساب مقدار جدید به متغییرتون رو داشتید میتونید از let استفاده کنید.

نمونه کد:

خطا رخ خواهد داد چون متغییر person قابلیت انتساب مجدد ندارد

راه حل:

به خاطر استفاده از Hamid ،let به person منتسب خواهد شد

در زیر، یه جدول وجود داره که در ادامه این جدول رو توضیح خواهم داد.

جدول متغییرها در جاوا اسکریپت

توضیحات مفصل

در بالای جدول و ردیف اول چهار گزینه وجود دارد که ابتدای آن Scope است.

Scope یا حوزه در واقع جایی هست که متغییر در کد جاوا اسکریپت ما در دسترس می باشد.

var: از این کلیدواژه برای متغییرهایی استفاده میشه که در حوزه تابع در دسترس هستند.

به این معنی که وقتی متغییری در یه تابع ایجاد میشه همه اجزای درون اون تابع میتونن بهش دسترسی داشته باشن.

اگر یه متغییر با این کلیدواژه درون تابعی تعریف بشه در خارج از اون تابع در دسترس نخواهد بود.

نمونه کد:

بگذارید واسه فهم بیشتر و بهتر مطلب، نمونه کد دیگه ای رو براتون قرار بدم.

متغییرهایی که با var تعریف میشن در زمان اجرا خودشون رو به بالای scope یا حوزه خودشون انتقال میدن. این چیزی هست که بهش var Hoisting میگن.

این قسمت از نمونه کد :

در زمان اجرا اینجوری میشه :

let :

let و var مشابه هم هستند با این تفاوت که:

  • let در scope یا حوزه بلاک قراردارد یا اصطلاحا Block scope هست.
  • قبل از تعریف شدنش در دسترس نیست.
  • در یک scope مشابه نمیتونه دوبار تعریف بشه.

اجازه بدید با استفاده از نمونه کد قبل بیشتر let رو توضیح بدم.

نمونه کد:

خب حالا اجازه بدید نمونه کدی رو بزارم که در دسترس نبودن متغییر let (و const) رو قبل از تعریف، نشون بده.

نمونه کد:

برخلاف متغییر var، اگه شما سعی کنی به یه متغییر let (یا const) قبل از تعریف مقدار بدی یا مقدار اون متغییر رو بخونی خواهید دید که با خطا روبرو میشید.

به این پدیده اصطلاحا Temporal Dead Zone گفته میشه.

در جاوا اسکریپت از لحاظ فنی متغییرهایی که با let و const تعریف میشن هم مانند var هستند.

یعنی در زمان اجرا خودشون رو به بالای scope خودشون منتقل میکنن.

اما مقداری رو به خودشون منتسب نمیکنن.

در واقع از جایی که ساخته میشن قابل انتساب میشن و قبل از اون خیر.

همین مسئله باعث میشه که شما حس کنید hoisting وجود نداره درحالی که وجود داره.

به علاوه شما نمیتونید یه متغییر let رو دوباره تعریف کنید.

نمونه کد:

 

const :

متغییرهایی که با const تریف میشن رفتاری شبیه به let دارن با این تفاوت که قابل انتساب مجدد نیستند.

به طور خلاصه متغییرهای const :

  • Block scope هستند
  • قبل از انتساب در دسترس نیستند
  • در یک scope مشابه نمیتوان دوبار تعریفشون کرد
  • قابل انتساب مجدد نیستند

نمونه کد:

خطا اتفاق می افته. چون نمیتونیم انتساب مجدد داشته باشیم.

خطا اتفاق می افته. چون نمیتونیم تو یه scope تعریف مجدد داشته باشیم.

اما یه نکته وجود داره. متغییرهای const تغییر ناپذیر نیستند.

یعنی آرایه و شی‌ای که با const تعریف میشه قابل تغییر هست.

نمونه کد برای اشیاء:

این کد کار خواهد کرد چون متغییر person به صورت کامل انتساب مجدد نشده بلکه تغییر کرده.

خطا اتفاق می افته. چون به متغییر const اجازه انتساب مجدد نداریم.

نمونه کد برای آرایه ها:

این کد کار خواهد کرد چون متغییر person به صورت کامل انتساب مجدد نشده بلکه تغییر کرده.

خطا اتفاق می افته. چون به متغییر const اجازه انتساب مجدد نداریم.

در اینجا قسمت اول مقاله به پایان رسید.

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

با انتقادات، نظرات و پیشنهادات خودتون ما رو در ارائه هر چه بهتر مطالب یاری کنید.

ادامه این مقاله رو بزودی برای شما عزیزان قرار خواهم داد.

نوشته شده توسط: میثم راه‌پیما