56- آموزش جاوااسکریپت | Arrow Functions در جاوااسکریپت (ES6)

در این بخش، به یکی از مهم‌ترین ویژگی‌های استاندارد ES6 می‌پردازیم: Arrow Functions یا توابع پیکانی. این توابع نه تنها کدهای ما را خلاصه‌تر و زیباتر می‌کنند، بلکه با معرفی مفهوم Lexical This (که در ادامه به آن اشاره خواهیم کرد)، مدیریت دامنه (Scope) را بسیار ساده‌تر می‌سازند.

ساختار و تبدیل توابع معمولی به Arrow Functions

فرض کنید یک تابع معمولی به شکل زیر داریم:

const sayHello = function() {
  console.log('Hello');
}

برای تبدیل این تابع به Arrow Function، کافی است کلمه کلیدی function را حذف کرده و از علامت پیکان => استفاده کنیم:

const sayHello = () => {
  console.log('Hello');
}

خلاصه نویسی (One-Line Functions)

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

const sayHello = () => console.log('Hello');

همین قاعده برای return نیز صادق است. اگر تابع شما فقط یک مقدار را برمی‌گرداند، دیگر نیازی به نوشتن کلمه کلیدی return نیست:

const sayHello = () => 'Hello';

نکته مهم: بازگرداندن آبجکت (Object Literals)

اگر قصد دارید یک آبجکت را به صورت مستقیم بازگردانید، باید آن را داخل پرانتز () قرار دهید؛ در غیر این صورت جاوااسکریپت تصور می‌کند که آکولادها مربوط به بدنه تابع هستند:

// اشتباه (undefined برمی‌گرداند)
const getObj = () => { message: 'Hello' };

// صحیح
const getObj = () => ({ message: 'Hello' });

پارامترها در Arrow Functions

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

// تک پارامتر
const sayHello = name => console.log(`Hello ${name}`);

// چند پارامتر
const sayHello = (firstName, lastName) => console.log(`Hello ${firstName} ${lastName}`);

کاربرد در Callbacks (مانند map)

Arrow Functions در متدهایی مانند .map() بسیار کاربردی هستند و کد را به شدت کاهش می‌دهند:

const users = ['Nathan', 'John', 'William'];

// روش قدیمی
const nameLengths = users.map(function(name) {
  return name.length;
});

// روش مدرن (Arrow Function)
const nameLengths = users.map(name => name.length);

بازنویسی کدهای Fetch API

در آموزش قبلی، کتابخانه درخواست‌های HTTP را با استفاده از توابع معمولی نوشتیم. حال بیایید همان کد را با Arrow Functions بازنویسی کنیم تا ببینید چقدر تمیزتر می‌شود:

// دریافت متن
fetch('test.txt')
  .then(res => res.text())
  .then(data => document.getElementById('output').innerHTML = data)
  .catch(err => console.log(err));

// دریافت JSON
fetch('posts.json')
  .then(res => res.json())
  .then(data => {
    let output = '';
    data.forEach(post => output += `<li>${post.title}</li>`);
    document.getElementById('output').innerHTML = output;
  })
  .catch(err => console.log(err));

همان‌طور که مشاهده کردید، Arrow Functions ابزاری قدرتمند برای ساده‌سازی کدهای ناهمگام هستند. در بخش بعدی، از این ساختار برای بازنویسی کامل کتابخانه EasyHTTP استفاده خواهیم کرد.