تابع (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(); // فراخوانی و اجرای تابع

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

  • هنگام رخ دادن یک رویداد (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

توسعه دهندگان
احسان اسلامی