آموزش جاوا اسکریپت – توابع جاوا اسکریپت

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

تابع چیست؟

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

توابع جاوا اسکریپت یا هر زبان برنامه نویسی دیگر, یک راه برای ساخت پکیج کدهای قابل استفاده مجدد که قابل حمل و آسان برای دیباگ است را ارایه می دهد.

بعضی از مزیت های توابع جاوا اسکریپت بصورت زیر است :

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

تعریف و فراخوانی توابع جاوا اسکریپت

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

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

function functionName() {
    // Code to be executed
}

function functionName() {

// Code to be executed

}

یک مثال ساده از تابع که پیام hello را نشان می دهد:

// Defining function
function sayHello() {
    alert("Hello, welcome to this website!");
}
 
// Calling function
sayHello(); // 0utputs: Hello, welcome to this website!

// Defining function

function sayHello() {

alert("Hello, welcome to this website!");

}

// Calling function

sayHello(); // 0utputs: Hello, welcome to this website!

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

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

افزودن پارامتر به توابع

شما می توانید پارامترهایی را هنگام تعریف تابع مشخص کنید. پارامتر در واقع مثل یک نگهدارنده متغییر داخل تابع کار می کند که در زمان اجرا با مقادیر آنها (که آرگومان نامیده می شود) جایگزین می شود.

پارامترها در اولین خط داخل پارانتزهای تابع ست می شوند :

function functionName(parameter1, parameter2, parameter3) {
    // Code to be executed
}

function functionName(parameter1, parameter2, parameter3) {

// Code to be executed

}

تابع displaySum() در مثال زیر دو عدد را به عنوان آرگومان دریافت می کند, و سپس هر دو را جمع و نتیجه را به مرورگر نمایش می دهد.

// Defining function
function displaySum(num1, num2) {
    var total = num1 + num2;
    alert(total);
}
 
// Calling function
displaySum(6, 20); // 0utputs: 26
displaySum(-5, 17); // 0utputs: 12

// Defining function

function displaySum(num1, num2) {

var total = num1 + num2;

alert(total);

}

// Calling function

displaySum(6, 20); // 0utputs: 26

displaySum(-5, 17); // 0utputs: 12

می توانید هر چه تعداد که خواستید, پارامتر ست کنید. به هر حال هر پارامتری که مشخص کردید, در زمان فراخوانی نیاز به پاس دادن آرگومانی به آن خواهد بود, در غیر اینصورت مقدار undefined در نظر گرفته می شود :

// Defining function
function showFullname(firstName, lastName) {
    alert(firstName + " " + lastName);
}
 
// Calling function
showFullname("Clark", "Kent"); // 0utputs: Clark Kent
showFullname("John"); // 0utputs: John undefined

// Defining function

function showFullname(firstName, lastName) {

alert(firstName + " " + lastName);

}

// Calling function

showFullname("Clark", "Kent"); // 0utputs: Clark Kent

showFullname("John"); // 0utputs: John undefined

مقادیر پیش فرض برای پارامترهای تابع ES6

با ES6 می توانید مقادیر پیش فرضی را برای پارامتر های تابع در نظر بگیرید. به این معنا که اگر آرگومانی هنگام فراخوانی تابع ست نشدن, مقادیر پیش فرض پارامترها استفاده می شوند.

این یکی از ویژگی هایی بود که خیلی وقت منتظر معرفی آن در جاوا اسکریپت بودیم.

function sayHello(name = 'Guest') {
    alert('Hello, ' + name);
}

sayHello(); // 0utputs: Hello, Guest
sayHello('John'); // 0utputs: Hello, John

function sayHello(name = 'Guest') {

alert('Hello, ' + name);

}

sayHello(); // 0utputs: Hello, Guest

sayHello('John'); // 0utputs: Hello, John

قبل از ES6 برای داشتن ویژگی بالا نیاز بود همچنین ترفندی را لحاظ کنیم:

function sayHello(name) {
    var name = name || 'Guest'; 
    alert('Hello, ' + name);
}

sayHello(); // 0utputs: Hello, Guest
sayHello('John'); // 0utputs: Hello, John

function sayHello(name) {

var name = name || 'Guest';

alert('Hello, ' + name);

}

sayHello(); // 0utputs: Hello, Guest

sayHello('John'); // 0utputs: Hello, John

برگشت دادن مقادیر از تابع

یک تابع می تواند مقادیر تابع را به عنوان نتیجه با دستور return برگشت دهد. این مقدار می تواند هر نوعی مثل آرایه و آبجکت باشد.

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

// Defining function
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Displaying returned value
alert(getSum(6, 20)); // 0utputs: 26
alert(getSum(-5, 17)); // 0utputs: 12

// Defining function

function getSum(num1, num2) {

var total = num1 + num2;

return total;

}

// Displaying returned value

alert(getSum(6, 20)); // 0utputs: 26

alert(getSum(-5, 17)); // 0utputs: 12

یک تابع نمی تواند چندین مقدار را برگشت دهد, به هر حال, می توانید همان نتیجه را بصورت آرایه ای از مقادیر برگشت دهید.

// Defining function
function divideNumbers(dividend, divisor){
    var quotient = dividend / divisor;
    var arr = [dividend, divisor, quotient];
    return arr;
}
 
// Store returned value in a variable
var all = divideNumbers(10, 2);
 
// Displaying individual values
alert(all[0]); // 0utputs: 10
alert(all[1]); // 0utputs: 2
alert(all[2]); // 0utputs: 5

// Defining function

