مقدمه

در نسخه ۲۰۱۵ استاندارد ECMAScript (ES6)، قابلیت Arrow Function به زبان جاوااسکریپت اضافه شد. Arrow Functionها روشی جدید برای نوشتن توابع ناشناس (Anonymous Functions) هستند و از نظر مفهوم شباهت زیادی به Lambda Functionها در زبان‌هایی مانند Python دارند.

Arrow Functionها در چندین مورد با توابع سنتی جاوااسکریپت تفاوت دارند؛ از جمله نحوه تعیین محدوده (this) و همچنین ساختار نگارشی (Syntax). به همین دلیل، این نوع توابع هنگام ارسال یک تابع به‌عنوان پارامتر برای توابع سطح بالاتر (Higher-Order Functions) مانند map، filter و forEach بسیار کاربردی هستند.

در این مقاله با نحوه تعریف Arrow Function، تفاوت آن با توابع معمولی، مفهوم Lexical Scope و مزایای نگارشی آن آشنا خواهید شد.

تعریف توابع در جاوااسکریپت

قبل از بررسی Arrow Function بهتر است نگاهی به روش‌های سنتی تعریف تابع داشته باشیم.

Function Declaration

تابع‌های Declaration با استفاده از کلمه کلیدی function تعریف می‌شوند:

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

یکی از ویژگی‌های این نوع تابع Hoisting است؛ یعنی قبل از تعریف نیز قابل استفاده هستند:

sum(1, 2);

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

خروجی:

3

Function Expression

در این روش تابع داخل یک متغیر ذخیره می‌شود:

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

برخلاف Function Declaration، این نوع تابع Hoist نمی‌شود:

sum(1, 2);

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

خروجی:

ReferenceError

Arrow Function چیست؟

Arrow Function نسخه کوتاه‌تر و مدرن‌تر Function Expression است.

مثال:

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

یا به شکل خلاصه‌تر:

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

Arrow Functionها:

• Hoist نمی‌شوند.
• همیشه ناشناس هستند.
• Prototype ندارند.
• نمی‌توان از آن‌ها به‌عنوان Constructor استفاده کرد.
• مقدار this را از محیط اطراف به ارث می‌برند.

تفاوت Arrow Function و Function معمولی

1. Lexical this

مهم‌ترین تفاوت Arrow Function نحوه مدیریت this است.

مثال با تابع معمولی

const printNumbers = {
  phrase: "مقدار فعلی:",
  numbers: [1, 2, 3],

  loop() {
    this.numbers.forEach(function(number) {
      console.log(this.phrase, number);
    });
  }
};

printNumbers.loop();

خروجی:

undefined 1
undefined 2
undefined 3

دلیل این اتفاق این است که this داخل تابع forEach به شیء printNumbers اشاره نمی‌کند.

حل مشکل با Arrow Function

const printNumbers = {
  phrase: "مقدار فعلی:",
  numbers: [1, 2, 3],

  loop() {
    this.numbers.forEach((number) => {
      console.log(this.phrase, number);
    });
  }
};

printNumbers.loop();

خروجی:

مقدار فعلی: 1
مقدار فعلی: 2
مقدار فعلی: 3

Arrow Function مقدار this را از محیط اطراف دریافت می‌کند.

استفاده در متدهای آرایه

Arrow Function بیشترین کاربرد را در متدهای آرایه دارد.

map()

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(num => num * 2);

console.log(doubled);

خروجی:

[2, 4, 6, 8]

filter()

const numbers = [1, 2, 3, 4, 5];

const even = numbers.filter(num => num % 2 === 0);

console.log(even);

خروجی:

[2, 4]

reduce()

const numbers = [1, 2, 3, 4];

const total = numbers.reduce(
  (sum, current) => sum + current,
  0
);

console.log(total);

خروجی:

10

چرا Arrow Function برای Object Method مناسب نیست؟

گاهی توسعه‌دهندگان اشتباه می‌کنند و متدهای آبجکت را با Arrow Function تعریف می‌کنند.

const user = {
  name: "Ali",

  sayName: () => {
    console.log(this.name);
  }
};

user.sayName();

خروجی:

undefined

زیرا Arrow Function یک this مستقل ایجاد نمی‌کند و از Scope بیرونی استفاده می‌کند.

روش صحیح:

const user = {
  name: "Ali",

  sayName() {
    console.log(this.name);
  }
};

Arrow Function و Constructor

توابع معمولی می‌توانند به‌عنوان Constructor استفاده شوند:

function User(name) {
  this.name = name;
}

const user = new User("Ali");

اما Arrow Function چنین قابلیتی ندارد:

const User = (name) => {
  this.name = name;
};

const user = new User("Ali");

خروجی:

TypeError: User is not a constructor

Prototype در Arrow Function

تابع‌های معمولی دارای Prototype هستند:

function test() {}

console.log(test.prototype);

خروجی:

{ constructor: ƒ }

اما Arrow Function فاقد Prototype است:

const test = () => {};

console.log(test.prototype);

خروجی:

undefined

بازگشت ضمنی (Implicit Return)

در Arrow Function می‌توانید return را حذف کنید.

حالت معمولی

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

حالت خلاصه

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

بازگرداندن Object

برای بازگرداندن Object باید آن را داخل پرانتز قرار دهید:

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

console.log(sum(1, 2));

خروجی:

{ result: 3 }

حذف پرانتز برای یک پارامتر

اگر فقط یک پارامتر داشته باشید، پرانتز اختیاری است.

const square = x => x * x;

console.log(square(10));

خروجی:

100

بدون پارامتر

اگر تابع پارامتری نداشته باشد، پرانتز الزامی است:

const greet = () => "Hello";

console.log(greet());

خروجی:

Hello

چه زمانی از Arrow Function استفاده کنیم؟

✅ برای:

• map()
• filter()
• reduce()
• forEach()
• Callbackها
• Promiseها
• Async/Await

❌ برای:

• Constructorها
• Object Methodها
• توابعی که به this مستقل نیاز دارند

جمع‌بندی

Arrow Function یکی از مهم‌ترین قابلیت‌های ES6 است که کدنویسی را کوتاه‌تر، خواناتر و مدرن‌تر می‌کند. مهم‌ترین تفاوت آن با توابع سنتی، نحوه مدیریت this از طریق Lexical Scope است. همچنین با قابلیت‌هایی مانند Implicit Return و حذف پرانتزها، نوشتن Callbackها و عملیات روی آرایه‌ها را بسیار ساده‌تر می‌کند. با این حال، برای متدهای آبجکت و Constructorها همچنان بهتر است از توابع معمولی استفاده شود.

از همراهی شما با پارمین کلود سپاسگزاریم.