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

قبلی بعدی

تابع (Function) در JS

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

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

function myFunction(a1, a2) {
    return a1 * a2;
}

let result = myFunction(2, 2);
document.getElementById("demo").innerHTML = result;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<body>
    <p id="test"></p>
    <script>
        function myFunction(a, b) {
            return a * b; // حاصل ضرب، به محل اجرا تابع برگردانده می شود
        }

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Functions</h1>
    <p id="test1"></p>
    <p id="test2"></p>

    <script>
        let text = "Outside: " + typeof carName;
        document.getElementById("test1").innerHTML = text;

        function myFunction() {
            let carName = "Volvo";
            let text = "Inside: " + typeof carName + " " + carName; 
            document.getElementById("test2").innerHTML = text;
        }

        myFunction();
    </script>
</body>
</html>

نکته: اگر مفاهیم این بخش غیرقابل درک بود نگران نشوید. در درس محدوده های و متغیر ها این موارد توضیح داده می شود.

خلاصه درس

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

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

قبلی بعدی

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

احسان اسلامی