در ادامه‌ی معرفی ES6، در این مقاله با شیوه‌‌ای جدید برای تعریف توابع که به arrow function معروف است آشنا می‌شویم که قابلیت‌های کوچک و بزرگ زیادی را برای ما فراهم می‌کند. در ادامه هم با شیوه‌ی جدیدی برای فرستادن آرگومان‌ها و همچنین شیوه‌ی جدیدی برای جابجایی متغیرها آشنا می‌شویم.

arrow function

همانطور که در مقاله‌های قبل هم اشاره شد، ES6 کار کدنویسی را بسیار ساده‌تر کرده و در عین حال قابلیت‌هایی را به جاوااسکریپت آورده است که نیاز آن‌ها به شدت احساس می‌شد. arrow function هم از این قاعده مستثنی نیست. ولی اول از همه ببینیم که این نوع تابع به چه شکل تعریف می‌شود:

// ES5
var myFunc = function() {
	console.log('Normal Function');
};

// ES6
const myFunc = () => {
	console.log('Arrow Function');
};

myFunc();

در ساده ترین حالت، function() را برمی‌داریم و به جای آن () => قرار می‌دهیم.

مثالی ببینیم از زمانی که می‌توانیم این دستور زبان را به صورت خلاصه‌تر بنویسیم. اگر در ES5 می‌خواستیم تابعی را به عنوان آرگومان به تابع دیگری بفرستیم از دستور زبان زیر استفاده می‌کردیم:

function anonCall(func) {
	var num = 4;
	num = func(num);
	console.log(num);
}

anonCall(function(num) {
	return num + 1;
});

احتمالا می‌توانید حدس بزنید همین کد با ES6 به شکل خواهد شد. کلمه‌ی کلیدی function را برمی‌داریم و همچنین بعد از پرانتزها علامت => را قرار می‌دهیم.

function anonCall(func) {
	var num = 4;
	num = func(num);
	console.log(num);
}

anonCall((num) => {
	return num + 1;
});

اگر همین دستور را بخواهیم به صورت خلاصه بنویسیم به صورت زیر می‌شود:

function anonCall(func) {
	var num = 4;
	num = func(num);
	console.log(num);
}

anonCall(num => num + 1);

• چون فقط یک آرگومان داشتیم، پرانتزها را برداشتیم(دقت کنید که اگر بیش از یک آرگومان داشتیم و یا اصلا آرگومانی نداشتیم نمی‌توانستیم پرانتزها را حذف کنیم).
• چون فقط یک دستور داشتیم که اجرا کنیم، آکولادها را برداشتیم. در این حالت کلمه‌ی کلیدی return را نیز حذف می‌کنیم. و در آخر سمیکالن را نیز حذف می‌کنیم.

با اجرای قواعد بالا دیدیم که تابعی که نوشتیم چقدر ساده‌تر و قابل فهم‌تر شد.

اما قابلیت‌های arrow function به همینجا ختم نمی‌شود و هنوز یک مورد از بهترین قابلیت‌های آن باقی مانده است. قابلیتی که در ادامه میخواهیم معرفی کنیم مربوط به scope توابع می‌شود. مثال زیر را ببینید:

function one() {
	this.num = 0;

	setTimeout(function() {
		this.num++;
		console.log('ES5', this.num);
	}, 200);
}	

var o = new one();

در این کد در خط ۵ و ۶ نمی‌توانیم به مقدار this.num که در خط ۲ تعریف کردیم دسترسی داشته باشیم، به این خاطر که this در خط ۵ و ۶ مربوط به همین تابعی هست به عنوان آرگومان به setTimeout دادیم. قبلا برای رفع این مشکل از روش زیر استفاده می‌کردیم:

function one() {
	this.num = 0;
	that = this;

	setTimeout(function() {
		that.num++;
		console.log('ES5', that.num);
	}, 200);
}	

var o = new one();

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

اما رفع مشکل قبلی با استفاده از arrow function به راحتی امکان‌پذیر است و پیچیدگی مثال بالا را ندارد. مثال زیر را ببینید:

function one() {
	this.num = 0;

	setTimeout(() => {
		this.num++;
		console.log('ES5', this.num);
	}, 200);
}	

var o = new one();

فقط اگر به جای تابع معمولی از arrow function استفاده کنیم، به راحتی می‌توانیم به this دسترسی داشته باشیم. نکته‌ی این قضیه در این است که arrow function به صورت جداگانه برای خودش this تعریف نمی‌کند و از همان this که مربوط به والدش هست استفاده می‌کند.

Rest

قابلیت اصلی که rest در اختیار ما قرار می‌گذارد این است که هر تعداد آرگومان که خواستیم بتوانیم به تابع بفرستیم. مثال زیر را ببینید:

function one(x, y, z) {
	console.log(x+y+z);
}

one(1, 2, 3, 4);

در این حالت ما به هیچ وجه به آرگومان چهارمی که برای تابع فرستادیم دسترسی نداریم. برای رفع این مشکل می‌توانیم تعریف تابع را به این شکل تغییر دهیم:

function one(x, y, z, ...o) {
	var sum = x + y + z;

	for (var i = 0; i < o.length; i++) {
		sum += o[i];
	}

	console.log(sum);
}

one(1, 2, 3, 4, 5);

در این مثال …o(سه نقطه و بعد از آن اسم آرایه) را به عنوان آرگومان چهارم تعریف کردیم. یعنی به غیر از ۳ آرگومان اول، هر تعداد آرگومان دیگر که دریافت کردیم در آرایه‌ی o قرار بگیرد. در تابع هم با یک حلقه‌ی for به تک تک این آرگومان‌ها دسترسی پیدا می‌کنیم.

توجه کنید که در این مثال وارد کردن حداقل سه آرگومان اجباری است. اگر بخواهیم کلا تعداد آرگومان‌ها را اختیاری کنیم می‌توانیم کد بالا را به شکل زیر تغییر دهیم:

function one(...o) {
	var sum = 0;

	for (var i = 0; i < o.length; i++) {
		sum += o[i];
	}

	console.log(sum);
}

one(1, 2, 3, 4, 5);

Spread

کار Spread از یک دید تقریبا برعکس کاری است که Rest می‌کند. با استفاده از Rest مجموعه‌ای از خانه‌ها را در یک آرایه قرار می‌دادیم؛ با استفاده از Spread آرایه را به مجموعه‌ای از خانه‌ها تبدیل می‌کنیم. مثال زیر را ببینید تا کاربرد Spread واضح‌تر شود:

function one(x, y, z) {
	console.log(x+y+z);
}

var a = [1, 2, 3]
one(...a);

به جای اینکه تک تک خانه‌های آرایه‌ی a را به عنوان آرگومان بفرستیم، …a را فرستادیم و اجازه دادیم این کار را Spread برای ما انجام دهد. در این مثال خانه‌ی a[0] در متغیر x قرار می‌گیرد.

کاربرد Spread به همین‌جا ختم نمی‌شود و این توانایی را می‌توانیم در ترکیب آرایه‌ها نیز به کار ببریم. مثال زیر را ببینید:

var a = ["a", "b", "c", "d"];
var b = [...a, "e", "f", "g"]; // a b c d e f g
console.log(b);

با نوشتن …a تک تک خانه‌های آرایه‌ی a را وارد آرایه‌ی b کردیم.

این‌ها تنها قسمتی از توانایی‌های این سه بخش هستند که کاربرد بیشتری دارند. برای اطلاع از ویژگی‌های دیگر آن‌ها می‌توانید کلمات arrow function، spread، rest را در اینترنت جستجو کنید و از مستندات سایت mozilla استفاده کنید.