Arrow Function در جاوا اسکریپت چیه

آیا به تازگی با جاوا اسکریپت شروع به کار کردید و کد می زنید و نمی دانید Arrow Function ها چی هستند؟ آیا تعداد زیادی Arrow Function در code base تیم خود می بینید و متوجه نمی شوید که چه کاری انجام می دهند؟تبریک میگم شما مقاله ای رو قراره بخونید که arrow functions ها رو کامل درک می کنید و یاد می گیرید که چه کاری انجام می دهند.

Arrow functions در استاندارد ES6 چندین سال قبل معرفی شد.بلافاصله بعد از معرفی خیلی ها شروع به استفاده از اون کردند.Arrow functions در نوشتن توابع مختصر کمک خوبی به ما میکند.

بیایید به چندین مثال زیر توجه کنیم تا arrow functions ها در جاوا اسکریپت رو درک کنیم و یاد بگیریم.

مزایا

چرا جاوا اسکریپت به arrow function ها نیاز دارد

1.خلاصه، مختصر و کوتاه

به مثال زیر که یک تابع معمولی و بدون arrow functions است، توجه کنید

// Regular function without arrow
function myFunction (a) {
 return (a * 5);
}
// Call function
myFunction(10)
//50

// Regular function without arrow

function myFunction (a) {

return (a * 5);

}

// Call function

myFunction(10)

//50

همین مثال ساده کافی است.حالا بیایید از arrow functions به جای تابع معمولی استفاده کنیم و ببینیم چه تغییراتی ایجاد شده است.

var myFunction = (a) => a * 5
// Call function
myFunction(10)
//50

var myFunction = (a) => a * 5

// Call function

myFunction(10)

//50

کوتاه تر.یکی از مزایا اصلی arrow functions اینه که ما کمتر کد می زنیم.

2.this binding جداگانه ندارد

قبل از معرفی arrow functions مفهوم this در جاوا اسکریپت خیلی گیج کننده بود.arrow function کمک می کند تا میزان گیج کنندگی this کاهش پیدا کند.در arrow functions کلمه کلیدی this به صورت صریح bound نمی شود.به جای اون به صورت ضمنی bound می شود.بیایید به مثال زیر نگاه کنیم تا معنی این چند جمله رو متوجه بشیم.

Mozilla developer’s guide مثال های خوبی برای arrow functions دارد.در مثال زیر ما یک تابع Person() با پارامتر age داریم.ما قصد داریم مقدار age رو در تابع growUp() هر یک ثانیه یک واحد افزایش بدیم.این تابع به عنوان پارامتر به setInterval() پاس داده می شود.

تا قبل استفاده از arrow function هر تابع this value رو بر اساس اینکه چگونه فراخوانی می شود، تعریف می کند.

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `that` variable of which
    // the value is the expected object.
    that.age++;
  }, 1000);
}

function Person() {

var that = this;

that.age = 0;

setInterval(function growUp() {

// The callback refers to the `that` variable of which

// the value is the expected object.

that.age++;

}, 1000);

}

حالا اگر ما این مثال رو با ES6 arrow function جایگزین کنیم چه اتفاقی می افتد.arrow function در واقع this مربوط به خود را ندارد.this value در enclosing lexical scope استفاده شده است.بنابراین زمانی که در حال جستجوی this است که در scope فعلی پیدا نشده است، تصمیم می گیرد که this را از enclosing scope خود پیدا کند.این کار باعث می شود تا کد خواناتر و مختصرتر شود.بیایید یک نگاه بندازیم که چطور این مثال با arrow functions بازنویسی شده است.

آموزش مقدماتی تا پیشرفته جاوا اسکریپت (javascript) - کاملا پروژه محور

اما شاید این سوال در ذهن شما به جود اومده باشه که lexical scope چیه؟

Lexical scoping در جاوا اسکریپت در جایی استفاده می شود که متغیر declared شده باشد و همچنین مشخص می کند که متغیر در چه جاهایی در دسترس است.

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the Person object
  }, 1000);
}

var p = new Person();

function Person(){

this.age = 0;

setInterval(() => {

this.age++; // |this| properly refers to the Person object

}, 1000);

}

var p = new Person();

توجه کنید که در اینجا setInterval() به عنوان یک پارامتر ناشناخته arrow function را می گیرد.

Arrow Functions syntax

بهتره که برای درک بهتر arrow function از مثال های متفاوتی استفاده کنیم.

Single Parameter

شما می توانید single parameter رو در arrow function به صورت زیر پاس بدید.گذاشتن پرانتز اختیاری است.

var myFunction = (a) => a + 10
// alternate without parentheses
var myFunction = a => a + 10

var myFunction = (a) => a + 10

// alternate without parentheses

var myFunction = a => a + 10

Multiple Parameters

