یکی از مهم‌ترین مباحث آموزشی که در دوره‌های آموزش جاو اسکریپت بسیار مورد توجه قرار می‌گیرد، توابع Arrow یا تابع پیکان است؛ به زبان ساده تابع Arrow در جاوا اسکریپت راه سریع‌تری برای نوشتن توابع محسوب می‌شود.

آن‌ها مانند میانبرهایی برای نوشتن توابع کوچک عمل می‌کنند و بسیار مفید به‌حساب می‌آیند زیرا مختصر و قابل‌درک هستند؛ به علاوه، آن‌ها به طور خودکار به زمینه اجرایی کد متصل می‌شوند که این قابلیت می‌تواند بسیار مفید باشد.

در مطلب پیش رو از مجله سبزلرن می‌خواهیم که مفهوم و رسالت تابع Arrow در جاوا اسکریپت را با رویکردی عملی مورد بررسی قرار دهیم تا بتوانیم در انجام کارهای کدنویسی بهترین استفاده را از این تابع ببریم.

تابع Arrow در جاوا اسکریپت چیست؟

هنگامی که می‌خواهید نوعی تابع در جاوا اسکریپت ایجاد کنید، روش سنتی استفاده از کلمه کلیدی function به دنبال نام تابع است که مثال زیر بیانگر این موضوع است:

function greetings(name) {
  console.log(`Hello, ${name}!`);
}

greetings('John'); // Hello, John!

کد فوق نوعی تابع استاندارد جاوا اسکریپت به نام greetings است. سینتکس تابع پیکان راهی جایگزین برای ایجاد عبارت تابع با همان عملکرد فراهم می‌کند. در قطعه کد زیر دوباره تابع greetings را با همان عملکرد اما با رویکرد توابع پیکان در جاوا اسکریپت ایجاد می‌کنیم:

const greetings = name => {
  console.log(`Hello, ${name}!`);
};

greetings('John'); // Hello, John!

کد بالا از یک تابع پیکان برای رسیدن به همان نتیجه تابع سنتی استفاده می‌کند. وقتی تابعی را با استفاده از دستور تابع پیکان تعریف می‌کنید، در واقع اعلان را به متغیری اختصاص می‌دهید. به مثال زیر دقت کنید:

const myFunction = (param1, param2, ...) => {
  // function body
}

در مثال بالا، myFunction متغیر نگهدارندِه تابع است. می‌توانید آن را بعداً در کد خود با استفاده از myFunction فراخوانی کنید.

همچنین (param1, param2, …) پارامترهای تابع را نشان می‌دهد. شما می‌توانید به تعداد پارامترهای موردنیاز تعریف کنید.

از طرفی دیگر پیکان => نشان‌دهنده شروع تابع و بدنه تابع در داخل پرانتزهای {} است. اگر تابع از یک خط تشکیل‌شده است، می‌توانید {} را حذف کنید.

اگرچه سینتکس تابع Arrow در جاوا اسکریپت ممکن است در ابتدا ناآشنا به نظر برسد اما با تمرین و تکرار کار با آن طبیعی‌تر می‌شود. این نوع سینتکس روشی مختصر و راحت برای تعریف توابع در جاوا اسکریپت ارائه می‌دهد. در بخش بعد، روشی آسان برای تبدیل تابع معمولی به تابع پیکان را خواهیم آموخت.

تبدیل تابع معمولی به تابع پیکان در جاوا اسکریپت

تبدیل تابع معمولی به تابع Arrow در جاوا اسکریپت کاری ساده است و در سه مرحله آسان انجام می‌شود:

1. کلمه کلیدی function را با کلمه کلیدی const جایگزین کنید.
2. نماد = را بعد از نام تابع و قبل از پرانتز اضافه کنید.
3. علامت => را بعد از پرانتز درج کنید.

در بیشتر موارد، توابع فقط یک بار اعلام می‌شوند و هرگز بعداً تغییر نمی‌کنند، بنابراین به جای let از کلمه کلیدی const استفاده می‌کنیم. بیایید این مراحل را با مثالی بررسی کنیم:

function greetings(name) {
  return `Hello, ${name}!`;
}

// Step 1: Replace function with const
const greetings(name) {
  return `Hello, ${name}!`;
}

// Step 2: Add = after the function name
const greetings = (name) {
  return `Hello, ${name}!`;
}

// Step 3: Add => after the parentheses
const greetings = (name) => {
  return `Hello, ${name}!`;
}

