آموزش تابع در JavaScript | آموزش کامل + نمونه کد

قبلی بعدی

تابع (Function) در JS

تابع (Function)، بلوکی از کد است که در زمان نیاز، اجرا می شود. یک تابع برای اجرا باید فراخوانی (invoke) شود.

نکته: بلوک کد درواقع بین براکت مجعد - {} - curly brace قرار می گیرد.

function myFunction() {
    document.getElementById("demo").innerHTML = 4;
}

myFunction();

نکته: کدهایی که در بدنه اصلی تگ اسکرپت نوشته می شوند، بلافاصله با لود شدن صفحه، اجرا می شوند.

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

ساختار تابع در JS

برای ایجاد تابع در JS باید:

از کلمه ی کلیدی function استفاده کنیم.
اضافه کردن نام تابع بعد از کلمه function
اضافه کردن پرانتز () بعد از نام تابع
اضافه کردن یک بلوک به واسطه {}

function name() {
  // بلوکی از کد که باید اجرا شود
}

نکته: نام تابع همانند متغیرها می تواند شامل حروف لاتین، اعداد و _ یا $ باشد. ولی با عدد شروع نمی شود.

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

تابع زمانی اجرا می شود که فراخوانی (invoke) شود.

برای فراخوانی تابع از نام تابع به همراه پرانتز () استفاده می کنیم.

function myFunction () {
    console.log('PNLdev');
}

myFunction(); // فراخوانی و اجرای تابع

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

function func() {
    return 'hi';
}

let result1 = func(); // با پرانتز
document.getElementById("demo1").innerHTML = result1;

let result2 = func; // بدون پرانتز
document.getElementById("demo2").innerHTML = result2;

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

هنگام رخ دادن یک رویداد (event) برای مثال رویداد کلیک کردن روی یک المان html
فراخوانی توسط یک کد js. (مانند نمونه کد بالا)

نکته: برای اطلاعات بیشتر به آموزش رویدادها در JS مراجعه کنید.

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

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

در JS به این پارامترها اصطلاحا، آرگومان (argument) گفته می شود.

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

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

function multiply(p1, p2) { // دو پارامتر دریافت می شود
    result = p1 * p2;
}

multiply(2, 3); // دو پارامتر، در زمان اجرا ارسال می شود

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

تابع بازگشتی (return) در JS

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

دستور return می تواند پارامتر و مقداری را از تابع برگرداند.

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

function multiply(a, b) {
    return a * b; // حاصل ضرب، به محل اجرا تابع برگردانده می شود
}

let x = multiply(2, 2); // مقدار برگشتی از تابع 4 می شود
document.getElementById("test").innerHTML = x;

مزیت استفاده از تابع در JS

می توان یک کد را نوشت و چند بار آن را اجرا کرد. (کم کردن حجم کد و افزایش سرعت)
به وسیله ی پارامتر و return می توان بی نهایت نتیجه مختلف گرفت.

متغیر محلی در JS

متغیر هایی که درون یک تابع تعریف می شوند فقط درون تابع در دسترس هستند، به عبارتی دیگر این متغیر ها فقط دسترسی محلی (از داخل تابع) دارند.

function myFunction() {
    let name = 'ehsan';
    document.getElementById("demo1").innerHTML = name; // چاپ می شود
}

myFunction();
document.getElementById("demo2").innerHTML = name; // چاپ نمی شود

نکته: متغیر هایی که در روند اجرای تابع، درون آن، ساخته می شوند، پس از پایان اجرای تابع حذف می شوند.

خلاصه درس

در این فصل با موارد زیر آشنا شدیم :

تابع و ساختار تابع در JavaScript
فراخوانی تابع در JavaScript
تابع بازگشتی در JavaScript
متغیر های محلی در JavaScript
پارامترهای تابع در JavaScript

قبلی بعدی

توسعه دهندگان

احسان اسلامی