مشابه تمامی توابع، arrow functions ها می توانند چندین پارامتر به عنوان آرگومان بگیرند.چون ما بیشتر از یک پارامتر رو به تابع پاس دادیم استفاده از پرانتز الزامی است.

var myFunction = (a, b) => a + b

1	var myFunction = (a, b) => a + b

No Parameters

شمامی تونید همچنین arrow functions رو بدون پارامتر به صورت زیر بنویسید.

var myFunction = () => 5 + 10

1	var myFunction = () => 5 + 10

Function Body

Arrow functions می توانند یک بدنه خیلی کوتاه تر داشته باشند بدون هیچ braces یا اینکه بدنه آنها مشابه توابع معمولی باشد.نکته در این است که اگر از braces استفاده شود، تابع به یک return statement نیاز دارد.

// concise body syntax, implied "return"
var myFunction = a => a * 5             

// with block body, explicit "return" needed
var func = (a) => { 
 return a * 5; 
}

// concise body syntax, implied "return"

var myFunction = a => a * 5

// with block body, explicit "return" needed

var func = (a) => {

return a * 5;

}

Line Breaks

زمانی که شما از arrow functions استفاده می کنید مراقب line breaks باشید.گاهی اوقات ممکن است منجر به syntax error شود.

var myFunction = (a, b)
=> a+5
// SyntaxError: expected expression, got '=>'

var myFunction = (a, b)

=> a+5

// SyntaxError: expected expression, got '=>'

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

var func = (
  a,
  b
) => (
  a + 5
); 
// no SyntaxError thrown

var func = (

) => (

a + 5

);

// no SyntaxError thrown

در حالی که در مثال بالا با line breaks ما هیچ syntax error ای دریافت نکردیم.

مشکلات و معایب Arrow Functions

هر چیزی یک سری مزایا و در مقابل معایبی دارد.تا اینجا ما در مورد مزایا و نحوه نوشتن arrow functions صحبت کردیم و در ادامه در مورد معایب و مشکلاتی که ممکن به وجود بیاره بحث خواهیم کرد.

Debugging راحت نیست

Arrow functions ناشناخته هستند(توابعی که نام ندارند).این بدان معنی است که زمانی که در حال رفع یک مشکل هستید، اشکال زدایی برای شما سخت می شود.اگر توابع دارای نام باشند اشکال زدایی راحت تر است.توابع بدون نام فقط پیچیدگی این کار را زیاد می کنند.

خوانایی کاهش می یابد

اگرچه arrow functions باعث می شوند تا کد کوتاه تر و مختصر تر شود اما الزاما باعث نمی شود که خوانایی افزایش پیدا کند.بیشتر برنامه نویسان از توابع معمولی و قدیمی استفاده می کنند در حالی که arrow function ها کاملا شکل توابع رو عوض کرده است.این کار خواندن کد را دشوار میکند و کسی که به ساختار قبلی عادت کرده است شاید این سبک جدید کمی برای خواندن سخت باشد.

نتیجه گیری

Arrow functions برای استفاده خوب هستند.باعث می شوند تا شما کمتر کد بزنید و کدها مختصر تر باشند.البته گاهی اوقات ممکن است باعث شود تا در debug کمی به مشکل به خورید.بیشتر از این چیزی که ما در این مقاله در موردش صحبت کردیم مواردی در مورد arrow functions وجود داره.اما ما سعی کردیم که مفاهیم اولیه و اساسی برای شروع رو به صورت کامل بیان کنیم.اگر این مطلب برای شما مفید بود لطفا با دیگران این مطلب رو به اشتراک بزارید .همچنین اگر قصد دارید به عنوان متخصص جاوا اسکریپت وارد بازار کار شوید،پیشنهاد میکنم دوره آموزشی متخصص جاوا اسکریپت (javascript) را مشاهده کنید

Arrow Function در جاوا اسکریپت چیه

مزایا

1.خلاصه، مختصر و کوتاه

2.this binding جداگانه ندارد

Arrow Functions syntax

Single Parameter

Multiple Parameters

No Parameters

Function Body

Line Breaks

مشکلات و معایب Arrow Functions

Debugging راحت نیست

خوانایی کاهش می یابد

نتیجه گیری

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مزایا

1.خلاصه، مختصر و کوتاه

2.this binding جداگانه ندارد

Arrow Functions syntax

Single Parameter

Multiple Parameters

No Parameters

Function Body

Line Breaks

مشکلات و معایب Arrow Functions

Debugging راحت نیست

خوانایی کاهش می یابد

نتیجه گیری

مطالب زیر را حتما مطالعه کنید

آموزش کار با timing event ها

معرفی DOM به زبان ساده

constructor function در جاوااسکریپت

factory function در جاوا اسکریپت

this در جاوا اسکریپت (JavaScript)

تفاوت for in و for of

دیدگاهتان را بنویسید لغو پاسخ