با پیروی از سه مرحله نام برده، هر تابع در زبان برنامه نویسی جاوا اسکریپت معمولی به نوعی تابع پیکان تبدیل می‌شود. علاوه بر این، اگر تابع شما فقط از یک خط تشکیل‌شده است، می‌توان با حذف براکت‌های {} و کلمه کلیدی return آن را ساده‌تر کنید، مانند این:

// From this
const greetings = (name) => {
  return `Hello, ${name}!`;
};

// To this
const greetings = (name) => `Hello, ${name}!`;

و اگر تابع شما فقط یک پارامتر دارد، می‌توانید پرانتزهای اطراف پارامتر را حذف کنید، مانند مثال زیر:

// From this
const greetings = (name) => `Hello, ${name}!`;

// To this
const greetings = name => `Hello, ${name}!`;

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

اهمیت و دلایل استفاده از توابع Arrow در جاوا اسکریپت

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

1 | سادگی برای توابع کوتاه

 تابع Arrow در جاوا اسکریپت به شما امکان می‌دهد توابع کوتاه را ساده‌تر بنویسید. به عنوان مثال، تابعی را در نظر بگیرید که یک رشته را با استفاده از کلمه کلیدی function در کنسول چاپ می‌کند:

function greetings(name) {
  console.log(`Hello, ${name}!`);
}

با توابع پیکان، می‌توانید با حذف براکت‌های {}، آن را کوتاه‌تر کنید:

const greetings = (name) => console.log(`Hello, ${name}!`);

اگر فقط یک پارامتر دارید، می‌توانید از پرانتز نیز صرف‌نظر کنید:

const greetings = name => console.log(`Hello, ${name}!`);

برای توابع بدون پارامتر، پرانتزهای خالی را وارد کنید:

const greetings = () => console.log(`Hello, World!`);

2 | سینتکس تمیز برای توابع چند خطی

توابع پیکان فقط زمانی از براکت‌های {} استفاده می‌کنند که تابع چندین خط را در برمی‌گیرد مانند مثال زیر:

const greetings = () => {
  console.log('Hello World!');
  console.log('How are you?');
};

توابع معمولی همیشه به براکت‌های {} نیاز دارند، حتی برای عبارات تک خطی.

3 | سودمندی در Callbacks و IIFEs

 تابع Arrow در جاوا اسکریپت برای پاسخ به تماس‌ها و عبارات تابع فوری فراخوانی شده (IIFE) مفید هستند. برای مثال، سینتکسی را برای پیمایش آرایه با استفاده از حلقه forEach در جاوا اسکریپت مقایسه کنید:

myArray.forEach(function (item) {
  console.log(item);
});

// With arrow function:
myArray.forEach(item => console.log(item));

به طور مشابه، برای IIFE ها:

(function () {
  console.log('Hello World');
})();

// With arrow function:
(() => console.log('Hello World'))();

توابع پیکان کد شما را ساده‌تر کرده و آن را تمیزتر و مختصرتر می‌کنند و این قابلیت مخصوصاً برای توابع کوتاه، تماس‌های برگشتی و IIFE ها بسیار مفید واقع خواهند شد.

4 | توابع پیکان و اعلامیه‌های بازگشتی ضمنی

توابع Arrow در جاوا اسکریپت زمانی که تابعی تک خطی دارید به طور خودکار نوعی عبارت بازگشتی اضافه می‌کنند و اساساً لازم نیست کلمه کلیدی return را به صراحت وارد کنید. به عنوان مثال، تابعی را در نظر بگیرید که دو عدد را با استفاده از سینتکس تابع سنتی با هم جمع می‌کند:

function sum(a, b) {
  return a + b;
}

هنگام استفاده از توابع پیکان، می‌توانید با حذف براکت‌های {} و کلیدواژه return، آن را مختصرتر کنید:

const sum = (a, b) => a + b;

اگر به اشتباه کلمه کلیدی بازگشتی را وارد کنید، جاوا اسکریپت نوعی خطا ایجاد می‌کند زیرا انتظار دارد یک براکت باز شود. در توابع پیکان چند خطی، جایی که شما بیش از یک دستور دارید، باید عبارت return را به صراحت وارد کنید:

const sum = (a, b) => {
  const result = a + b;
  return result;
};

فقط به یاد داشته باشید، وقتی براکت‌های {} را حذف می‌کنید، مطمئن شوید که کلمه کلیدی return را نیز در صورت عدم نیاز حذف می‌کنید.

