کوچ از ES5 به ES6 [بخش اول]

کوچ از ES5 به ES6

با بررسی برنامه‌هایی که در بستر وب توسعه داده شده‌اند. متوجه می‌شویم که اکثر این برنامه‌ها در بستر ES5 طراحی شده‌اند. یکی از مهمترین دلایل؛ این موضوع بوده است که اکثر مرورگرها از ES5 پشتیبانی می‌کنند و احتمال اجرا نشدن در مرورگرهای مختلف را بسیار پایین می‌آورد. به همین دلیل هنوز اکثر برنامه نویس‌ها از ES5 استفاده می‌کنند. اما با به وجود آمدن فریم ورک‌های جاوا اسکرییتی توسعه برنامه‌ها با ES5 بسیار سخت و زمان‌بر خواهد بود اما با تغییراتی که از ES6 به بعد به وجود آمده است؛ توسعه برنامه‌ها آسان‌تر شده است.

در طی چندین مقاله سعی به معرفی و بیان تفاوت‌های بین ES5 و ES6 و بالاتر خواهیم داشت.در این مقاله قصد داریم در مورد تغییراتی که در زمینه متغیرها ایجاد شده بحث کنیم.

متغیرها

۱- Const

این امکان را به ما می‌دهد که بین متغیرهایی که قرار است بدون تغییر باقی بماند با متغیرهای دیگر تفاوت قائل شویم.

برای مثال:

// ES5
var start = 'hello ';
var name = 'Microsoft';
console.log(start + name);
name = 'Nikamooz';
console.log(start + name);
//ES6
const start = 'hello';
var name = 'Microsoft';
console.log(start + name);
name = 'Nikamooz';
console.log(start + name);

۲- Let

متغیرهایی که با کلمه کلیدی let تعریف می‌شوند فقط در همان Scope (محدوده) که تعریف شده است قابل استفاده می‌باشد.

برای مثال:

//ES5
var number = 0;
var language = 'C#';
if(number == 0){
var language = 'Java';
console.log(language);// => Java
}
console.log(language)// => Java
//ES6
var number = 0;
var language = 'C#';
if(number == 0){
let language = 'Java';
console.log(language);// => Java
}
console.log(language)// => C#

اما با پیدایش دستورات کلیدی Const، Let برای برنامه نویس‌ها این سوال پیش می‌آید که علاوه بر مواردی که گفته شد؛ آیا روی سرعت اجرای برنامه هم تأثیری دارد یا خیر. که برای مقایسه آن‌ها می‌توانید از لینک‌های زیر استفاده نمایید.

مقایسه Var و Const

https://jsperf.com/const-vs-var/26

مقایسه Var و Let

https://jsperf.com/let-vs-var-performance

مقایسه Var ، Let و Const

https://jsperf.com/let-vs-var-performance/34

با بررسی تست‌های بالا و تست‌های دیگری که انجام شده Var بهتر عمل کرده است. ولی این موضوع دلیل بر این نیست که در همه‌ی موارد Var به خوبی عمل کند. اما زمانی که کارایی و سرعت برنامه به تمیز بود کد اهمیت بیشتری دارد بهتر است از var استفاده کنیم اما زمانی که از ES6 به بعد استفاده می‌کنید برای انجام اکثر کارها استفاده از Const و Let پیشنهاد می‌شود.

۳– Destructuring

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

ابتدا با آرایه‌ها شروع می‌کنیم.
آرایه a را به صورت زیر تعریف می‌کنیم.
var a = [1, 2, 3, 4, 5, 6]

در ES5 برای اینکه بخواهیم مقادیر آرایه را درون متغیرها بریزیم به صورت زیر عمل می کنیم.

// 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 به صورت زیر عمل می‌کنیم.

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

و همچنین شاید لازم داشته باشیم فقط تعدادی از خانه‌های آرایه را درون متغیر بریزیم برای این کار به جای متغیرهایی که لازم نداریم جای خالی قرار می‌دهیم.

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

در مورد Objectها هم به همین صورت می‌توانیم عمل کنیم.
برای مثال Object با نام a را به صورت زیر در نظر بگیرید.

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);

یک ویژگی جالب دیگری که می‌توان در ES6 مشاهده کرد این هست که در یک Object اگر بخواهیم اسم متغیر با اسم Property یکی نباشد می‌توانیم از روش زیر استفاده کنیم. با این کار مثلا Property با اسم a1 به متغیری با اسم First اختصاص داده می‌شود.

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

و اما یکی دیگر از مواردی که می‌توانیم با Destructuring انجام دهیم جا بجایی مقدار متغیرها می‌باشد.

برای مثال

// ES6
var a = 1;
var b = 5;
[a, b] = [b, a];