توابع (Functions) در جاوااسکریپت

در برنامه‌نویسی معمولاً بخشی از کد را چندین بار در قسمت‌های مختلف برنامه نیاز داریم. اگر هر بار همان کد را دوباره بنویسیم، برنامه طولانی، تکراری و سخت برای نگهداری می‌شود. توابع (Functions) در جاوااسکریپت برای حل همین مشکل ایجاد شده‌اند.

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

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

تابع در جاوااسکریپت چیست؟

Function یا تابع، یک بخش قابل استفاده مجدد از کد است که برای انجام یک وظیفه مشخص طراحی می‌شود.

برای مثال، اگر بخواهیم چندین بار پیام مشخصی را نمایش دهیم، به‌جای تکرار console.log می‌توانیم یک تابع ایجاد کنیم:

function sayHello() {
    console.log("Hello!");
}

حالا هر زمان بخواهیم این کد اجرا شود، تابع را صدا می‌زنیم:

sayHello();

خروجی:

Hello!

اگر دوباره تابع را اجرا کنیم:

sayHello();
sayHello();
sayHello();

خروجی:

Hello!
Hello!
Hello!

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

چرا از توابع استفاده می‌کنیم؟

توابع چند مزیت مهم دارند:

کاهش کدهای تکراری

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

افزایش خوانایی

به‌جای اینکه تعداد زیادی دستور در یک قسمت برنامه داشته باشیم، می‌توانیم آن‌ها را در توابع جداگانه قرار دهیم.

استفاده مجدد از کد

یک تابع می‌تواند در قسمت‌های مختلف برنامه استفاده شود.

ساده‌تر شدن نگهداری برنامه

اگر منطق یک عملیات تغییر کند، معمولاً کافی است همان تابع را تغییر دهیم.

تقسیم برنامه به بخش‌های کوچک‌تر

برنامه‌های بزرگ را می‌توان به چندین تابع کوچک و قابل مدیریت تقسیم کرد.

ساختار ساده یک تابع

برای تعریف یک تابع معمولی از کلمه کلیدی function استفاده می‌کنیم:

function functionName() {
    // code
}

مثلاً:

function showMessage() {
    console.log("Welcome to جاوااسکریپت");
}

در این کد:

• function مشخص می‌کند که می‌خواهیم یک تابع ایجاد کنیم.

• showMessage نام تابع است.

• () محل قرار گرفتن پارامترهای تابع است.

• {} بدنه تابع را مشخص می‌کند.

اجرای تابع یا Function Call

فقط تعریف کردن تابع باعث اجرای آن نمی‌شود.

مثلاً:

function showMessage() {
    console.log("Hello");
}

در این مرحله هنوز چیزی در Console نمایش داده نمی‌شود.

برای اجرای تابع باید آن را Call کنیم:

showMessage();

به این عملیات Function Call گفته می‌شود.

مثال:

function showMessage() {
    console.log("Hello");
}

showMessage();

خروجی:

Hello

تعریف تابع و اجرای تابع

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

تعریف تابع:

function sayHello() {
    console.log("Hello");
}

اجرای تابع:

sayHello();

می‌توانیم یک تابع را چندین بار اجرا کنیم:

sayHello();
sayHello();
sayHello();

نام‌گذاری توابع

نام تابع باید مشخص کند که تابع چه کاری انجام می‌دهد.

نام‌های مناسب:

showMessage();
calculatePrice();
checkAge();
getUserName();
printReport();

نام‌های نامناسب:

x();
abc();
test123();
doSomething();

تا حد امکان نام تابع را معنادار و قابل فهم انتخاب کنید.

در جاوااسکریپت معمولاً برای نام‌گذاری توابع از سبک camelCase استفاده می‌شود:

calculateTotal();
getUserInfo();
checkPassword();
showWelcomeMessage();

تابع با پارامتر

تا اینجا توابعی ایجاد کردیم که اطلاعاتی دریافت نمی‌کردند.

اما گاهی می‌خواهیم هنگام اجرای تابع، اطلاعاتی را به آن ارسال کنیم.

