فرمت توابع در جاوا اسکریپت
برای ایجاد یک تابع در یک فایل جاوا اسکریپت (فایل‌هایی که معمولاً با پسوند js. ایجاد می‌شوند) باید ابتدا از کلمه کلیدی function استفاده کنید. سپس نام دلخواه خود برای تابع را ذکر کرده و در نهایت از پرانتزهای باز و بسته در جلوی نام استفاده کنید.
درخصوص نام گذاری توابع در جاوا اسکریپت باید توجه داشته باشید که نام این توابع می‌توانند از حروف بزرگ و کوچک انگلیسی، اعداد، علامت زیر خط1underscore و علامت دلار تشکیل شوند. استفاده از سایر کاراکترها برای نام گذاری توابع در جاوا اسکریپت مجاز نیست.
همچنین در داخل پرانتزهای باز و بسته شما بسته به نیاز خود می‌توانید از هر چند پارامتر که لازم باشد، استفاده کنید. البته الزامی به این کار نیست و این موضوع بسته به عملکرد تابع شما دارد. اگر از چندین پارامتر استفاده کنید، باید آنها را با علامت کاما از یکدیگر جدا کنید. در نهایت کدی که قرار است وظیفه تابع مربوطه را به انجام برساند، در بین دو علامت آکولاد باز و بسته قرار داده می‌شود. در ادامه فرمت کلی یک تابع در زبان جاوا اسکریپت را مشاهده می‌کنید.
function name(parameter1, parameter2, parameter3) {
// code to be executed
}مثالی از توابع در جاوا اسکریپت
بعد از بررسی فرمت کلی توابع در جاوا اسکریپت، بهتر است به ذکر مثالی در این خصوص بپردازیم تا موضوع به خوبی برای علاقه مندان به یادگیری جاوا اسکریپت تفهیم شود. در ادامه شما تابعی را مشاهده می‌کنید که دو پارامتر p1 و p2 را به عنوان دو عدد دریافت کرده و وظیفه آن، برگرداندن مقدار حاصل ضرب این دو عدد است:
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}
مواردی که در مورد فرمت توابع در جاوا اسکریپت ذکر کرده بودیم، در این مثال نیز مشهود است. مثلاً پارامترها با علامت کاما از یکدیگر تفکیک شده و در داخل پرانتز (جلوی نام تابع) لیست شده‌اند.
فراخوانی تابع در جاوا اسکریپت
به صورت پیش فرض کدهایی که در داخل یک تابع نوشته می‌شوند، اجرا نمی‌گردند. هدف هم در واقع همین بوده که هر جا نیاز بود، تابع مورد نظر فراخوانی شود و بعد این کدها اجرا شوند. در زبان جاوا اسکریپت به اشکال مختلفی می‌توان یک تابع را فراخوانی کرد. برخی از این موارد عبارتند از:
- هنگام رخ دادن یک رویداد2event: مثلاً هنگامی که کاربر سایت روی یک دکمه کلیک می‌کند.
- در داخل کد جاوا اسکریپت: مثلاً در هنگام نوشتن کدهای دیگر بخش‌ها در فایل جاوا اسکریپت یا در داخل توابع دیگر.
- فراخوانی خودکار: این نوع فراخوانی که self invoked نامیده می‌شود، از دیگر روش‌هایی است که باعث اجرای یک تابع می‌گردد.
به عنوان مثال یک راه ساده برای فراخوانی تابعی که در بخش قبل مثال زدیم، آن است که در قسمت دیگری درون کد خود، نام آن را به همراه مقادیری که قرار است به جای پارامترهای p1 و p2 قرار بگیرند، ذکر کنید. البته برای خواناتر شدن کد خود و استفاده بهتر از مقدار برگشتی توسط تابع (مقدار حاصل ضرب) بهتر است ابتدا متغیری را تعریف کرده و سپس نام تابع را ذکر کنید (در اصطلاح تابع را فراخوانی کنید).
// Function is called, the return value will end up in x
let x = myFunction(4, 3);
function myFunction(p1, p2) {
// Function returns the product of p1 and p2
return p1 * p2;
}اگر می‌خواهید از مقداری که در متغیر x در مثال فوق ذخیره شده، مطمئن شوید، می‌توانید از دستور alert به شکل زیر استفاده کنید. این کار پنجره‌ای در مرورگر باز کرده و مقدار x را به شما نمایش می‌دهد.
alert(x);در ادامه تصویر پنجره مرورگر را که مقدار برگردانده شده در آن نمایان است، مشاهده می‌کنید:
برای افراد تازه‌کار با زبان جاوا اسکریپت ذکر این نکته نیز ضروری است که جهت اجرای فایل جاوا اسکریپت خود در مرورگر، باید یک فایل html نیز ایجاد کرده و به کمک تگ script به شکل زیر، فایل جاوا اسکریپت خود را در این فایل فراخوانی کنید. سپس این فایل html را در یک مرورگر باز کنید.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>functions</title>
</head>
<body>
<script src="functions-me.js"></script>
</body>
</html>در این کد، فایل functions-me.js همان فایل جاوا اسکریپتی است که کدهای قبلی (تعریف تابع و دستور alert) در آن قرار گرفته اند.
البته اگر با زبان جاوا اسکریپت زیاد آشنایی ندارید، شاید وجود دستورهای متعدد مقداری باعث دلهره و خستگی شما شود. این مسئله کاملاً طبیعی است. در جاوا اسکریپت دستورها و مفاهیم متعددی وجود دارند که وقتی به مرور دانش شما در این زمینه تکمیل شود، درک آنها آسان‌تر خواهد شد. ما فعلاً روی موضوع توابع در جاوا اسکریپت تمرکز داریم. لذا در مورد سایر دستورها یا مفاهیم استفاده شده در این مقاله اگر نیاز بود با جستجو در اینترنت یا مراجعه به کتاب‌های جاوا اسکریپت می‌توانید دانش خود را تکمیل کنید.
توضیح در مورد عبارت return در تابع
در مثال‌های ذکر شده، شما با عبارت return مواجه شدید. این یکی از عبارات3statement مطرح در زبان جاوا اسکریپت است.
معمولاً در توابعی که قرار است مقداری را به عنوان خروجی برگردانند از این عبارت استفاده می‌کنیم. زمانی که به بخش return در یک تابع جاوا اسکریپت برسیم، دیگر اجرای کد متوقف می‌شود. یعنی دستورهای بعد از return (در داخل تابع) دیگر اجرا نخواهند شد. لذا نحوه کدنویسی صحیح در داخل تابع جاوا اسکریپت به این صورت است که بعد از انجام کلیه عملیات و شکل گیری حاصل نهایی، آن را با عبارت return برگردانیم.
در مثال ما نیز حاصل ضرب دو عدد به عنوان حاصل نهایی و عملکرد پایانی تابع برگردانده می‌شود. البته این یک مثال خیلی ساده است. در عمل ممکن است شما مجموعه‌ای از عملیات مختلف را در داخل یک تابع انجام دهید و در نهایت مقداری را به عنوان حاصل نهایی برگردانید. هنگامی که یک تابع در جای دیگری درون کد شما فراخوانی گردد، این مقدار برگردانده شده در آن قسمت قابل بازیابی و استفاده است. در مثال ما نیز مقدار برگردانده شده درون متغیر x قرار داده شد.
دلایل استفاده از توابع در جاوا اسکریپت
شاید برای برخی مخاطبان این سؤال نیز به وجود بیاید که اصلاً چرا ما از توابع در جاوا اسکریپت استفاده می‌کنیم؟ مثلاً اگر می‌خواهیم دو عدد را ضرب کرده و حاصل را در جایی ذخیره می‌کنیم، خوب در میان کدهای خود، این کار را نیز انجام دهیم. چه نیازی است که برای انجام آن، یک تابع جداگانه ایجاد کرده و هر بار آن را فراخوانی کنیم؟
در نگاه اول شاید این پرسش منطقی به نظر بیاید. اما اگر بهتر به مسئله عمیق شویم، می‌توانیم دلایل متعددی را برای استفاده از توابع ذکر کنیم. البته این دلایل مربوط به زبان جاوا اسکریپت نمی‌شوند. بلکه در اکثر زبان‌های برنامه نویسی مانند PHP و … نیز به دلایلی مانند این‌ها بوده که استفاده از توابع مطرح شده است:
- دلیل اول استفاده از توابع، تکرار کردن وظیفه محوله به تابع در بخش‌های مختلف کد است. شما ممکن است در قسمت‌های بی شماری از کد خود بخواهید مثلاً عمل ضرب دو عدد را انجام دهید (یا عملیاتی که به مراتب پیچیده‌تر بوده و نیاز به کدهای بیشتری دارند). در این صورت منطقی و زیبا به نظر نمی‌رسد که هر بار تمامی آن مجموعه کدهای بین دو علامت آکولاد باز و بسته درون تابع را کپی کرده و در جایی که می‌خواهیم، جایگذاری کنیم تا عملیات انجام شود. بلکه یک بار آن کدها را نوشته و در داخل یک تابع قرار می‌دهیم. سپس هر جا نیاز بود، به سادگی فقط نام تابع را ذکر می‌کنیم.
- دلیل دیگری که می‌توان ذکر کرد، تغییر در آرگومان‌ها و پارامترهای تابع است. شما هر بار ممکن است بخواهید دو عدد مختلف را ضرب کنید و نتیجه را بررسی کنید. در این صورت اگر از تابع استفاده کرده باشید، تنها کافی است هنگام فراخوانی تابع، دو عدد ورودی را تغییر دهید. اما اگر بخواهید هر بار عملیات را مجدداً کدنویسی کنید، بسیار ناخوانا شده و چه بسا، اشتباهات فراوانی نیز در این میان رخ دهد یا نیاز به تعریف متغیرهای زیادی داشته باشید که در عمل اصلا درست نیست.
- دلیل سوم و آخری که ما در این مقاله ذکر می‌کنیم بحث تغییر در تابع یا وظیفه محوله به آن است. فرض کنید تابع بسیار پیچیده‌ای را کدنویسی کرده‌اید. بعد از گذشت مدتی حال می‌خواهید سایت خود را به روز کرده و قابلیت جدیدی به آن تابع اضافه کنید یا تغییراتی در آن اعمال کنید. از آن بدتر اینکه متوجه شده‌اید در هنگام کدنویسی این تابع از توابع در جاوا اسکریپت خود، مرتکب یک اشتباه برنامه نویسی شده‌اید و باید آن را اصلاح کنید. حال که این تابع را در قسمت‌های مختلف فراخوانی کرده و اعمال کرده‌اید، تنها کافی است همان بخش داخل تابع را اصلاح کرده یا تغییر دهید. به این ترتیب در تمام جاهایی که فراخوانی تابع صورت گرفته، تغییرات به صورت خودکار اعمال می‌گردد. اما اگر از تابع استفاده نکرده بودید، باید تک تک به سراغ تمامی آن قسمت‌ها رفته و اصلاحات مربوطه را مجزا برای هر یک انجام می‌دادید! پس می‌بینید که استفاده از توابع در جاوا اسکریپت چقدر برای شما مفید است و به صرفه‌جویی در زمان شما کمک می‌کند.
جمع‌بندی
در این مقاله به موضوع توابع در جاوا اسکریپت پرداختیم. فرمت کلی استفاده از توابع را بیان کردیم و سعی کردیم با ذکر مثال، در مورد جزئیات آن توضیح دهیم. البته مباحث دیگری هم در مورد توابع و ساختارهای مورد استفاده وجود دارند که به جهت اختصار در این مقاله ذکر نشد. ان‌شاءالله با سایر مقالات مرتبط با موضوع جاوا اسکریپت به مرور به تکمیل مباحث می‌پردازیم.
