تفاوت های Arrow Function و Normal Function در javascript

تفاوت عمده ای که در نگاه اول دیده میشه تفاوت سینتکس هست ؛ میدانیم که Normal function  در ES5 بوده و استفاده میشده و اما Arrow function در ES6 به بعد به جاوا اسکریپت اضافه شده است .

اما این موضوع ها را میدانستیم. بپردازیم به تفاوت های ساختاری این دو :

۱- نحوه تعریف:

 در arrow function شما میتوانید با نوشتن تکه خط های کوتاه تر به جواب مد نظر برسید. حتی در تعیین آرگومان های ورودی هم میتوان این خلاصه نویسی را داشت .
و در انتهای آن شما میتونید هیچ آرگومانی نداشته باشید . و از این سینتکس استفاده کنید.

۲- تفاوت در اتصال (bind) کردن آرگومان ها :‌ اگر نمیدانید آبجکت arguments چی هست من برای شما به صورت خلاصه میگویم ؛ این یک آبجکت یک شی از تمام آرگومان های ورودی فانکشن شما هست به هر مقدار که آرگومان داشته باشید می توانید در یک آبجکت ببینید . که در arrow function به آن دسترسی ندارید و با این خطا مواجه می شوید :‌ Uncaught ReferenceError: arguments is not defined

۳- اشاره به آبجکت جاری یا همان this :

شما در normal function دسترسی به آبجکت جاری دارید و میتوانید از آن استفاده کنید ولی در arrow function دسترسی شما محدود می باشد.البته فقط در addEventListener

آیا میدانید مدرسه پرنیان، کلاس طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟

۴- استفاده از کلمه کلید New :

توابع معمولی که با عبارت function ایجاد می‌شوند، قابل ساخت(construct) و فراخوانی هستند. پس می‌توان آن‌ها را با استفاده از کلمه کلیدی new فراخوانی کرد. و می توان نمونه ای از آن را کپی کرد اینستنس آبجکت از آن داشت . اما توابع arrow فقط قابل فراخوانی هستند و قابلیت ساخته شدن ندارند، یعنی این توابع هرگز نمی‌توانند به عنوان توابع سازنده(constructor) مورد استفاده قرار بگیرند. پس نمی‌توان آن‌ها را با کلمه کلیدی new فراخوانی کرد.

۵- استفاده از پارامتر ها با نام های تکراری : 

در حالت معمول این موضوع مشکلی پیش نمیاره چون ورودی ها شماره دارن و میتوان با اینستنس به آنها دسترسی پیدا کرد در هر دو سینتکس . اما در حالت ‘use strict’ یا همان حالت سخت گیرانه شما در normal function نباید نام های آرگومان های ورودی یکسان باشند ؛ اما در arrow function شما در حالت سختگیرانه و غیر آن هر دو غیر قابل استفاده و نا معتبر می باشند.

۶– مرتبه اجرا یا function hoisting ‌:  در normal function شما از قابلیت اجرا قبل از ساختن یا همان hoisting میتوانید استفاده کنید ؛ اما در arrow function شما از این امکان محدود می شوید . به این دلیل که در جاوا اسکریپت رفرنس یک فانکشن و متغیر متفاوت می باشد .

۷- استفاده از متد در کلاس کامپوننت :‌

به صورت دیفالت شما در normal function به متد ها جاوا اسکریپت دسترسی دارید که در بالا به ان اشاره کرده بودم . اما این ها کجا استفاده دارند ؟ 

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

منبع :‌ GeeksForGeeks normal vs arrow function

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

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه طراحی سایت پرنیان این مقاله را تهیه کرده است.