javascript-es6.md

id	title	sidebar_label
javascript-es6	ES6 | ES2015	ES6

طلوع

ECMAScript 2015 که به ES6 هم شناخته شده، بزرگترین و اساسی ترین نسخه اکما به حساب میاد.

فقط برای اینکه بزرگی این نسخه را درک کنید کافیه بگم اسناد معرفی امکانات این زبان از ۲۵۰ صفحه به بیش از ۶۰۰ صفحه ارتقا یافت.

مهمترین تغییرات ES2015 شامل موارد زیر است:

• طلوع
• Arrow functions
• scope جدید برای this
• Promises
• Generators
• let and const
• Classes
• Modules
• Multiline strings
• Template literals
• Default parameters
• The spread operator
• Destructuring assignments
• Enhanced object literals
• The for..of loop
• Map and Set

Arrow functions

Arrow function ها باعث شدن تغییراتی در ظاهر و (نحوه اجرا)ی کدهای جاوا اسکریپت به وجود بیاد. به طور خلاصه باعث شد فانکشن ها از:

const foo = function foo() {
  //...
}

به

const foo = () => {
  //...
}

تبدیل بشه، و اگر بدنه فانکشن فقط یک خط بود:

const foo = () => doSomething()

و فانکشن فقط یک پارامتر دریافت می‌کرد به این شکل نوشته بشه:

const foo = param => doSomething(param)

این ها یک breaking change به حساب نمیاد، یعنی نوشتن فانکشن ها به سبک قدیمیشون مثل قبل کار می‌کنه.

scope جدید برای this

اسکوپ this با arrow function ها فرق میکنه. به این صورت که در حالت قبلی فانکشن ها this همیشه به نزدیک ترین فانکشن که درونش بود اشاره داشت. ولی با arrow functions این مشکل برطرف شده و شما دیگه نیازی به نوشتن var self = this ندارید.

Promises

پرامیس ما رو از Callback hell نجات داد، البته کار کردن باهاشون کمی سخته که با معرفی async - await در ES2017 راحت تر شد.

با Promises شما میتونید همچین کدی رو:

setTimeout(function() {
  console.log('I promised to run after 1s')
  setTimeout(function() {
    console.log('I promised to run after 2s')
  }, 1000)
}, 1000)

به این شکل بنویسید:

const wait = () => new Promise((resolve, reject) => {
  setTimeout(resolve, 1000)
})

wait().then(() => {
  console.log('I promised to run after 1s')
  return wait()
})
.then(() => console.log('I promised to run after 2s'))

Generators

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

جنریتور تصمیم می‌گیره که مکث کنه، و اجازه میده کدهای دیگه که در صف هستند اجرا بشن و در زمانی که مایل بود به کارش ادامه میده.

این کار به راحتی با کیورد yield انجام میشه. در جنریتور هر زمان که به این کد برسیم، مکث شروع میشه.

یک جنریتور میتونه شامل بینهایت yield باشه. برای ساخت Generator فانکشن رو به این حالت می‌نویسیم: *function

جنیرتورها امکان کاملا جدیدی نظیر:

• ارتباط دو سویه در زمانی که جنریتور در حال اجراست
• while لوپی که با اجرا شدنش باعث فریز شدن برنامه ما نمیشه

به زبان جاوا اسکریپت می‌دهند.

این یک مثال هست که با کارکرد Generator بهتر آشنا بشید.

function *calculator(input) {
    var doubleThat = 2 * (yield (input / 2))
    var another = yield (doubleThat)
    return (input * doubleThat * another)
}

برای اجرا به این شکل اقدام می‌کنیم

const calc = calculator(10)

سپس iterator یا تکرار رو آغاز می‌کنیم:

calc.next()

کدی که برمیگرده شامل این آبجکت هست:

{
  done: false,
  value: 5
}

اتفاقی که می‌افته اینه که فاکشن با مقدار input = 10 اجرا می‌شه تا به اولین yield برسه. اولین yield مقدار 5 رو برمیگردونه. چون input / 2 = 5 و همینطور مقدار done در آبجکت برگشتی برار با false هست. چون هنوز اجرای جنریتور به اتمام نرسیده و فقط متوقف شده.

در ادامه ما مقدار 7 رو به جنریتور پاس می‌دیم:

calc.next(7)

و این آبجکت رو دریافت می‌کنیم:

{
  done: false,
  value: 14
}

در اینجا 7 مقدار doubleThat می‌باشد.

پس ما مقدار 14 رو دریافت کردیم و سپس یک بار دیگه مقدار 100 رو به جنریتور می‌فرستیم.

calc.next(100)

و این مقدار رو دریافت می‌کنیم:

{
  done: true,
  value: 14000
}

به این صورت که وقتی yield وجود نداره، مقدار (input * doubleThat * another) بر میگرده که برابر میشه با 10 * 14 * 100.

let and const

var اصطلاحا function scoped هست.

در صورتی که let و block scoped const هستند.

Classes

Modules

Multiline strings

Template literals

Default parameters

The spread operator

Destructuring assignments

Enhanced object literals

The for..of loop

Map and Set