تفاوت arrow function با regular function در جاوا اسکریپت

فانکشن Arrow یه ویژگی جدید هستش که ES6 معرفی شد و شکلی مختصر برای نوشتن فانکشن ها در جاوا اسکریت هست. هر چند arrow فانکشن ها و فانکشن های معمولی هر دو کاری یکسان را انجام میدن ولی تفاوت هایی هم با هم دارن، توی این پست میخوایم این تفاوت ها رو بررسی کنیم.

1.سینتکس

فانکشن arrow به ما اجازه میده تا همون توابع معمولی رو با تعداد کد کمتری بنویسیم. کروشه ها دیگه توی دستورات تک خطی نیاز نیستند، به مثال زیر توجه کنید:

let add = (x, y) => x + y;

کد بالا تو آرگومان x و y رو میگیره و جمع اون ها رو توی متغیر add ذخیره میکنه. اگه فقط یه آرگومان داشته باشیم دیگه حتی به پرانتز ها هم نیاز نداریم:

let squareNum = x => x * x;

اگه آرگومان هم نداشته باشیم به این شکله

let sayHi = _ => console.log("hi");
let sayHi = () => console.log("hi"); //حالت دیگه

2. کار با آرگومان ها

فانکشن های arrow نمیتونن در مقدار arguments تغیری ایجاد کنند ولی به آبجکت آرگومان های نزدیکترین تابع non-arrow والدشون دسترسی دارن.

در توابع معمولی داریم:

let myFunc = {  
 showArgs(){ 
  console.log(arguments); 
  } 
}; 
myFunc.showArgs(1, 2, 3, 4);

ولی در توابع arrow:

let myFunc = {  
  showArgs : () => { 
  console.log(...arguments); 
  } 
}; 
myFunc.showArgs(1, 2, 3, 4);

3.کلیدواژه this

بر خلاف توابع معمولی، توابع arrow چیزی به نام this برای خودشون ندارن. مقدار this در این توابع خارج از lifecycle اون تابعه و مربوط میشه به نزدیکترین تابع non-arrow.

4.کلیدواژه new

توابع معمولی قابل فراخوانی و construct هستند و میشه از new برای آن ها استفاده کرد. ولی توابع arrow تنها میتونن فراخونی بشن و نمیشه شیء جدیدی ازشون ساخت، به همین دلیل نمیتوان آن ها را new کرد.

let add = (x, y) => console.log(x + y);new add(2,3);

5. پارامتر ها نمیتونن نام تکراری داشته باشن

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

function add(x, x){}

که البته وقتی از strict mode استفاده کنیم معتبر نخواهد بود:

'use strict';
function add(x, x){}
// SyntaxError: duplicate formal argument x

اما در arrow functions به هیچ عنوان نمیتوانیم از پارامتر هایی با نام یکسان و تکراری استفاده کنیم:

(x, x) => {}
// SyntaxError: duplicate argument names not allowed in this context

منبع :

امیدوارم آموزش بالا واستون مفید باشه، توی کانال تلگرامم آموزش ها و مطالب مفید دیگه ای رو قرار میدم، خوش حال میشم که عضو بشین، ممنون.

کانال تلگرام : https://t.me/modos_dev