آموزش کار با تابع در اکما اسکریپت ES6

آموزش کار با تابع ها در اکما اسکریپت ES6:

یک تابع (Function) مجموعه ای از دستورات است که محاسبات یا عملیات خاصی را انجام داده و در نهایت خروجی تولید می کند. این یک مجموعه یا بلوک از کد است که برای انجام یک کار خاص، طراحی شده است. یک تابع زمانی که فراخوانی (call) شده یا در پردازش قرار بگیرد، اجرا می شود. توابع به ما امکان استفاده مجدد از یک بلوک کد و نوشتن آنها در حالت منظم را می دهد. از توابع (Functions) در جاوا اسکریپت برای انجام عملیات های برنامه نویسی (Operation) استفاده می شود.
در جاوا اسکریپت، توابع با استفاده از کلمه کلیدی function و به دنبال آن یک نام و پرانتز () تعریف می شوند. نام تابع می تواند شامل اعداد، حروف، $ یا _ باشد. درون پرانتز جلوی نام تابع می توانید پارامترهایی که اطلاعات را به تابع ارسال می کنند تعریف کرده و هر کدام را با ، از هم جدا نمایید. دستورات تابع درون {} جلوی آن قرار می گیرند.
ساختار کلی تعریف یک تابع در جاوا اسکریپت ES6 به صورت زیر است:

function function_name() {  
    //body of the function  
}   
            

برای اجرای یک تابع بایستی آن را فراخوانی (call) کرده (با استفاده از نام تابع و () ) و یا کاری کنیم که فعال شود. ساختار دستوری فراخوانی یا فعال سازی یک تابع به صورت زیر است:

function_name()  
            

مثال: در کد مثال زیر یک تابع به نام ()hello تعریف کرده و دستورات آن را مبنی بر چاپ یک عبارت در خروجی در جفت {} مقابلش قرار داده ایم. سپس در خط پایانی تابع را فراخوانی کرده تا خروجی خود را تولید کند:

function hello() //defining a function  
{  
   console.log ("hello function called");  
   }  
hello(); //calling of function  
            

خروجی مثال :

hello function called
            

در ادامه به تشریح کامل انواع تابع در زبان اکما اسکریپت ES6 خواهیم پرداخت.

آموزش کار با تابع های پارامتر دار در ES6:

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

function function_name( parameter1,parameter2 ,…..parameterN) {     
     //body of the function  
}  
            

مثال: در کد مثال عملی زیر که کاربرد یک تابع دارای پارامتر (Parameter) را نشان می دهد، یک تابع به نام ()mul تعریف کرده ایم که دو پارامتر x و y را دریافت کرده و مجموعه حاصلضرب آنها را در خروجی بر می گرداند. مقادیر پارامترها در خط آخر مثال که تابع را فراخوانی کرده ایم، بدان ارسال می شود:

function mul( x , y) {   
    var c = x * y;  
    console.log("x = "+x);  
    console.log("y = "+y);  
    console.log("x * y = "+c);   
 }   
mul(20,30);  
            

خروجی تابع :

x = 20
y = 30
x * y = 600
            

آموزش تعیین پارامترهای پیش فرض تابع در ES6:

در ES6، اگر پارامتری تعریف نشده باشد یا هیچ مقداری برای آن تعیین نکرده باشد، تابع امکانی به شما می دهد تا پارامترها را با مقادیر پیش فرض، مقداردهی اولیه نمایید. در کد مثال نحوه این کار را نشان داده ایم.
مثال: در کد مثال زیر یک تابع به نام show با دو پارامتر num1 و num2 تعرف کرده ایم ولی در هنگام فراخوانی در خط آخر فقط پارامتر اول را مقداردهی کرده ایم. پارامتر دوم به صورت پیش فرض برابر 200 تعریف شده است:

function show (num1, num2=200)   
{  
    console.log("num1 = " +num1);  
    console.log("num2 = " +num2);  
  
}  
show(100);  
            

در تابع بالا، مقدار متغیر num2 به صورت پیش فرض برابر 200 تعیین شده است. این تابع همواره مقدار متغیر num2 را 200 فرض خواهد کرد، مگر اینکه در هنگام فراخوانی به صراحت مقدار دیگری را برایش تعیین کنید:

