در این مقاله قصد داریم ۳ بخش جذاب ES6 برای کار با متغیرها را بررسی کنیم. با استفاده از این ویژگی‌ها، کارهای تکراری هنگام استفاده از متغیرها به حداقل می‌رسند و خوانایی کد تا حد زیادی بالا می‌رود.

let / const

دو کلمه‌ی کلیدی جدید let و const این اجازه را به ما می‌دهند که بین متغیرهایی که قرار است دست نخورده باقی بمانند و دیگر متغیرها تفاوت قائل شویم. کد زیر مثالی از استفاده let و const را نشان می‌دهد.

// ES5
var start = 'hello dear ';
var name = 'user';
console.log(start + name);
name = 'admin';
console.log(start + name);

// ES6
const start = 'hello dear ';
let name = 'user';
console.log(start + name);
name = 'admin';
console.log(start + name);

برای متغیری مثل start که تا آخر برنامه قصد تغییر آن را نداریم میتوانیم از کلمه‌ی کلیدی const استفاده کنیم. با این کار علاوه بر اینکه خواندن کد راحت‌تر می‌شود، برنامه به ما اجازه‌ی ایجاد هیچ تغییری در این متغیر در جای دیگری از برنامه را نمی‌دهد.

برای بقیه متغیرها می‌توانیم از let استفاده کنیم. تفاوت دیگری که let با var دارد در scope(محدوده) آنهاست. مثال زیر را نگاه کنید:

// ES5
var number = 0;
var text = 'hello';
if (number == 0) {
  var text = 'bye';
  console.log(text); // bye
}
console.log(text); // bye

// ES6
var number = 0;
let text = 'hello';
if (number == 0) {
  let text = 'bye';
  console.log(text); // bye
}
console.log(text); // hello

اگر متغیرها را با استفاده از var تعریف کنیم، تنها scope جدایی که برای آن‌ها تعریف می‌شود تابع است. یعنی متغیری که در هر بخشی از تابع تعریف می‌شود در کل تابع قابل دسترس است ولی در بیرون تابع به آن دسترسی نداریم.
اما اگر با استفاده از let بخواهیم متغیر تعریف کنیم هر بخشی که در {} آکولادها قرار داشته باشد به عنوان یک scope جدا در نظر گرفته می‌شود و متغیری که در آن scope تعریف شود فقط در همان بخش می‌ماند. در مثال بالا متغیری که با استفاده از let در بخش if تعریف شده با متغیری که با همان نام در بیرون if تعریف شده تفاوت دارد.

برای مقایسه‌ی سه کلمه‌ی کلیدی var و let و const از نظر کارایی، تست‌های زیادی وجود دارد که جواب‌های یکسانی ندارند و نمی‌توان با قطعیت گفت که کارایی کدام‌یک بیشتر است. در اینجا به یکی از تست‌هایی که سایت jsperf آماده کرده بسنده می‌کنیم.

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

لینک این مقایسه

مقایسه‌ی دوم بین var و let انجام شده است. در این مقایسه هم var تعداد بیشتری دستورالعمل در ثانیه اجرا کرده است.

لینک این مقایسه

مقایسه‌ی آخر بین هر سه‌ی این‌ها انجام شده و نتایج برتری const را نشان می‌دهند.

لینک این مقایسه

در تست‌های مختلف کدهای متفاوت اجرا شده‌اند و در انجام بعضی کارها var بهتر عمل کرده و در انجام بعضی دیگر let و const عملکرد بهتری را به اجرا گذاشته‌اند؛ ولی به طور کلی var کارایی و سرعت بیشتری را در اختیار ما قرار می‌دهد.

زمانی که کارایی برنامه نسبت به تمیز بودن کد اهمیت بیشتری دارد می‌توان از var استفاده کرد ولی برای انجام اکثر کارها let و const پیشنهاد می‌شود.

destructuring

یکی دیگر از قابلیت‌های جذاب ES6 توانایی خارج کردن مقدار خانه‌های آرایه یا object و اختصاص دادن آن‌ها به متغیرها است. این کار قبلا هم به سادگی قابل انجام بود ولی ES6 این سادگی را دوچندان کرده و همچین راحتی نوشتن و خوانایی کد را بالا برده است.

آرایه

در مثال زیر با استفاده از destructuring هر خانه‌ی آرایه‌ی a را به یک متغیر با اسم خاص اختصاص دادیم. مثلا خانه‌ی دوم آرایه به دومین متغیری که در [] نوشتیم اختصاص داده می‌شود.

var a = [1, 2, 3, 4, 5, 6];

// ES5
var a0 = a[0],
    a1 = a[1],
    a2 = a[2],
    a3 = a[3],
    a4 = a[4],
    a5 = a[5];
console.log(a0 + a2);

// ES6
var [a0, a1, a2, a3, a4, a5] = a;
console.log(a0 + a2);

اگر بخواهیم بعضی از خانه‌های آرایه را در متغیر بریزیم می‌توانیم به جای خانه‌هایی که نمی‌خواهیم جای خالی بگذاریم.

var a = [1, 2, 3, 4, 5, 6];

// ES6
var [a0, , , , , a5] = a;
console.log(a0 + a5);

object

مشابه همین را می‌توان برای objectها به کار برد با این تفاوت که به جای [] از {} استفاده می‌کنیم. تفاوت دیگر اینکه در هنگام destructure کردن آرایه میتوانیم برای متغیر هر اسمی را در نظر بگیریم ولی برای object باید اسم property مورد نظر را بنویسیم(البته می‌توان این کار را به روش دیگری هم انجام داد که جلوتر می‌بینیم).

var a = {
  a1: 1,
  a2: 2,
  a3: 3,
  a4: 4,
  a5: 5,
  a6: 6
};

// ES5
var a1 = a.a1,
    a2 = a.a2,
    a3 = a.a3,
    a4 = a.a4,
    a5 = a.a5,
    a6 = a.a6;
    console.log(a1 + a5);

// ES6
var {a1, a2, a3, a4, a5, a6} = a;
console.log(a1 + a5);

اگر فقط به چند مورد از propertyها نیاز داشتیم می‌توانیم اسم همان چند مورد را بیاوریم.

var a = {
  a1: 1,
  a2: 2,
  a3: 3,
  a4: 4,
  a5: 5,
  a6: 6
};

// ES6
var {a1, a6} = a;
console.log(a1 + a6);

اگر قصد این را داریم تا اسم متغیر با اسم property یکی نباشد می‌توانیم از روش زیر استفاده کنیم. با این کار مثلا property با اسم a1 به متغیری با اسم first اختصاص داده می‌شود.

var a = {
  a1: 1,
  a2: 2,
  a3: 3,
  a4: 4,
  a5: 5,
  a6: 6
};

// ES6
var {a1: first, a6: second} = a;
console.log(first + second);

جابجایی متغیرها

با استفاده از destructuring می‌توانیم مقدار متغیرها را نیز جابجا کنیم.

var a = 1;
var b = 5;

[a, b] = [b, a];

template string

با استفاده از template string می‌توانیم به راحتی متغیرها را در متن مورد نظرمان جایگذاری کنیم.

var a = 1;
var b = 3;

// ES5
var text = "a + b = " + (a + b) + " ...";

// ES6
var text = `a + b = ${a + b} ...`;

در این روش به جای اینکه متن مورد نظرمان را به چند بخش تقسیم کنیم، مستقیما متغیر را در متنمان جایگذاری می‌کنیم. برای انجام این کار به جای استفاده از کوتیشن(‘ یا “) از علامت ‘ استفاده می‌کنیم و هرجا نیاز داشتیم متغیری بنویسیم، متغیر را در ${} قرار می‌دهیم.

یکی دیگر از قابلیت‌های template string به شکل زیر است. با این روش می‌توانیم یک رشته را به راحتی به یک تابع بفرستیم و از آن استفاده کنیم.

function tag(strings) {
  console.log(strings.raw[0]);
}

tag`string text`;

اول از همه اسم تابع را می‌آوریم و بعد از آن رشته‌ی مورد نظر را در ‘ قرار می‌دهیم. در تابع هم با استفاده از property به اسم raw میتوانیم به متن این string دست پیدا کنیم.

در این مقاله سعی شد تا کاربردی‌ترین ویژگی‌های هرکدام از این ۳ بخش مورد بررسی قرار بگیرند. برای اینکه با ویژگی‌های دیگر این موارد آشنا شوید می‌توانید از آدرس‌های زیر استفاده کنید.

let / const

destructuring

template string

در مقاله‌های دیگر به بررسی قسمت‌های دیگری از es6 می‌پردازیم. همراه ما بمانید.