آموزش تابع Arrow در جاوا اسکریپت
یکی از مهم‌ترین مباحث آموزشی که در دوره‌های آموزش جاو اسکریپت بسیار مورد توجه قرار می‌گیرد، توابع 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 در جاوا اسکریپت کاری ساده است و در سه مرحله آسان انجام می‌شود:
- کلمه کلیدی function را با کلمه کلیدی const جایگزین کنید.
- نماد = را بعد از نام تابع و قبل از پرانتز اضافه کنید.
- علامت => را بعد از پرانتز درج کنید.
در بیشتر موارد، توابع فقط یک بار اعلام می‌شوند و هرگز بعداً تغییر نمی‌کنند، بنابراین به جای 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 در جاوا اسکریپت با پارامتر
در اینجا مثالی از تابع پیکان در جاوا اسکریپت با پارامترها آورده شده است:
const sabz = ( x, y, z ) => {
console.log( x + y + z )
}
sabz ( 10, 20, 30 );
اولین خط از کد نوعی ثابت جدید به نام sabz را اعلام می‌کند و یک تابع پیکان به آن اختصاص می‌دهد. تابع پیکان دارای سه پارامتر است:
const sabz = (x, y, z) => {
در داخل بدنه تابع پیکان، عبارت Console.log وجود دارد که مجموع پارامترهای x، y و z را محاسبه کرده و نتیجه را در کنسول چاپ می‌کند.
console.log(x + y + z);
در نهایت، تابع با آرگومان‌های 10، 20 و 30 فراخوانی می‌شود:
gfg(10, 20, 30);
هنگامی که این کد اجرا می‌شود، خروجی آن به صورت زیر است:
60
تابع پیکان sabz با آرگومان‌های 10، 20 و 30 فراخوانی می‌شود و مجموع آن‌ها را که 60 است محاسبه کرده و آن را در کنسول چاپ می‌کند.
مثالی از تابع پیکان با پارامترهای پیش فرض
در اینجا مثالی از تابع Arrow در جاوا اسکریپت با پارامترهای پیش فرض آورده شده است:
const sabz = ( x, y, z = 30 ) => {
console.log( x + " " + y + " " + z);
}
sabz ( 10, 20 );
مانند مثال فوق اولین خط از کد نوعی ثابت جدید به نام sabz را اعلام می‌کند و تابع پیکان به آن اختصاص می‌دهد. تابع Arrow دوباره دارای سه پارامتر زیر است:
const sabz = ( x, y, z = 30 ) => {
در داخل بدنه تابع پیکان، عبارت Console.log وجود دارد که مقادیر x، y را به هم متصل می‌کند و z و نتیجه را در کنسول چاپ می‌کند.
console.log( x + " " + y + " " + z);
هنگام فراخوانی تابع، تنها دو آرگومان ارائه می‌شود:
gfg(10, 20);
از آنجایی که آرگومان سوم z ارائه نشده، مقدار پیش‌فرض آن 30 است. در نتیجه خروجی به صورت زیر خواهد بود:
10 20 30
مزایای استفاده از توابع پیکان در جاوا اسکریپت
در زیر فهرست مزایای استفاده از توابع Arrow در جاوا اسکریپت آورده شده است:
- کاهش اندازه کد
توابع پیکان به کاهش مقدار کد موردنیاز کمک می‌کنند.
- اعلامیه return و براکت‌های اختیاری
برای توابع تک خطی، دستور بازگشت و براکت‌های تابع اختیاری هستند و این امر کد را مختصرتر می‌کند.
- خوانایی بهبود یافته
توابع پیکان خوانایی کد را با ارائه نوعی نحو فشرده‌تر افزایش می‌دهند.
- ارث‌بری منطقی
توابع arrow مقدار کلمه کلیدی this را از محدوده محصور به ارث می‌برند که می‌تواند برای شنوندگان رویداد یا توابع برگشت به تماس بسیار مفید باشد.
مزایای فوق، توابع پیکان جاوا اسکریپت را به ابزاری ارزشمند برای نوشتن کدهای جاوا اسکریپت تمیزتر و مختصرتر تبدیل می‌کند.
محدودیت‌های تابع Arrow در جاوا اسکریپت
در کنار مزایا و کاربردهایی که توابع پیکان دارند، محدودیت‌ها و معایبی را نیز می‌توان برای آن‌ها در نظر گرفت. در فهرست محدودیت‌های توابع پیکان آورده شده است:
1 | بدون ویژگی نمونه اولیه یا prototype در جاوا اسکریپت: توابع پیکان خاصیت نمونه اولیه را ندارند که این محدودیت می‌تواند استفاده از آن‌ها را در موارد خاص محدود کند.
2 | نمی‌توان با کلمه کلیدی New استفاده کرد: توابع پیکان را نمی‌توان با کلمه کلیدی New برای ایجاد نمونه‌هایی از اشیاء استفاده کرد.
3 | نمی‌توان به عنوان سازنده استفاده کرد: بر خلاف توابع معمولی، توابع پیکان را نمی‌توان برای ایجاد توابع سازنده در جاوا اسکریپت برای مقداردهی اولیه اشیاء استفاده کرد.
4 | توابع ناشناس: توابع پیکان ناشناس هستند، به این معنی که نامی ندارند ک این ویژگی می‌تواند اشکال‌زدایی را چالش‌برانگیزتر کند.
5 | توابع مولد نمی‌توانند باشند: توابع پیکان را نمی‌توان به عنوان توابع مولد یا generator استفاده کرد.
درک این محدودیت‌ها به انتخاب نوع تابع مناسب برای سناریوهای برنامه‌نویسی مختلف کمک می‌کند.
آموزش جاوا اسکریپت به روشی آسان
توابع Arrow در جاوا اسکریپت به صورت کلی بسیار مفید و کارآمد هستند. آن‌ها کد را کوتاه‌تر می‌کنند، اجازه می‌دهند تا در صورت تک خطی بودن تابع، دستور بازگشتی و پرانتزهای تابع اختیاری باشد که این باعث می‌شود خوانایی کد افزایش یابید. در مطلب فوق از مجله سبز لرن اطلاعات کامل و مفیدی در رابطه با توابع پیکان در جاوا اسکریپت ارائه شد.
توابع پیکان تنها بخش کوچکی از آموزش جاوا اسکریپت هستند، اگر دوست دارید همه مباحث جاوا اسکریپت را از مبتدی تا پیشرفته بیاموزید و به آن مسلط شوید، بهترین راه‌کار برنامه‌ریزی برای گذراندن یک دوره آموزشی حرفه‌ای است که در این رابطه پیشنهاد ما به شما استفاده از دوره آموزش صفر تا صد سبز لرن است. در این دوره آموزشی شما جاوا اسکریپت را از مبتدی تا پیشرفته به صورت عملی یاد خواهید گرفت و آمادگی این را خواهید داشت که با دستی پر وارد بازار کار شوید.
عالی بود👏