function divideNumbers(dividend, divisor){

var quotient = dividend / divisor;

var arr = [dividend, divisor, quotient];

return arr;

}

// Store returned value in a variable

var all = divideNumbers(10, 2);

// Displaying individual values

alert(all[0]); // 0utputs: 10

alert(all[1]); // 0utputs: 2

alert(all[2]); // 0utputs: 5

استفاده از عبارت برای تعریف تابع (Expression)

قاعده ای که در مثال های قبلی برای ساخت تابع استفاده می کردیم function Declaration بود. یک قاعده نوشتاری دیگر برای ساخت توابع وجود دارد که function expression‌ نامیده می شود.

// Function Declaration
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Function Expression
var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};

// Function Declaration

function getSum(num1, num2) {

var total = num1 + num2;

return total;

}

// Function Expression

var getSum = function(num1, num2) {

var total = num1 + num2;

return total;

};

همین که function expression در یک متغیر ذخیره شد, متغیر می تواند به عنوان تابع به اینصورت استفاده شود.

var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};
 
alert(getSum(5, 10)); // 0utputs: 15
 
var sum = getSum(7, 25);
alert(sum); // 0utputs: 32

var getSum = function(num1, num2) {

var total = num1 + num2;

return total;

};

alert(getSum(5, 10)); // 0utputs: 15

var sum = getSum(7, 25);

alert(sum); // 0utputs: 32

نکته ۱ : نیازی به استفاده از ; بعد از براکت ها در تعریف توابع بصورت declaration نیست اما در function expression ها باید از ; استفاده کنید.

نکته ۲ : در جاوا اسکریپت توابع می توانند در متغیرها, پاس دادن در توابع دیگر بصورت آرگومان, پاس داده شده به عنوان مقادیر بازگشتی توابع و اجرا در زمان ایجاد, ذخیره شوند.

قاعده نوشتاری function declaration و function expression بسیار مشابه هم هستند اما در استفاده تفاوت دارند.

declaration(); // Outputs: Hi, I'm a function declaration!
function declaration() {
    alert("Hi, I'm a function declaration!");
}
 
expression(); // Uncaught TypeError: undefined is not a function
var expression = function() {
    alert("Hi, I'm a function expression!");
};

declaration(); // Outputs: Hi, I'm a function declaration!

function declaration() {

alert("Hi, I'm a function declaration!");

}

expression(); // Uncaught TypeError: undefined is not a function

var expression = function() {

alert("Hi, I'm a function expression!");

};

همانطور که در مثال بالا می بینید, توابع expression یک خطا را هنگام استفاده قبل تعریف برگشت می دهند اما توابع declaration به راحتی اجرا می شوند.

جاوا اسکریپت تابع declaration را قبل از اجرای برنامه تفسیر می کند. از این رو, مهم نیست که برنامه تابع را قبل از ایجاد, اجرا کرده است چرا که جاوا اسکریپت در پشت صحنه توابع را به بالای محدوده (scope) فعلی منتقل می کند.

توابع expression تا زمانی که به یک متغیر اختصاص داده نشوند, هنوز تعریف نشده هستند.

ES6 یک سینتکس کوتاه تر برای نوشتن توابع expression که arrow function نامیده می شود معرفی کرده است که در بخش های بعدی آن را یاد می گیریم.

درک محدوده متغیر

شما می توانید متغیر ها را هرکجا که خواستید در جاوا اسکریپت تعریف کنید. اما, مکان تعریف آن مشخص می کند که متغیر می تواند داخل جاوا اسکریپت قابل دسترس یا استفاده باشد یا خیر.

این قابل دسترس بودن را محدوده یا scope متغییر می نامیم.

بصورت پیش فرض, متغیرهای تعریف شده داخل یک تابع اسکوپ محلی (local scope) دارند به این معنی که نمی توانند خارج از تابع نمایش یا دستکاری شوند.

// Defining function
function greetWorld() {
    var greet = "Hello World!";
    alert(greet);
}
 
greetWorld(); // Outputs: Hello World!
 
alert(greet); // Uncaught ReferenceError: greet is not defined

// Defining function

function greetWorld() {

var greet = "Hello World!";

alert(greet);

}

greetWorld(); // Outputs: Hello World!

alert(greet); // Uncaught ReferenceError: greet is not defined

به هر حال, هر متغیری که خارج از تابع تعریف شود اسکوپ جهانی (global) داردو می تواند همه جای اسکریپت قابل دسترس باشد, چه داخل یا خارج تابع.

var greet = "Hello World!";
 
// Defining function
function greetWorld() {
    alert(greet);
}
 
greetWorld();  // Outputs: Hello World!
 
alert(greet); // Outputs: Hello World!

var greet = "Hello World!";

// Defining function

function greetWorld() {

alert(greet);

}

greetWorld(); // Outputs: Hello World!

alert(greet); // Outputs: Hello World!

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

در بخش بعدی با آبجکت های در جاوا اسکریپت آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

آموزش جاوا اسکریپت – توابع جاوا اسکریپت

تابع چیست؟

تعریف و فراخوانی توابع جاوا اسکریپت

افزودن پارامتر به توابع

مقادیر پیش فرض برای پارامترهای تابع ES6

برگشت دادن مقادیر از تابع

استفاده از عبارت برای تعریف تابع (Expression)

درک محدوده متغیر

آموزش جاوا اسکریپت – کوکی ها در جاوا اسکریپت

آموزش جاوا اسکریپت – اعتبارسنجی فرم در جاوا اسکریپت

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۲

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۱

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه