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

«تابع» (Functions) یکی از مفاهیم اساسی در برنامه نویسی است. توابع به برنامه‌نویسان اجازه می‌دهند کدهای مختصر، استاندارد، قابل استفاده مجدد و قابل نگهداری بنویسند. جاوا اسکریپت عملکردهایی شبیه به اکثر زبان‌های برنامه نویسی ارائه می‌دهد. در جاوا اسکریپت، تابع به کاربر این امکان را می‌دهد تا یک بلوک از کدها را تعریف کند، به آن نامی نسبت بدهد و سپس آن را هر چند باری که می‌خواهد در قسمت‌های مختلف برنامه اجرا کند. استفاده از توابع در جاوا اسکریپت می‌تواند فرایند کدنویسی را بسیار مختصرتر و آسان‌تر کند. در این مطلب آموزشی از مجله فرادرس، تابع در جاوا اسکریپت و انواع آن به همراه مثال‌های جذاب و متعدد مورد بررسی قرار گرفته‌اند.

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

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

1. اعلان یا تعریف تابع (Function Declaration)
2. عبارت تابعی (Function Expression)

فیلم آموزش تعریف توابع در جاوا اسکریپت (JavaScript) (رایگان) در فرادرس

کلیک کنید

نام گذاری توابع در جاوا اسکریپت

توابع در جاوا اسکریپت به صورت کُنش هستند و بنابراین نام آن‌ها معمولاً فعل است. نام تابع معمولاً باید مختصر و تا حد امکان دقیق باشد و آنچه را توصیف کند که تابع انجام می‌دهد تا کسی که کد را تحلیل می‌کند یا آن را می‌خواند بتواند به آسانی آن را درک کند.

برای مثال، توابعی که با show شروع می‌شوند معمولاً چیزی را نشان می‌دهند. یا مثلاً نمادهای خاص، همگی بیانگر عمل مشخصی هستند که در زیر تعدادی از آن‌ها به عنوان نمونه آورده شده است.

• Get... : برگرداندن مقداری
• Calc... : محاسبه کردن مقداری
• Create... : ساختن چیزی
• Check... : بررسی کردن چیزی، برگرداندن مقدار Boolean و غیره

مثالی از نام‌گذاری Function در جاوا اسکریپت به صورت زیر است:

1showMessage(..)     // shows a message
2getAge(..)          // returns the age (gets it somehow)
3calcSum(..)         // calculates a sum and returns the result
4createForm(..)      // creates a form (and usually returns it)
5checkPermission(..) // checks a permission, returns true/false

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

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

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

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

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

مثال زیر تصویر بهتری نسبت به مفهوم تابع در جاوا اسکریپت ارائه می‌دهد.

1function ShowMessage(firstName, lastName) {
2    alert("Salam" + firstName + " " + lastName);
3}
4
5ShowMessage("Ali", "Amini");
6ShowMessage("Ahmad", "Rasoli");
7ShowMessage(100, 200);

خروجی به صورت زیر است:

Salam Ali Amini 
Salam Ahmad Rasoli <br>Salam 100 200

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

1function ShowMessage(firstName, lastName) {
2    alert("Hello " + firstName + " " + lastName);
3}
4
5ShowMessage("Ali", "Amini", "Mr."); // display Hello Ali Amini
6ShowMessage("Ahmad"); // display Hello Ahmad undefined
7ShowMessage(); // display Hello undefined undefined

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

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

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

سینتکس اعلان تابع در جاوا اسکریپت به صورت زیر است:

1//defining a function
2function <function-name>()
3{
4    // code to be executed
5};
6
7//calling a function
8<function-name>();

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

• کلمه کلیدی Function
• نام تابع
• پرانتز «می‌تواند پارامترها را بگیرد یا خالی باشد»
• بدنه تابع

فیلم آموزش تعریف توابع در جاوا اسکریپت (JavaScript) (رایگان) در فرادرس

کلیک کنید

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

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

1function ShowMessage() {
2    alert("Salam Faradars!");
3}
4
5ShowMessage();

خروجی این تابع به صورت زیر است:

Salam Faradars

متغیر محلی فانکشن در جاوا اسکریپت چیست؟

«متغیر محلی» (Local Varible) در توابع جاوا اسکریپت، متغیری تعریف شده در داخل تابع است که فقط در داخل آن تابع قابل‌ مشاهده و دسترسی خواهد بود. در مثال زیر message یک متغیر محلی محسوب می‌شود و استفاده از آن در خارج تابع منجر به بروز خطا شده است.

1function showMessage() {
2  let message = "Salam,Faradars!"; // local variable
3
4  alert( message );
5}
6
7showMessage(); // salam, faradars!
8
9alert( message ); // <-- Error! The variable is local to the function

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

Function در جاوا اسکریپت می‌تواند به «متغیر سراسری» (Global Variable) نیز دسترسی داشته باشد. از این متغیرها به عنوان متغیرهای جهانی نیز یاد می‌شود. مثال زیر در رابطه با این موضوع است.

1let userName = 'Faradars';
2
3function showMessage() {
4  let message = 'salam, ' + userName;
5  alert(message);
6}
7
8showMessage(); // salam, Faradrs

تابع می‌تواند به متغیر سراسری دسترسی کامل داشته باشد و حتی می‌تواند آن را اصلاح هم بکند. این موضوع در قطعه کد زیر نشان داده شده است.