100 200
            

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

function show(num1, num2=200)   
{  
    console.log("num1 = " +num1);  
    console.log("num2 = " +num2);  
}  
show(100,500);  
            

خروجی تابع :

100 500
            

آموزش کار با پارامترهای rest در تابع ES6:

با استفاده از ویژگی جدید پارامترهای Rest Parameters شما دیگر محدود نیستید که تعداد پارامترهای ارسالی به تابع را از قبل تعیین کرده و می توانید هر تعداد که لازم شد ارسال نمایید، فقط بایستی تمامی مقادیر پارامترها از یک نوع داده ای باشند. به عبارت دیگر می توان گفت Rest Parameters، فضای نگهداری و انتقال برای چندین آرگومان با نوع داده ای یکسان هستند.
برای تعریف یک rest parameter، بایستی قبل از نام آن عملگر جدید Spread Operator که به صورت یک سه نقطه ... (نه بیشتر از و نه کمتر از 3 نقطه) را قرار بدهید. در کد مثال زیر، یک متغیر rest به نام args برای تابع ()show تعریف کرده ایم، سپس در هنگام فراخوانی چندین عدد (که همگی دارای نوع داده ای یکسان هستند) را به آن ارسال کرده و در خروجی نمایش داده ایم:

function show(a, ...args)  
{  
    console.log(a + " " + args);  
}  
show(50,60,70,80,90,100);  
            

خروجی تابع :

50,60,70,80,90,100

            

آموزش کار با خروجی تابع ها در ES6:

تابع ها در ES6 می توانند با استفاده از دستور return یک مقدار (value) را به عامل فراخوانی خود (Caller) برگردانند. به این نوع تابع ها، تابع با مقدار برگشتی (Returning Function) می گویند. یک تابع برگشتی همواره بایستی با دستور return پایان یابد. در هر تابع فقط یک دستور return می تواند قرار بگیرد و حتما بایستی در آخرین خط کد تابع باشد.
هنگامی که جاوا اسکریپت به دستور return می رسد، اجرای تابع متوقف شده، خروجی آن به مبدأ ارسال گشته و کد برنامه از تابع خارج می شود.
به همین دلیل است که از دستور return می توانید برای توقف اجرای تابع استفاده نمایید.

ساختار دستوری عبارت return در ES6:

یک تابع می تواند یک مقدار خروجی (value) را با استفاده از دستور return برگرداند که مقدار خروجی توسط یک متغیر یا عبارت محاسباتی در مقابل آن تعیین می شود. ساختار دستوری استفاده از دستور return به صورت زیر است:

function function_name() {   
    //code to be executed  
    return value;   
}  
            

مثال: در کد مثال عملی زیر یک تابع با دو پارامتر a و b را تعریف کرده ایم که این دو متغیر را با هم جمع کرده و در پایان توسط دستور return به خروجی بر می گرداند:

function add( a, b )  
{  
    return a+b;  
}  
var sum = add(10,20);  
console.log(sum);
            

خروجی تابع :

30
            

آموزش توابع Generator در ES6:

مولد (Generator) یا تابع های مولد (Generator Function) یک مفهوم جدید است که در ES6 معرفی شده است. این امکان یک روش جدید برای کار با ساختارهای تکراری (iterators) و تابع ها در جاوا اسکریپت است.
تابع های مولد ES6 Generator Function نوع جدیدی از تابع ها هستند که می توانید آنها را در میانه اجرای تابع یک یا چندین بار متوقف کرده و مجددا راه اندازی کنید. در بخش آموزش تابع های Generator Function همین آموزش ES6، به تشریح کامل کار با تابع های مولد خواهیم پرداخت.

آموزش کار با تابع های بی نام در ES6:

یک تابع anonymous function را می توانید بدون نام تعریف کنید. به این نوع تابع ها، تابع های بی نام یا ناشناس می گویند. این تابع ها به یک شناسه برای فراخوانی یا اجرا متصل نیستند. می توانید آن ها را به صورت داینامیک در هنگام اجرای برنامه تعریف نمایید.
می توانید یک تابع بی نام anonymous function را درون یک متغیر تعریف کنید. این تعریف همانند تعریف یک تابع معمولی است. ساختار دستوری تعریف یک تابع ناشناس به صورت زیر است:

var y = function( [arguments] )   
{   
     //code to be executed  
}  
            

مثال: در کد مثال عملی زیر، یک تابع بی نام را درون متغیر hello تعریف کرده سپس با فراخوانی آن متغیر، تابع را اجرا نموده و خروجی اش را چاپ کرده ایم:

var hello = function() {  
   console.log('Hello World');    
   console.log('I am an anonymous function');   
 }  
 hello();  
            

خروجی تابع :

Hello World
I am an anonymous function
            

آموزش استفاده از تابع بی نام به عنوان آرگومان تابع:

یکی از کاربردهای تابع بی نام (anonymous function) استفاده از آن به عنوان پارامتر یا آرگومان ارسالی به یک تابع دیگر است.
به مثال زیر دقت نمایید، در تابع ()setTimeout ، یک تابع بی نام را به عنوان آرگومان اول به آن پاس داده و در آرگومان دوم 2000 میلی ثانیه تعیین شده است:

setTimeout(function()   
{  
   console.log('Hello World');  
 }, 2000);  
            

پس از اجرای کد تابع فوق، پیام تابع بعد از 2 ثانیه بر روی صفحه نمایش داده می شود:

Hello World
            

آموزش تعریف پارامتر برای تابع بی نام در ES6:

در ES6 می توانید برای تابع های بی نام یا anonymous function نیز پارامتر یا پارامترهای دلخواه را تعیین کنید. مکانیزم عملکرد همانند تابع های معمولی است که قبلا توضیح دادیم.
مثال: در کد مثال عملی زیر، یک تابع بی نام با دو پارامتر a و b را درون متغیر anon تعریف کرده ایم که مقدار دو پارامتر با هم جمع کرده و در خروجی بر می گرداند. سپس درون تابع ()sum، متغیر anon را با دو پارامتر 100 و 200 فراخوانی کرده که باعث شده مجموع آن ها (300) در خروجی چاپ شود:

var anon = function(a,b)  
{   
   return a+b   
}  
function sum() {   
   var res;   
   res = anon(100,200);   
   console.log("Sum: "+res)    
}   
sum()  
            

خروجی تابع :

Sum: 300
            

آموزش کار با تابع Arrow Function در ES6:

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

آموزش پیش استفاده از تابع Function Hoisting در ES6:

همانند امکان استفاده قبل از تعریف متغیرها (Variable Hoisting) می توانید از تابع ها نیز قبل از تعریف (Function Hoisting) در کد خود استفاده نمایید.
بر خلاف Variable Hoisting، وقتی که یک تابع قبل از کد نویسی استفاده می شود، کل بدنه تعریف تابع بالا آورده می شود، نه فقط نام آن.
در ادامه با ارائه دو مثال عملی، مفهوم پیش استفاده از تابع یا Function Hoisting را نشان می دهیم.
مثال1: در کد مثال عملی زیر، تابع ()hello را قبل از تعریف کردن استفاده کرده ایم. به خروجی و عملکرد کد دقت نمایید:

hello();  
function hello() {  
  console.log("Hello world ");  
}  
            

خروجی تابع :

Hello world
            

همانطور که گفتیم، در کد فوق، تابع را قبل از اینکه تعریف کنیم، استفاده کرده ایم اما کد همچنان کار می کند.
مثال 2: اما تعریف یک تابع درون یک دستور دیگر را نمی توانید از پیش از تعریف مورد استفاده قرار دهید. در کد مثال زیر، یک تابع بی نام anonymous Function را درون متغیر hello تعریف کرده ایم:

hello();  
  
var hello = function() {  
  console.log("Hello world ");  
}  
            

وقتی کد بالا اجرا شود، خطای “Type Error” hello is not a function” یا hello یک تابع نیست رخ می دهد. زیرا تعریف یک تابع درون متغیر یا ساختار دستوری دیگر را نمی توانید heisted کرده یا به عبارت دیگر قبل از تعریف، فراخوانی و استفاده کنید.

TypeError: hello is not a function
            

آموزش کار با سازنده تابع Function Constructor در ES6:

Function Constructor یک روش جدید برای تعریف تابع در جاوا اسکریپت است. ساختار دستوری تعریف تابع (Function Statement) دیگر تنها راه ایجاد یک تابع نیست. می توانید به صورت پویا و دینامیک با استفاده از قابلیت سازنده تابع (Function Constructor) و عملگر new، در هنگام اجرا نیز توابع را تعریف نمایید.
البته کارایی این روش کمتر از حالت تعریف تابع با ساختار تابع (function expression) و یا دستور تابع (function statement) است ولی کاربرد دارد. ساختار دستوری تعریف یک تابع با سازنده Function Constructor به صورت زیر است

var variable_name = new Function(arg1, arg2..., "Body of the Function");  
            

در ساختار دستوری زیر هریک از موارد عبارتند از :

• arg1, arg2, … , argN :در این بخش می توانید پارامترهای تابع را تعریف نمایید. هر آرگومان بایستی یک نام رشته ای معتبر باشد که به شناسه یا identifier معتبر جاوا اسکریپت اشاره دارد.
• بدنه تابع Function Body: این بخش هم یک عبارت متنی شامل دستورات جاوا اسکریپت است که عملکرد کلی تابع را تعیین می کند.

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

// creating a function that takes two arguments and returns the product of both arguments  
var mul = new Function('a', 'b', 'return a * b');  
  
// calling of function  
console.log("The product of the numbers is: " +mul(5, 5));  
            

خروجی تابع :

The product of the numbers is: 25
            

آموزش کار با تابع های اجرای سریع (IIFE):

تابع های IIFE تابع هایی هستند که به محض تعریف، اجرا می شوند. از یک تابع اجرای سریع لحظه ای Immediately Invoked Function Expression) یا به اختصار IIFE می توان برای جلوگیری از استفاده زودتر از تعریف یک متغیر، درون بلاک کد استفاده شود. این تابع امکان دسترسی عمومی به متدها (methods) را همزمان با حذف حریم خصوصی متغیرهای درون تابع، فراهم می کند.
در بخش آموزش کار با تابع های اجرای سریع لحظه ای آموزش ES6 سایت تحلیل داده به تشریح کامل عملکرد این تابع ها خواهیم پرداخت.

آموزش کار با توابع بازگشتی Recursion Function در ES6:

هنگامی که یک تابع خودش را فراخوانی (call) می کند، به آن تابع بازگشتی یا Recursion Function می گویند. عملیات کد بازگشتی (Recursion) یک تکنیک جهت تکرار یک عملیات با فراخوانی دوباره و مکرر تابع تا رسیدن به نتیجه نهایی است.
زمانی که می خواهیم یک تابع را به طور منظم با پارامترهای مختلف درون یک حلقه تکرار کنیم، استفاده از تابع های بازگشتی بهترین راه حل است.
مثال: در کد مثال عملی زیر، تابع فاکتوریل را طراحی کرده ایم. در این کد، تابع ()fact تا زمانی که مقدار متغیر num کمتر یا مساوی 2 باشد، مجددا خود را فراخوانی کرده و اجرا می شود تا num برابر 1 شود:

function fact(num) {  
      if (num <= 1) {  
          return 1;  
      } else {  
          return num * fact(num - 1);  
      }  
  }   
  console.log(fact(6));  
  console.log(fact(5));  
  console.log(fact(4))
            

خروجی تابع :

720
120
24
            

آموزش تفاوت تعریف تابع و اعلان تابع در ES6:

تفاوت اساسی بین آنها این است که تعریف تابع (Function declaration) قبل از اجرای تابع آنالیز و تجزیه و تحلیل می شود اما اعلان تابع (function expression) فقط زمانی که موتور اجرای کد جاوا اسکریپت وارد آن می شود، بررسی می شود.
بر خلاف تعریف تابع، نمی توان اعلان تابع را قبل از نوشتن کد تابع فراخوانی و اجرا کنید (function hoisting). تعریف تابع را می توانید قبل از اینکه کد تابع را نوشته، فراخوانی نمایید.
تفاوت اصلی دیگر بین تابع (function declaration) و اعلان تابع (function expression)، نام تابع است که در اعلان تابع می توانید نام آن جهت ایجاد تابع های بی نام (anonymous function) حذف نمایید.