برای این کار از Parameter استفاده می‌کنیم.

مثال:

function greet(name) {
    console.log("Hello " + name);
}

در اینجا name یک پارامتر است.

حالا می‌توانیم هنگام اجرای تابع یک مقدار ارسال کنیم:

greet("Ali");

خروجی:

Hello Ali

یا:

greet("Sara");

خروجی:

Hello Sara

Parameter و Argument چه تفاوتی دارند؟

این دو اصطلاح بسیار مهم هستند.

در تعریف تابع:

function greet(name) {
    console.log("Hello " + name);
}

name یک Parameter است.

هنگام اجرای تابع:

greet("Ali");

مقدار "Ali" یک Argument است.

به زبان ساده:

Function Definition
       ↓
Parameter

Function Call
       ↓
Argument

چند پارامتر

یک تابع می‌تواند چند پارامتر داشته باشد.

مثلاً:

function add(a, b) {
    console.log(a + b);
}

اجرای تابع:

add(10, 20);

خروجی:

30

در اینجا:

• a پارامتر اول است.

• b پارامتر دوم است.

• 10 آرگومان اول است.

• 20 آرگومان دوم است.

مثال دیگر:

function showUser(firstName, lastName) {
    console.log(firstName + " " + lastName);
}

showUser("Ali", "Ahmadi");

خروجی:

Ali Ahmadi

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

فرض کنید تابع زیر را داریم:

function introduce(firstName, lastName) {
    console.log(firstName + " " + lastName);
}

اگر بنویسیم:

introduce("Ali", "Ahmadi");

خروجی صحیح خواهد بود:

Ali Ahmadi

اما اگر ترتیب را تغییر دهیم:

introduce("Ahmadi", "Ali");

خروجی:

Ahmadi Ali

بنابراین ترتیب Argumentها باید با ترتیب Parameterها هماهنگ باشد.

مقدار بازگشتی با return

یکی از مهم‌ترین مفاهیم توابع، دستور return است.

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

برای این کار از return استفاده می‌کنیم.

مثال:

function add(a, b) {
    return a + b;
}

حالا می‌توانیم نتیجه را داخل یک متغیر ذخیره کنیم:

let result = add(10, 20);

console.log(result);

خروجی:

30

در اینجا:

return a + b;

نتیجه محاسبه را از تابع خارج می‌کند.

تفاوت console.log و return

این تفاوت بسیار مهم است.

تابع زیر فقط نتیجه را نمایش می‌دهد:

function add(a, b) {
    console.log(a + b);
}

add(10, 20);

اما تابع زیر نتیجه را برمی‌گرداند:

function add(a, b) {
    return a + b;
}

let result = add(10, 20);

با return می‌توانیم نتیجه را در عملیات دیگری استفاده کنیم:

let result = add(10, 20);

console.log(result * 2);

خروجی:

60

اما console.log فقط برای نمایش اطلاعات در Console است.

یک قانون ساده

اگر فقط می‌خواهید چیزی را نمایش دهید:

console.log();

اگر می‌خواهید نتیجه را به کد دیگری تحویل دهید:

return;

اجرای کد بعد از return

وقتی جاوااسکریپت به return می‌رسد، اجرای همان تابع متوقف می‌شود.

مثال:

function test() {
    console.log("A");

    return;

    console.log("B");
}

test();

خروجی:

A

دستور بعد از return اجرا نمی‌شود.

return بدون مقدار

می‌توانیم return را بدون مقدار نیز استفاده کنیم:

function check() {
    console.log("Start");

    return;

    console.log("End");
}

در این حالت تابع متوقف می‌شود.

اگر تابع return نداشته باشد چه می‌شود؟

اگر تابع هیچ مقداری را return نکند، نتیجه اجرای آن معمولاً undefined خواهد بود.

مثال:

function sayHello() {
    console.log("Hello");
}

let result = sayHello();

console.log(result);

خروجی:

Hello
undefined

استفاده از نتیجه تابع

یکی از مزایای مهم return این است که نتیجه تابع را می‌توانیم در قسمت‌های مختلف برنامه استفاده کنیم.

مثلاً:

function multiply(a, b) {
    return a * b;
}

let result = multiply(5, 4);

console.log(result);
console.log(result + 10);

خروجی:

20
30

حتی می‌توانیم نتیجه یک تابع را به تابع دیگری ارسال کنیم:

function add(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a * b;
}

let result = multiply(add(2, 3), 4);

console.log(result);

خروجی:

20

در اینجا:

add(2, 3)

برابر ۵ می‌شود و سپس:

multiply(5, 4)

اجرا می‌شود.

پارامترهای پیش‌فرض

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

مثال:

function greet(name = "Guest") {
    console.log("Hello " + name);
}

اگر مقدار ارسال کنیم:

greet("Ali");

خروجی:

Hello Ali

اگر مقداری ارسال نکنیم:

greet();

خروجی:

Hello Guest

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

مثال کاربردی: محاسبه قیمت

فرض کنید می‌خواهیم قیمت نهایی یک محصول را محاسبه کنیم.

function calculateTotal(price, quantity) {
    return price * quantity;
}

let total = calculateTotal(500000, 3);

console.log(total);

خروجی:

1500000

در اینجا تابع می‌تواند برای محصولات مختلف استفاده شود:

console.log(calculateTotal(100000, 2));
console.log(calculateTotal(250000, 4));
console.log(calculateTotal(800000, 1));

مثال کاربردی: محاسبه تخفیف

می‌توانیم تابعی برای محاسبه قیمت پس از تخفیف ایجاد کنیم:

function calculateDiscount(price, discount) {
    return price - (price * discount / 100);
}

let finalPrice = calculateDiscount(1000000, 20);

console.log(finalPrice);

خروجی:

800000

در این مثال:

• قیمت اولیه: ۱۰۰۰۰۰۰

• تخفیف: ۲۰ درصد

• قیمت نهایی: ۸۰۰۰۰۰

مثال کاربردی: بررسی سن

می‌توانیم یک تابع برای بررسی سن ایجاد کنیم:

function checkAge(age) {

    if (age >= 18) {
        return "Adult";
    }

    return "Minor";
}

console.log(checkAge(25));
console.log(checkAge(15));

خروجی:

Adult
Minor

در این مثال تابع یک نتیجه را برمی‌گرداند و ما می‌توانیم نتیجه را در Console یا قسمت دیگری از برنامه استفاده کنیم.

ترکیب تابع با حلقه

توابع می‌توانند با حلقه‌ها نیز ترکیب شوند.

مثلاً:

function printNumbers(max) {

    for (let i = 1; i <= max; i++) {
        console.log(i);
    }
}

printNumbers(5);

خروجی:

1
2
3
4
5

یا:

printNumbers(10);

خروجی اعداد ۱ تا ۱۰ خواهد بود.

این مثال نشان می‌دهد چگونه می‌توانیم حلقه‌ای که در مقاله قبل یاد گرفتیم را داخل یک تابع قرار دهیم.

Scope چیست؟

یکی از مفاهیم مهم در جاوااسکریپت، Scope است.

Scope مشخص می‌کند یک متغیر در کدام قسمت برنامه قابل دسترسی است.

مثلاً:

function test() {
    let message = "Hello";

    console.log(message);
}

test();

در اینجا message داخل تابع تعریف شده است.

بنابراین داخل همان تابع قابل استفاده است.

اما:

function test() {
    let message = "Hello";
}

console.log(message);

این کد با خطا مواجه می‌شود، زیرا message خارج از محدوده‌ای که در آن تعریف شده قابل دسترسی نیست.

Local Variable

متغیری که داخل تابع تعریف شود، معمولاً یک متغیر Local برای همان Scope است.

مثال:

function calculate() {
    let result = 100;

    console.log(result);
}

calculate();

result در داخل تابع قابل استفاده است.

Global Variable

اگر متغیری خارج از تابع تعریف شود، می‌تواند در Scopeهای مناسب دیگر قابل دسترسی باشد.

مثال:

let name = "Ali";

function showName() {
    console.log(name);
}

showName();

خروجی:

Ali

در اینجا name خارج از تابع تعریف شده است.

با این حال، بهتر است از ایجاد تعداد زیادی متغیر Global خودداری کنیم، زیرا در پروژه‌های بزرگ مدیریت آن‌ها دشوارتر می‌شود.

Function Declaration

روشی که تا اینجا بیشتر استفاده کردیم، Function Declaration نام دارد:

function add(a, b) {
    return a + b;
}

این یکی از ساده‌ترین و مناسب‌ترین روش‌ها برای شروع یادگیری توابع است.

Function Expression

روش دیگری برای تعریف تابع، قرار دادن تابع داخل یک متغیر است.

مثال:

const add = function(a, b) {
    return a + b;
};

حالا می‌توانیم تابع را با نام متغیر اجرا کنیم:

console.log(add(10, 20));

خروجی:

30

در اینجا تابع به متغیر add اختصاص داده شده است.

تفاوت Function Declaration و Function Expression

Function Declaration:

function add(a, b) {
    return a + b;
}

Function Expression:

const add = function(a, b) {
    return a + b;
};

هر دو می‌توانند یک کار مشابه انجام دهند، اما رفتار آن‌ها از نظر نحوه ایجاد و زمان دسترسی یکسان نیست.

در ابتدای یادگیری بهتر است ابتدا Function Declaration را کاملاً یاد بگیرید و سپس به سراغ روش‌های دیگر بروید.

Arrow Function

جاوااسکریپت مدرن روش کوتاه‌تری برای نوشتن تابع ارائه می‌دهد که به آن Arrow Function گفته می‌شود.

مثلاً:

const add = (a, b) => {
    return a + b;
};

استفاده:

console.log(add(10, 20));

خروجی:

30

اگر تابع فقط یک عبارت داشته باشد، می‌توانیم آن را کوتاه‌تر کنیم:

const add = (a, b) => a + b;

این روش بسیار رایج است و در بخش‌های بعدی دوره کاربرد زیادی خواهد داشت.

Arrow Function با یک پارامتر

اگر تابع فقط یک پارامتر داشته باشد، می‌توانیم پرانتز را نیز حذف کنیم:

const square = number => number * number;

استفاده:

console.log(square(5));

خروجی:

25

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

const square = (number) => number * number;

چه زمانی از کدام نوع تابع استفاده کنیم؟

در این مرحله لازم نیست نگران انتخاب پیچیده باشید.

برای شروع:

function add(a, b) {
    return a + b;
}

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

const add = (a, b) => a + b;

در ادامه دوره، هنگام کار با آرایه‌ها، رویدادها، APIها و مفاهیم پیشرفته‌تر، Arrow Function را بیشتر استفاده خواهیم کرد.

توابع بدون پارامتر و با پارامتر

تابع بدون پارامتر:

function sayHello() {
    console.log("Hello");
}

تابع با یک پارامتر:

function sayHello(name) {
    console.log("Hello " + name);
}

تابع با چند پارامتر:

function add(a, b) {
    return a + b;
}

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

function multiply(a, b) {
    return a * b;
}

یک مثال کامل

در مثال زیر چند مفهوم را با هم ترکیب می‌کنیم:

function calculateFinalPrice(price, discount) {

    let discountAmount = price * discount / 100;
    let finalPrice = price - discountAmount;

    return finalPrice;
}

let price = 2000000;
let discount = 15;

let result = calculateFinalPrice(price, discount);

console.log("Final Price:", result);

خروجی:

Final Price: 1700000

در این مثال:

1. تابعی به نام calculateFinalPrice ایجاد کردیم.

2. دو پارامتر price و discount دریافت کردیم.

3. مقدار تخفیف را محاسبه کردیم.

4. قیمت نهایی را محاسبه کردیم.

5. نتیجه را با return برگرداندیم.

6. نتیجه را داخل متغیر result ذخیره کردیم.

اشتباهات رایج در توابع

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

تعریف:

function sayHello() {
    console.log("Hello");
}

اجرای صحیح:

sayHello();

نوشتن:

sayHello;

تابع را به شکل معمول اجرا نمی‌کند.

۲. اشتباه گرفتن return و console.log

این دو دستور کاربرد یکسانی ندارند.

console.log(result);

برای نمایش است.

return result;

برای برگرداندن نتیجه از تابع است.

۳. استفاده از متغیر خارج از Scope

مثلاً:

function test() {
    let number = 10;
}

console.log(number);

متغیر number خارج از Scope خودش قابل استفاده نیست.

۴. انتخاب نام نامناسب

نام تابع باید نشان دهد که چه کاری انجام می‌دهد.

به‌جای:

function x() {
}

بهتر است بنویسیم:

function calculateTotal() {
}

۵. انجام چند کار نامرتبط در یک تابع

بهتر است هر تابع تا حد امکان یک وظیفه مشخص داشته باشد.

مثلاً:

calculateTotal();

برای محاسبه قیمت.

و:

showMessage();

برای نمایش پیام.

این ساختار برنامه را خواناتر می‌کند.

نکات مهم برای نوشتن توابع بهتر

هنگام طراحی تابع به این موارد توجه کنید:

• نام تابع را واضح انتخاب کنید.

• هر تابع را برای یک وظیفه مشخص طراحی کنید.

• از تکرار کد جلوگیری کنید.

• در صورت نیاز نتیجه را با return برگردانید.

• تعداد پارامترها را بی‌دلیل زیاد نکنید.

• از متغیرهای Global غیرضروری دوری کنید.

• توابع را کوتاه و قابل فهم نگه دارید.

• از نام‌گذاری استاندارد مانند camelCase استفاده کنید.

تمرین‌های عملی

تمرین ۱

تابعی به نام sayHello ایجاد کنید که عبارت زیر را نمایش دهد:

Hello جاوااسکریپت

تمرین ۲

تابعی به نام add ایجاد کنید که دو عدد دریافت کرده و مجموع آن‌ها را با return برگرداند.

مثلاً:

console.log(add(10, 20));

خروجی:

30

تمرین ۳

تابعی به نام multiply ایجاد کنید که دو عدد را دریافت کرده و حاصل ضرب آن‌ها را برگرداند.

تمرین ۴

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

راهنمای شروع:

function checkNumber(number) {

    // Your code

}

تمرین ۵

تابعی ایجاد کنید که قیمت و درصد تخفیف را دریافت کند و قیمت نهایی را برگرداند.

مثلاً:

calculateDiscount(1000000, 20);

باید مقدار:

800000

را برگرداند.

تمرین ۶

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

مثلاً:

introduce("Ali", 25);

خروجی:

Ali is 25 years old.

تمرین چالشی

تابعی به نام calculateAverage ایجاد کنید که سه عدد دریافت کند و میانگین آن‌ها را برگرداند.

مثلاً:

console.log(calculateAverage(10, 20, 30));

خروجی:

20

سپس تابع را چند بار با اعداد مختلف اجرا کنید.

جمع‌بندی

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

یاد گرفتیم:

• Function چیست.

• چرا از توابع استفاده می‌کنیم.

• چگونه یک تابع ایجاد کنیم.

• چگونه یک تابع را اجرا کنیم.

• Parameter و Argument چه تفاوتی دارند.

• چگونه چند پارامتر به تابع ارسال کنیم.

• return چه کاربردی دارد.

• تفاوت return و console.log چیست.

• چگونه مقدار پیش‌فرض برای پارامتر تعیین کنیم.

• Scope و متغیرهای Local و Global چه مفهومی دارند.

• Function Declaration چیست.

• Function Expression چیست.

• Arrow Function چیست.

• چگونه توابع را با شرط‌ها و حلقه‌ها ترکیب کنیم.

توابع یکی از پایه‌ای‌ترین و مهم‌ترین مفاهیم جاوااسکریپت هستند. تقریباً در تمام پروژه‌های واقعی از توابع استفاده می‌شود و بسیاری از مفاهیم پیشرفته‌تر جاوااسکریپت نیز بر پایه همین مفهوم ساخته شده‌اند.