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

- visibility ۶ mode_comment

در جلسه قبل در مورد کلمه کلیدی var براتون توضیحاتی رو قرار دادیم و مشکلاتی که این نوع تعریف متغیر برای ما به وجود میاره رو با هم بررسی کردیم. در این جلسه قرار شد که در مورد کلمات کلیدی جدیدی که در ES6 اضافه شدند، توضیح بدیم. پس با کلمه کلیدی let شروع میکنیم. تفاوت اصلی که let و const با var دارند در این هست که این کلمات block scope هستند و دیگه function scope نیستند. حالا ممکن هست از خودتون بپرسید block چی تعریف میشه. به {} یک بلاک گفته میشه. کد زیر که قبلا هم قرار دادیم رو ببینید:

همونطور که قبلا هم گفتیم به دلیل مکانیزم Hoisting خروجی کد بالا undefined هست و به همین دلیل در ابتدا گیج کننده هست. در کد بالا سه بلاک داریم. یک بلاک مربوط به if و دیگری مربوط به else و بلاک آخر مربوط به کل تابع هست که دو بلاک دیگر رو در خودش جا داده. حالا فرض کنید که در کد بالا به جای var، متغیر رو با let تعریف کنیم. بصورت زیر:

بدلیل اینکه در کد بالا از let استفاده شده، متغیر firstName یک متغیر block scope محسوب میشه و فقط درون بلاک if قابل دسترسی و استفاده است. پس زمانی که تابع print رو با false فراخوانی میکنیم، ارور زیر در console نمایش داده میشه:

همونطور که میبینید دیگه در خروجی undefined نمایش داده نمیشه و یک ارور نمایش داده میشه و بهمون میگه که متغیر firstName تعریف نشده است. بخاطر اینکه متغیر firstName رو با let تعریف کردیم، این متغیر فقط در if قابلیت دسترسی رو داره و نمیتونیم در بلاک else به اون دسترسی داشته باشیم و به همین دلیل با ارور مواجه شدیم. پس میبینید که با استفاده از let قابلیت پیش بینی خروجی کد خیلی بیشتر و بهتر میشه و برنامه نویسان دیگه در این زمینه گیج نمیشن و مسائل مربوط به Scoping با استفاده از let راحتتر شده. بزارید بیشتر شما رو با let آشنا کنم. کد زیر رو ببینید:

میبینید که دو متغیر inner و outer رو با استفاده از var تعریف کردیم. inner درون یک بلاک قرار داده شده است. درون javascript میتونین به تعداد دلخواه بلاک قرار بدین و کدهای مورد نظرتون رو درون اونا قرار بدین. در کد ما هم به متغیر outer و هم به inner دسترسی داریم و میتونیم با استفاده از console.log اونا رو در خروجی چاپ کنیم. اما اگر بجای var از let استفاده کنیم، دیگه به متغیر inner در حوزه سراسری دسترسی نداریم و فقط میتونیم درون خود بلاک به اون دسترسی داشته باشیم و اون رو چاپ کنیم. خب همین مقدار در مورد let بدونیم کافی هست. حالا کلمه کلیدی const رو با هم بررسی میکنیم. این کلمه کلیدی از نظر block scope بودن و مسائل مربوط به دامنه، کاملا شبیه به let هست. let و const تفاوتهایی دارند که در زیر اونا رو بررسی میکنیم. اول بگیم که از const برای تعریف ثابتها استفاده میشه و مخفف کلمه constant به معنای ثابت است. کد زیر رو در نظر بگیرید:

همونطور که میبینید یک آرایه با const بنام names تعریف کردیم و سه عضو درون اون قرار دادیم. زمانی که این آرایه رو چاپ میکنیم، خروجی بصورت زیر خواهد شد:

میبینید که آرایه مورد نظر چاپ شده است. اگر اینکار رو با let و var هم انجام بدیم، خروجی به همین صورت خواهد بود. پس تفاوت const با دیگر روش ها در چیست؟ کد زیر رو در نظر بگیرید:

میبینید که در خط 3 قصد داریم که مقدار names رو تغییر بدیم و از اونجایی که names یک ثابت هست و با const تعریف شده، با یک ارور مواجه میشیم:

ارور مورد نظر به ما میگه که نمیتونیم مقدار یک ثابت رو تغییر بدیم. اما این رو در نظر بگیرید که const بصورت کامل immutable یا تغییر ناپذیر نیست و میتونین به روشهای مختلفی به اون چیزی رو اضافه یا کم کنید. مثلا میتونین با استفاده از متد push یک عضو رو به آرایه مورد نظر اضافه کنید. بصورت زیر:

با اینکار Amir به آرایه اضافه میشه و هیچ مشکلی هم به وجود نمیاد. پس وقتی یک متغیر رو با const تعریف میکنید، نمیتونین اون رو دوباره مقدار دهی و بازنویسی کنید. با اینکار زمانی که عمدا یا سهوا بخواید مقدار رو تغییر بدین، یک ارور نمایش داده میشه و جلوی این کار رو میگیره. کد زیر رو در نظر بگیرید:

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

میبینید که ارور مورد نظر نیز همین مورد رو بازگو میکنه.

با این موارد و نکاتی که بیان شد، شاید پیش خودتون بگید که از کدوم یکی از موارد باید برای تعریف مقادیر استفاده کنیم. بهترین روش بصورت زیر هست:

  • بصورت پیش فرض و در اکثر مواقع از const استفاده کنید
  • اگر نیاز داشتید که متغییر رو بعدا تغییر بدین یا اون رو بازنویسی کنید، از let استفاده کنید
  • دیگه هیچوقت از var استفاده نکنید! حالا میتونین در مواقعی خاص از var استفاده کنید ولی سعی کنید که کلا این روش تعریف متغیر رو کنار بزارید و به let و const رو بیارید.

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

یا علی

comment دیدگاه کاربران
mozex

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

محمد اسفندیاری

موفق باشید دوست عزیز

Mehdi

سلام خسته نباشید

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

محمد اسفندیاری

منظورتون رو متوجه نمیشم
برای چی به مشکل بخوریم؟

Mehdi

وقتی من با این روش convert میکنم فقط میاد جای let یا const رو var میذاره خوب مگه var خارج از block قابل تغییر نیست؟
حالا فرض کنید ما بین از او بلاک یه متغییر هم نام رو تغییر بدیم خوب اگه از var استفاده کینم روی اون تاثیر میذاره

یا const وقتی با var تعریف میشه دیگه ثابت نیست که قابل تغییر و ممکنه خارج از بلاک تغییر کنه

مثلا به نظر من const باید به شکل زیر باشه

‘const’ – ES6
const a = 1;

‘const’ – ES5
var a = (function(){
  var a = 1;
  return function(){
    a;
  };
});
محمد اسفندیاری

دوست عزیز ببینید وقتی میگیم Babel یا دیگر ابزارها let و const رو به var تبدیل میکنن، منظور این نیست که بجای هر let و const میاد و var میزاره….
Babel میاد و حالت های مختلف رو بررسی میکنه و علاوه بر اینکه جای let و const کلمه var رو قرار میده، نام متغیرها رو هم در صورت لزوم تغییر میده تا همون چیزی که در ES6 به وجود میاد، در ES5 نیز همون خروجی رو داشته باشه
پیشنهاد میکنم وارد سایت https://babeljs.io/repl/ بشید و این موارد رو تست کنید و خروجی تبدیل شده به ES5 اونا رو مشاهده کنید
تصویر زیر رو ببینید
https://s.7Learn.com/uploads/2017/07/babel-convert.png
میبینید Babel برای اینکه رفتار let رو شبیه سازی کنه، قبل از نام متغیر دوم یک _ یا underscore قرار داده است
موفق باشید

ارسال نظرات

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