آموزش جاوا اسکریپت – فصل هفدهم: عملیات (Function)

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

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

//defining a function
function <function-name>()
{
    // code to be executed
};

//calling a function
<function-name>();

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

function ShowMessage() {
    alert("Hello World!");
}

ShowMessage();

فصل 17 – مثال 1

در مثال بالا همانگونه که می بینید ما یک فانکشن به نام ShowMessage تعریف کردیم که در هنگام صدا زده شدن پیغام Hello World را در قالب آلرت نشان می دهد.

برای صدا زدن فانکشن ها باید بعد از نام فانکشن () بگذارید. در هنگامی که عملیات پارامتری را دریافت می کند، درون پرانتز پارامتر ها را باید مشخص کنید.

پارامترهای درون یک function جاوا اسکریپت

یک فانکشن قادر است یک یا چند پارامتر داشته باشد. این پارامتر ها باید در هنگام صدا زدن فانکشن توسط برنامه نویس ارسال شوند. پارامترهای ارسالی در اون فانکشن قابل استفاده هستند.

پارامتر ها نیز مانند متغیر ها قادر هستند تا هر نوع داده ممکن را درون خود نگهداری کنند.

مثال زیر نشان می دهد که یک فانکشن چگونه میتواند دارای پارامتر باشد و پارامترهای درون یک فانکشن چگونه استفاده می شود:

function ShowMessage(firstName, lastName) {
    alert("Hello " + firstName + " " + lastName);
}

ShowMessage("Steve", "Jobs");
ShowMessage("Bill", "Gates");
ShowMessage(100, 200);

فصل 17 – مثال 2

شما می توانید یک یا چند پارامتر را که عملیات از شما درخواست می کند به آن ارسال کنید هر کدام از پارامتر ها را شما ارسال نکنید برابر undefined خواهد بود.

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

function ShowMessage(firstName, lastName) {
    alert("Hello " + firstName + " " + lastName);
}

ShowMessage("Steve", "Jobs", "Mr."); // display Hello Steve Jobs
ShowMessage("Bill"); // display Hello Bill undefined
ShowMessage(); // display Hello undefined undefined

فصل 17 – مثال 3

دسترسی به همه پارامتر های درون فانکشن با استفاده از شی arguments

Object پارامتر ها، یک شی پیشفرض با نام arguments است که در هنگام ایجاد هر فانکشن درون آن فانکشن قابل دسترسی است و همه پارامتر ها را مانند یک آرایه درون خود نگه می دارد.

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

نحوه دسترسی به اطلاعات درون این شی مانند آرایه ها با استفاده از “شماره خانه” یا همان index انجام می شود. مثلا اگه پارامتر اول داده شده به فانکشن را بخواهید بدست بیاورید می توانید از arguments[0] استفاده کنید.

به مثال زیر توجه کنید:

function ShowMessage(firstName, lastName) {
    alert("Hello " + arguments[0] + " " + arguments[1]);
}

ShowMessage("Steve", "Jobs"); 

ShowMessage("Bill", "Gates");

ShowMessage(100, 200);

فصل 17 – مثال 4

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

به مثال زیر توجه کنید:

function ShowMessage() {
    alert("Hello " + arguments[0] + " " + arguments[1]);
}

ShowMessage("Steve", "Jobs"); // display Hello Steve Jobs

فصل 17 – مثال 5

شما می توانید با استفاده از حلقه for که در آینده در مورد آن بیشتر توضیح خواهیم داد، به تمامی پارامتر های انتقال داده شده توسط برنامه نویس از درون فانکشن دسترسی پیدا کنید، مانند مثال زیر:

function ShowMessage() {

    for(var i = 0; i < arguments.length; i++){
        alert(arguments[i]);
    }
}

ShowMessage("Steve", "Jobs");

فصل 17 - مثال 6

بازگرداندن یک مقدار در فانکشن جاوا اسکریپت

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

به عنوان مثال زمانی که شما می خواهید از انجام نتیجه یک عملیات مطمئن باشید می توانید درون آن عملیات در صورت موفق بودن مقدار داده بولین true را بازگردانید و در صورت خطا false را به عنوان پاسخ نهایی فانکشن بفرستید.

یک فانکشن می تواند با استفاده از کلمه کلیدی return مقداری را به مکان صدا زده شده بازگرداند.

به مثال زیر توجه کنید:

function Sum(val1, val2) {
    return val1 + val2;
};

var result = Sum(10,20); // returns 30

function Multiply(val1, val2) {
    console.log( val1 * val2);
};

result = Multiply(10,20); // undefined

فصل 17 - مثال 7

مثال بالا یک فانکشن تعریف کردیم با نام Sum که دو پارامتر val1 و val2 را دریافت می کند آنها را با هم جمع می زنند و پاسخ را باز می گرداند. پس مقدار متغیر result برابر مجموع جمع دو عدد ارسالی خواهد شد.

در ادامه مثال یک فانکشن با نام Multiply تعریف کردیم که دو عدد را دریافت می کند و مجموع ضرب آنها را در کنسول مرورگر چاپ می کند. یعنی چیزی بر نمی گرداند. پس متغیر result که در مرتبه دوم برابر فانکشن Multiply شده است درنهایت undefined خواهد شد زیرا این فانکشن فاقد return است.

همچنین شما می‌توانید درون یک فانکشن یک فانکشن دیگر را return کنید. به مثال زیر توجه کنید:

function multiple(x) {

    function fn(y)
    {
        return x * y;
    }
    
    return fn;
}

var triple = multiple(3);
triple(2); // returns 6
triple(3); // returns 9

فصل 17 - مثال 8

عبارت عملیاتی (Function Expression) در زبان جاوا اسکریپت

زبان جاوا اسکریپت به برنامه نویسان اجازه می دهد تا یک فانکشن را به یک متغیر انتساب دهند و سپس از آن متغیر به عنوان فانکشن استفاده کنند. به این نحوه استفاده از فانکشن ها function expression یا عبارت عملیاتی گفته می شود.

مثال از تعریف function expression در زبان جاوا اسکریپت:

var add = function sum(val1, val2) {
    return val1 + val2;
};

var result1 = add(10,20);
var result2 = sum(10,20); // not valid

فصل 17 - مثال 9

فانکشن های بی نام در جاوا اسکریپت

فانکشن های Anonymous یا بی نام در زبان جاوا اسکریپت فابل تعریف هستند. اما باید حتما آن ها به یک متغیر منتسب کرد تا قابل استفاده باشند.

به مثال زیر توجه کنید:

var showMessage = function (){
    alert("Hello World!");
};

showMessage();

var sayHello = function (firstName) {
    alert("Hello " + firstName);
};

showMessage();

sayHello("Bill");

فصل 17 - مثال 10

تعریف یک فانکشن درون یک فانکشن دیگر

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

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

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

function ShowMessage(firstName)
{
    function SayHello() {
        alert("Hello " + firstName);
    }

    return SayHello();
}

ShowMessage("Steve");

فصل 17 - مثال 11