یک تابع (Function) ، گروهی از کدهای قابل استفاده ی مجدد است که می تواند هرجای برنامه شما فراخوانده شود و نیاز به نوشتن دوباره و دوباره همان کد را حذف می کند. توابع به برنامه ریز اجازه می دهد که یک برنامه بزرگ را به چندین برنامه کوچکتر و تابع قابل مدیریت تقسیم کند.
مثل دیگر زبان های برنامه ریزی پیشرفته، جاوا اسکریپت هم از تمام ویژگی های لازم برای نوشتن کد modular با استفاده از توابع را پشتیبانی میکند. حتما توابعی مثل alert() و write() را در فصل های قبل دیده اید، ما از این توابع بارها استفاده میکنیم اما در جاوا اسکریپت مرکزی فقط یک بار نوشته شده اند.
جاوا اسکریپت به ما اجازه می دهد توابع خود را به خوبی بنویسیم. در این بخش توضیح میدهیم چطور می توانید توابع خود را در جاوا اسکریپت بنویسید.

تعریف تابع

قبل از اینکه از تابع استفاده کنیم، نیاز به تعریف آن داریم. عمومی ترین روش تعریف تابع در جاوا اسکریپت بوسیله استفاده از کلید واژه تابع، به دنبال یک نام منحصر به فرد تابع، لیستی از پارامترها(که ممکن است خالی باشد) و یک دستور بلاک داخل پرانتز است.

سینتکس:

سینتکس توابع بصورت زیر است:

<script type = "text/javascript">
   <!--
      function functionname(parameter-list) {
         statements
      }
   //-->
</script>

مثال
مثال زیر را امتحان کنید. این مثال تابعی را تعیین کرده که sayHello را بدون هیچ پارامتری فرا می خواند.

<script type = "text/javascript">
   <!--
      function sayHello() {
         alert("Hello there");
      }
   //-->
</script>

فراخوانی تابع

برای فراخوانی تابع، زمانی دیگر در script باید نام آن تابع را بصورتی که در کد زیر نشان داده شده بنویسید:

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello() {
            document.write ("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 write method and then try...</p>
   </body>
</html>

خروجی:
برای فراخوانی تابع روی گزینه زیر کلیک کنید.

Hello there!

متن دیگری در روش نوشتاری استفاده کنید و دوباره امتحان کنید.

پارامترهای تابع

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

مثال:

مثال زیر را امتحان کنید. تابع sayHello را اصلاح کرده و حالا دارای دو پارامتر است:

<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>

خروجی:

برای فراخوانی تابع روی گزینه زیر کلیک کنید.

Zara is 7 years old.

از پارامترهای دیگری در تابع استفاده کنید و امتحان کنید.

دستور بازگشت

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

<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');
            document.write (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>

خروجی:
برای فراخوانی تابع روی گزینه زیر کلیک کنید.

ZaraAli

از پارامترهای دیگری در تابع استفاده کنید و امتحان کنید.

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

  • توابع Nested در جاوا اسکریپت
  • Function constructor() جاوا اسکریپت
  • Function Literals جاوا اسکریپت