تابع در جاوااسکریپت یک گروه از کد قابل استفاده مجدد است که می‌توانید در هر نقطه از برنامه‌ی خود فراخوانی کنید. این باعث حذف نیاز به نوشتن دوباره و دوباره همان کد می‌شود. این به برنامه‌نویسان در نوشتن کدهای ماژولار کمک می‌کند. توابع به برنامه‌نویس اجازه می‌دهند یک برنامه بزرگ را به تعدادی تابع کوچک و قابل مدیریت تقسیم کند.
مانند هر زبان برنامه‌نویسی پیشرفته دیگر، جاوااسکریپت هم تمام ویژگی‌های لازم برای نوشتن کدهای ماژولار با استفاده از توابع را پشتیبانی می‌کند. شما ممکن است توابعی مانند alert() و write() را در فصل‌های ابتدایی دیده باشید. ما این توابع را دوباره و دوباره استفاده کرده بودیم، اما آن‌ها فقط یکبار در جاوااسکریپت اصلی نوشته شده بودند.
جاوااسکریپت به ما اجازه می‌دهد که توابع خود را نیز بنویسیم. این بخش توضیح می‌دهد که چگونه توابع خود را در جاوااسکریپت بنویسیم.
تعریف تابع
قبل از استفاده از یک تابع، باید آن را تعریف کنیم. روش معمول برای تعریف یک تابع در جاوااسکریپت استفاده از کلمه‌ی کلیدی function است، دنبال شده توسط یک نام منحصر به فرد برای تابع، یک لیست پارامترها (ممکن است خالی باشد)، و یک بلوک اظهارات که به دور آن با دونقطه زده می‌شود، است.
سینتکس
سینتکس اصلی برای تعریف تابع در جاوااسکریپت به شرح زیر است:
function functionName(parameter-list) {
statements
}در کد بالا به جای functionName نام تابع قرار میگیرد، به جای parameter-list ورودی های تابع قرار میگیرد (که می‌تواند خالی باشد) در بخش statememnts هم کد هایی که باید به هنگام فراخوانی تابع اجرا شوند، نوشته می‌شوند.
این نوع تعریف تابع به عنوان تعریف تابع (function declaration )یا اظهار تابع (function statement) شناخته می‌شود.
مثال زیر یک تابع به نام sayHello را تعریف می‌کند که هیچ پارامتری نمی‌گیرد.
function sayHello() {
alert("Hello there");
}عبارت تابع (Function Expression)
const varName = function (parameter-list) {
statements
};const myFunc = function (x, y){
return x + y;
};فراخوانی یک تابع
برای فراخوانی یک تابع در جایی از اسکریپت، شما فقط نیاز به نوشتن نام آن تابع با پرانتزها () دارید، همانطور که در کد زیر نشان داده شده است.
مثال
<html>
<head>
<script type="text/javascript">
function sayHello() {
alert("Hello there!");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello">
</form>
<p> Use different text in the write method and then try... </p>
</body>
</html>پارامترهای تابع
تا اینجا، توابعی را بدون پارامتر دیده‌ایم. اما امکان ارسال پارامترهای مختلف هنگام فراخوانی یک تابع وجود دارد. این پارامترهای ارسالی می‌توانند در داخل تابع ذخیره شده و هرگونه تغییر و تحلیلی بر روی آن پارامترها انجام شود. یک تابع می‌تواند چندین پارامتر را با کاما جدا کرده، دریافت کند:
مثال
<html>
<head>
<script type = "text/javascript">
function sayHello(name, age) {
document.write (name + " is " + age + " years old.");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>دستور بازگشتی
یک تابع جاوااسکریپت می‌تواند یک دستور بازگشتی اختیاری داشته باشد. این اختیاری است اگر می‌خواهید یک مقدار از یک تابع برگردانید. این دستور باید آخرین دستور در یک تابع باشد.
به عنوان مثال، می‌توانید دو عدد را در یک تابع ارسال کنید، و سپس انتظار دارید که تابع حاصل ضرب آن‌ها را در برنامه فراخواننده‌تان برگرداند.
مثال
<html>
<head>
<script type="text/javascript">
function concatenate(first, last) {
var full;
full = first + last;
return full;
}
function secondFunction() {
var result;
result = concatenate('Zara ', 'Ali');
alert(result);
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="secondFunction()" value="Call Function">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>توابع به عنوان مقادیر متغیر
در جاوااسکریپت، توابع می‌توانند مانند سایر متغیرها استفاده شوند. به همین دلیل گفته می‌شود که جاوااسکریپت دارای توابع کلاس اول (first-class functions) است. توابع می‌توانند به عنوان آرگومان‌ها به سایر توابع ارسال شوند.
مثال
<html>
<body>
<div id = "output"> </div>
<script>
const myFunc = function (){ return "Hello ";};
document.getElementById("output").innerHTML = myFunc() + "Users.";
</script>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام