ES5 vs ES6 - بخش اول

زبان جاوااسکریپت مثل بقیه زبان ها نسخه های مختلفی دارد که ES6 و ES5 از نسخه های این زبان هستند.

نسخه ES6 در سال 2015 منتشر شد و یکی از نسخه هایی است که بیشترین تغییرات را ایجاد کرده است.

لیست تغییرات این نسخه :

• Block-Scoped Variables and Constants (let, const)
• Arrow Functions
• Default Parameter Values
• Spread Operator
• String Interpolation
• Raw String Access
• Promises
• Binary & Octal Literal
• Regular Expression Sticky Matching
• Manipulating objects
• Value Export/Import
• Classes
• Symbol Type
• Iterator & For-Of Operator
• Generators
• Map/Set & WeakMap/WeakSet
• New Built-In Methods
  

در ادامه به توضیح مختصر و تفاوت آن با نسخه قبلی می پردازم.

Block-Scoped Variables and Constants (let, const)

دو کلید واژه ی let و const در ES6 اضافه شده که Block-scope هستند .

اسکوپ ها در واقع حوزه دید متغیر ها هستند به عبارت دیگر مشخص می کنند که متغیری که تعریف می کنیم در چه قسمتی از کد دسترس پذیر هست.

در نتیجه Block-Scope به دو اسکوپ Global و Function که در ES5 وجود داشت اضافه شد.

بلاک اسکوپ یعنی فقط متغیر داخل همون بلاک از کد در دسترس است، بلاک کد با این "{}" پرانتز ها مشخص می شود و می تواند هر بلاکی باشد از بلاک if گرفته تا تابع و ... حتی بلاکی که خودمون ایجاد کرده باشیم.

در ES5

{ 
  var x = 2; 
 }

در ادامه کد، x در خارج از بلاک نیز در دسترس است .

در ES6 :

{ 
  let x = 2;
  const y = 10 ;
}

در ادامه کد، x و y در خارج از بلاک در دسترس نیستند .

const :

با کلمه کلیدی const می توان ثابت ها را تعریف کرد ، باید در ابتدا مقداردهی شوند و در ادامه کد نمی توان مقدار اون هارو عوض کرد .

const PI = 3.141592653589793;

let :

در ES5 برای تعریف متغیر از کلید واژه var استفاده میکردیم ، حالا let نیز اضافه شده که این امکان رو فراهم میکنه تا متغیرهای بلاک اسکوپ داشته باشیم .

let name = 'rasool esmaili';

Arrow Functions :

نوع جدیدی از نوشتن توابع که syntax نوشتن توابع را کوتاه تر می کند :

ES5 :

helloWord = function() {
         return &quotHello World!&quot
}

ES6 :

hello = () => {
         return &quotHello World!&quot
}

//Shorter
helloWord= () => &quotHello World!&quot
//you can remove parentheses if have only one parameter
helloWord = value => &quotHello &quot + value;

نکته : مراقب استفاده از this باشید ، وقتی از تابع معمولی استفاده می کنید this به آبجکتی که این تابع رو فراخوانی کرده اشاره داره اما Arrow Function ها به آبجکتی که تابع در آنجا تعریف شده است اشاره دارد.

Default Parameter Values

در این نسخه این امکان وجود دارد که برای پارامتر های ورودی تابع مقدار پیش فرض تعیین کنیم .

function getName(name = 'rasool') {
         return &quotname is : &quot + name;
}
getName(); // return : name is rasool
getName('amin'); // return : name is amin

Spread Operator

این اپراتور که به شکل سه نقطه "..."هست، بسته به جایی که استفاده می شود کاربرد های مختلفی دارد.

در تعریف تابع: اگر هنگام تعریف تابع پشت پارامتر ورودی بیاید، می توان تابع را با هر تعداد پارامتر فراخوانی کرد و همه پارامترها را در آرایه ای در بدنه تابع دریافت کرد :

function sum(...numbers) {
         let sum = 0;
         for (let number of numbers) sum += number;
         return sum;
}
alert( sum(1) );
alert( sum(1, 2) );
alert( sum(1, 2, 3) );

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

function myFunction(a, b, c, d, e) { 
            //parameters get : a=100, b=200, c=300, d=400, e=500 
} 
const args = [200, 300];
myFunction(100, ...args, 400, ...[500]);

درArray ها :

const city1= ['tehran’, 'karaj'];
const cities = ['esfahan', ...city1, 'shiraz’, 'yazd'];
//  ['esfahan', 'tehran’, 'karaj', 'shiraz’, 'yazd']

//can merge 2 array
const city1= ['tehran’, 'karaj'];
const citiy2 = ['esfahan', 'shiraz’, 'yazd'];
const allCities = [...city1, ...city2];
//  ['tehran’, 'karaj', 'esfahan', 'shiraz’, 'yazd']

در Object ها :

// initialize new object
class person {
         constructor(name, family, age){
                  this.name = name;
                  this.family = family;
                  this.age = age;
         }
}
rasool = new person( ...['rasool', 'esmaili', 15] );

//copy and merge
const person1 = { name: ‘rasool', family: ‘esmaili’ };
const person2 = { name: ‘amin’, age: 15 };

//can clone object
const copyPerson1 = { ...person1 };
// copyPerson1 { name: ‘rasool',  family: ‘esmaili’ }

const mergedPerson = { ...person1, ...person2 };
//mergedPerson { name: ‘rasool', family: ‘esmaili’ , age: 15 }

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