برخورد تابع Arrow در جاوا اسکریپت با کلمه کلیدی this

توابع پیکان، کلمه کلیدی this در جاوا اسکریپت را در مقایسه با توابع معمولی متفاوت مدیریت می‌کنند. در تابع معمولی، this به شیئی اشاره دارد که تابع را از آن فراخوانی می‌کنید. با این حال، در تابع پیکان، this به شیئی که تابع را از آن تعریف می‌کنید، اشاره دارد. بیایید این مفهوم را با مثالی که شامل نوعی شی به نام person می‌شود، توضیح دهیم:

const person = {
  name: 'Nathan',
  skills: ['HTML', 'CSS', 'JavaScript'],

  showSkills() {
    this.skills.forEach(function (skill) {
      console.log(`${this.name} is skilled in ${skill}`);
    });
  },
};

person.showSkills();

با استفاده از تابع معمولی در داخل حلقه forEach، اگر کد را اجرا کنید، خروجی به صورت زیر خواهد بود:

undefined is skilled in HTML
undefined is skilled in CSS
undefined is skilled in JavaScript

این اتفاق به این دلیل می‌افتد که this به شیء جهانی Window اشاره می‌کند، جایی که ویژگی  name تعریف نشده است زیرا showSkills را خارج از شی person فراخوانی کردیم. حالا بیایید همین کد را با استفاده از دستور تابع Arrow در جاوا اسکریپت بازنویسی کنیم:

const person = {
  name: 'Nathan',
  skills: ['HTML', 'CSS', 'JavaScript'],

  showSkills() {
    this.skills.forEach(skill => {
      console.log(`${this.name} is skilled in ${skill}`);
    });
  },
};

person.showSkills();

با اجرای دوباره کد، خروجی به صورت زیر خواهد بود خواهد بود:

Nathan is skilled in HTML
Nathan is skilled in CSS
Nathan is skilled in JavaScript

در کد بالا، this همان‌طور که انتظار می‌رود به شی person اشاره دارد. این رفتار یکی از دلایلی است که چرا برنامه نویسان توابع پیکان را به توابع معمولی ترجیح می‌دهند. توابع پیکان از توابع معمولی شهودی‌تر و درک آن‌ها آسان‌تر است.

چه زمانی نباید از توابع پیکان در جاوا اسکریپت استفاده کنید؟

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

const person = {
  name: 'Nathan',
  skills: ['HTML', 'CSS', 'JavaScript'],

  showSkills: () => {
    this.skills.forEach(skill => {
      console.log(`${this.name} is skilled in ${skill}`);
    });
  },
};

person.showSkills();

اگر کد بالا را اجرا کنید، با خطای زیر مواجه می‌شود:

TypeError: Cannot read properties of undefined (reading 'forEach')

پیام خطا نشان‌دهنده وجود مشکل در تابع Arrow در جاوا اسکریپت است.

هنگام تعریف متدها در داخل یک شی، کلمه کلیدی this باید به شی فعلی اشاره کند. با این حال، با توابع پیکان، this به جای آن به شی سراسری اشاره دارد. در نتیجه، ویژگی skills در زمینه جهانی تعریف نشده است. به طور خلاصه، برای جلوگیری از چنین مسائلی، از استفاده از توابع پیکان در هنگام اعلام متدهای شی اجتناب کنید.

مثالی از توابع پیکان در جاوا اسکریپت بدون پارامتر

در زیر مثالی از تابع Arrow در جاوا اسکریپت بدون هیچ پارامتری آورده شده است:

const sabz = () => {
    console.log( "Hi from Sabzlearn!" );
}
gfg();

اولین خط نوعی ثابت جدید به نام sabz را اعلام می‌کند و تابع پیکان به آن اختصاص می‌دهد. تابع پیکان هیچ پارامتری ندارد و با پرانتز خالی () نشان داده شود.

const sabz = () => {

در داخل بدنه تابع پیکان، عبارت console.log وجود دارد که پیام Hi from Sabzlearn! را در کنسول چاپ می‌کند.

در نهایت، تابع با استفاده از سینتکس sabz فراخوانی می‌شود:

gfg();

هنگامی که این کد اجرا می‌شود، خروجی آن به شرح زیر است:

Hi from Sabzlearn!

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

مثالی از تابع Arrow در جاوا اسکریپت با پارامتر

در اینجا مثالی از تابع پیکان در جاوا اسکریپت با پارامترها آورده شده است: