چه زمانی از تابع Arrow بدون آکولاد در جاوااسکریپت استفاده کنیم؟
در ES6 و React، تابعهای پیکان (arrow functions) به شیوههای متفاوتی میتوانند نوشته شوند، که یکی از سوالات متداول در این زمینه این است که چرا برخی از این توابع از آکولاد و برخی دیگر از پرانتز استفاده میکنند.
در واقع، انتخاب بین آکولاد و پرانتز به نوع کاری که تابع انجام میدهد بستگی دارد. وقتی که شما از پرانتز استفاده میکنید، در واقع انتظار دارید که تابع تنها یک مقدار را برگرداند. بهعنوان مثال، در کدهای JSX، پرانتز برای بازگشت یک عنصر استفاده میشود که ظاهراً به نظر میرسد چندین خط دارد اما در حقیقت به صورت یک عنصر واحد کامپایل میشود:
const foo = (params) => (
<span>
<p>Content</p>
</span>
);
این نمونه نشان میدهد که تابع foo یک عنصر JSX را باز میگرداند.
از طرف دیگر، وقتی از آکولاد استفاده میشود، وضعیت متفاوتی داریم. آکولاد نشاندهنده این است که شما چندین خط کد را با هم اجرا میکنید و در انتهای تابع نیازی به برگرداندن یک مقدار مشخص نیست، یا شاید بهطور خاص تصمیم دارید مقداری را برنگردانید. به عنوان مثال:
const handleBar = (e) => {
e.preventDefault();
dispatch('logout');
};
اینجا تابع handleBar چندین عمل را انجام میدهد بدون اینکه به صراحت مقداری را برگرداند.
علاوه بر این، در زمانی که بخواهید یک شیء را برگردانید، از پرانتز نیز میتوانید استفاده کنید تا از تداخل با بلوک کد جلوگیری کنید، زیرا این موضوع میتواند باعث سردرگمی شود. به عنوان مثال:
const getObject = () => ({ name: 'YourName' }); // این شیء را برمیگرداند
این عملکرد معادل زیر است:
const getObject = () => {
return { name: 'YourName' };
}
استفاده از آکولاد همچنین میتواند به منظور جلوگیری از بازگشت یک مقدار یا برای واضحتر کردن هدف تابع برای سایر توسعهدهندگان باشد. به عنوان مثال:
const myFunc = (stuff) => { someArray.push(stuff) } // هیچ مقداری برنمیگرداند
const otherFunc = (stuff) => someArray.push(stuff) // مقدار جدید آرایه را برمیگرداند
در نهایت، انتخاب بین آکولاد و پرانتز به طراحی و مقصودی که دارید بستگی دارد. استفاده صحیح از آنها میتواند باعث بهبود خوانایی و فهم کد برای خود شما و سایرین شود.