برنامه نویسی و طراحی سایت

تابع در جاوا اسکریپت — آموزش Function به زبان ساده + مثال

تابع در جاوا اسکریپت — آموزش Function به زبان ساده + مثال

«تابع» (Functions) یکی از مفاهیم اساسی در برنامه نویسی است. توابع به برنامه‌نویسان اجازه می‌دهند کدهای مختصر، استاندارد، قابل استفاده مجدد و قابل نگهداری بنویسند. جاوا اسکریپت عملکردهایی شبیه به اکثر زبان‌های برنامه نویسی ارائه می‌دهد. در جاوا اسکریپت، تابع به کاربر این امکان را می‌دهد تا یک بلوک از کدها را تعریف کند، به آن نامی نسبت بدهد و سپس آن را هر چند باری که می‌خواهد در قسمت‌های مختلف برنامه اجرا کند. استفاده از توابع در جاوا اسکریپت می‌تواند فرایند کدنویسی را بسیار مختصرتر و آسان‌تر کند. در این مطلب آموزشی از مجله تم آف، تابع در جاوا اسکریپت و انواع آن به همراه مثال‌های جذاب و متعدد مورد بررسی قرار گرفته‌اند.

فهرست مطالب این نوشته
تابع در جاوا اسکریپت چیست؟

نام گذاری توابع در جاوا اسکریپت

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

مثالی برای درک بهتر مفهوم پارامتر تابع در جاوا اسکریپت

تعریف یا اعلان تابع در جاوا اسکریپت چگونه است؟

مثال اعلان تابع در جاوا اسکریپت

متغیر محلی فانکشن در جاوا اسکریپت چیست؟

متغیرهای سراسری تابع در جاوا اسکریپت

متغیر سراسری چیست؟

ویژگی های Function در جاوا اسکریپت

شیء آرگومان در جاوا اسکریپت

مقادیر بازگشتی در توابع جاوا اسکریپت

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

تابع ناشناس در جاوا اسکریپت

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

مثالی برای تابع ناشناس در جاوا اسکریپت

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

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

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

عملکرد محدوده تابع و بستارها در جاوا اسکریپت چگونه است؟

مثال هایی برای درک بهتر Scope و Closure در توابع جاوا اسکریپت

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

نحوه عملکرد پارامترهای Rest در جاوا اسکریپت چگونه است؟

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

سخن پایانی

faradars mobile

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

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

  1. اعلان یا تعریف تابع (Function Declaration)
  2. عبارت تابعی (Function Expression)
آموزش تعریف توابع در جاوا اسکریپت (JavaScript) (رایگان)
فیلم آموزش تعریف توابع در جاوا اسکریپت (JavaScript) (رایگان) در تم آف

کلیک کنید

نام گذاری توابع در جاوا اسکریپت

توابع در جاوا اسکریپت به صورت کُنش هستند و بنابراین نام آن‌ها معمولاً فعل است. نام تابع معمولاً باید مختصر و تا حد امکان دقیق باشد و آنچه را توصیف کند که تابع انجام می‌دهد تا کسی که کد را تحلیل می‌کند یا آن را می‌خواند بتواند به آسانی آن را درک کند.

مفهوم تابع در جاوا اسکریپت

برای مثال، توابعی که با show

 شروع می‌شوند معمولاً چیزی را نشان می‌دهند. یا مثلاً نمادهای خاص، همگی بیانگر عمل مشخصی هستند که در زیر تعدادی از آن‌ها به عنوان نمونه آورده شده است.

  • Get…

     : برگرداندن مقداری

  • Calc…

     : محاسبه کردن مقداری

  • Create…

     : ساختن چیزی

  • Check…

     : بررسی کردن چیزی، برگرداندن مقدار Boolean و غیره

مثالی از نام‌گذاری Function در جاوا اسکریپت به صورت زیر است:

showMessage(..)     // shows a message
getAge(..)          // returns the age (gets it somehow)
calcSum(..)         // calculates a sum and returns the result
createForm(..)      // creates a form (and usually returns it)
checkPermission(..) // checks a permission, returns true/false

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

آموزش جاوا اسکریپت JavaScript
فیلم آموزش جاوا اسکریپت JavaScript در تم آف

کلیک کنید

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

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

مثالی برای درک بهتر مفهوم پارامتر تابع در جاوا اسکریپت

مثال زیر تصویر بهتری نسبت به مفهوم تابع در جاوا اسکریپت ارائه می‌دهد.

function ShowMessage(firstName, lastName) {
    alert("Salam" + firstName + " " + lastName);
}

ShowMessage("Ali", "Amini");
ShowMessage("Ahmad", "Rasoli");
ShowMessage(100, 200);

خروجی به صورت زیر است:

Salam Ali Amini 
Salam Ahmad Rasoli 
Salam 100 200

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

function ShowMessage(firstName, lastName) {
    alert("Hello " + firstName + " " + lastName);
}

ShowMessage("Ali", "Amini", "Mr."); // display Hello Ali Amini
ShowMessage("Ahmad"); // display Hello Ahmad undefined
ShowMessage(); // display Hello undefined undefined

تعریف یا اعلان تابع در جاوا اسکریپت چگونه است؟

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

آموزش جاوا اسکریپت JavaScript
فیلم آموزش جاوا اسکریپت JavaScript در تم آف

کلیک کنید

سینتکس اعلان تابع در جاوا اسکریپت به صورت زیر است:

//defining a function
function ()
{
    // code to be executed
};

//calling a function
();

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

  • کلمه کلیدی Function
  • نام تابع
  • پرانتز «می‌تواند پارامترها را بگیرد یا خالی باشد»
  • بدنه تابع
آموزش تعریف توابع در جاوا اسکریپت (JavaScript) (رایگان)
فیلم آموزش تعریف توابع در جاوا اسکریپت (JavaScript) (رایگان) در تم آف

کلیک کنید

مثال اعلان تابع در جاوا اسکریپت

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

function ShowMessage() {
    alert("Salam Faradars!");
}

ShowMessage();

خروجی این تابع به صورت زیر است:

Salam Faradars

متغیر محلی فانکشن در جاوا اسکریپت چیست؟

«متغیر محلی» (Local Varible) در توابع جاوا اسکریپت، متغیری تعریف شده در داخل تابع است که فقط در داخل آن تابع قابل‌ مشاهده و دسترسی خواهد بود. در مثال زیر message یک متغیر محلی محسوب می‌شود و استفاده از آن در خارج تابع منجر به بروز خطا شده است.

function showMessage() {
  let message = "Salam,Faradars!"; // local variable

  alert( message );
}

showMessage(); // salam, faradars!

alert( message ); // 

متغیرهای سراسری تابع در جاوا اسکریپت

Function در جاوا اسکریپت می‌تواند به «متغیر سراسری» (Global Variable) نیز دسترسی داشته باشد. از این متغیرها به عنوان متغیرهای جهانی نیز یاد می‌شود. مثال زیر در رابطه با این موضوع است.

let userName = 'Faradars';

function showMessage() {
  let message = 'salam, ' + userName;
  alert(message);
}

showMessage(); // salam, Faradrs

تابع می‌تواند به متغیر سراسری دسترسی کامل داشته باشد و حتی می‌تواند آن را اصلاح هم بکند. این موضوع در قطعه کد زیر نشان داده شده است.

let userName = 'Faradars'

function showMessage() {
  userName = "Faradars.blog"; // (1) changed the outer variable

  let message = 'Salam, ' + userName;
  alert(message);
}

alert( userName ); // Faradars before the function call

showMessage();

alert( userName ); // Faradars.blog, the value was modified by the function

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

let userName = 'Faradars';

function showMessage() {
  let userName = "Faradars.blog"; // declare a local variable

  let message = 'Salam, ' + userName; // Faradars.blog
  alert(message);
}

// the function will create and use its own userName
showMessage();

alert( userName ); // Faradars, unchanged, the function did not access the outer variable

متغیر سراسری چیست؟

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

مطلب پیشنهادی:

متغیرهای جاوا اسکریپت و ذخیره سازی اطلاعات در آنها — راهنمای مقدماتی

شروع مطالعه

ویژگی های Function در جاوا اسکریپت

توابع در جاوا اسکریپت باید کوتاه باشند و دقیقاً یک کار را انجام دهند. برخی مواقع شاید ارزش آن را داشته باشد که تابع را به چند تابع کوچک‌تر تقسیم کنیم، اما همیشه پیروی از این قانون چندان آسان نیست و شاید اصلاً امکان‌پذیر نباشد. تقسیم توابع به توابع جداگانه،  آزمایش و اشکال‌زدایی را آسان‌تر می‌کند. برای مثال، تابع showPrimes(n)

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

function showPrimes(n) {
  nextPrime: for (let i = 2; i 

نوع دوم، از تابع اضافی دیگری به نام isPrime(n)

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

function showPrimes(n) {

  for (let i = 2; i 

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

آموزش رایگان جاوا اسکریپت JavaScript – سریع و آسان در ۱۵۰ دقیقه
فیلم آموزش رایگان جاوا اسکریپت JavaScript – سریع و آسان در ۱۵۰ دقیقه در تم آف

کلیک کنید

شیء آرگومان در جاوا اسکریپت

همه توابع در جاوا اسکریپت می‌توانند به طور پیش‌فرض از «شیء آرگومان» (Arguments Object) استفاده کنند. شیء آرگومان شامل مقدار هر پارامتر است. شیء آرگومان‌ها یک شی شبیه آرایه هستند. با استفاده از شاخصی مشابه آرایه می‌توان به مقادیر آن دسترسی پیدا کرد. با این حال، شیء آرگومان در جاوا اسکریپت از روش‌های آرایه پشتیبانی نمی‌کند. می‌توان با استفاده از شیء آرگومان‌های تابع، در داخل آن تابع به آرگومان‌های آن مراجعه کرد.

function ShowMessage(firstName, lastName) {
    alert("Salam " + arguments[0] + " " + arguments[1]);
}

ShowMessage("Ali", "Amini"); 

ShowMessage("Ahmad", "Rasoli");

ShowMessage(100, 200);

شیء آرگومان، حتی اگر تابع هیچ پارامتری را شامل نشود بازهم معتبر است. مثال زیر این موضوع را بیان می‌کند.

function ShowMessage() {
    alert("Salam " + arguments[0] + " " + arguments[1]);
}

ShowMessage("Ali", "Amini"); // display Salam Ali Amini

شیء آرگومان را می‌توان با استفاده از حلقه For در جاوا اسکریپت پیمایش کرد. در مثال زیر این موضوع نشان داده شده است.

function ShowMessage() {

    for(var i = 0; i 

به صورت کلی در مورد آرگومان و نقش آن در Functions در جاوا اسکریپت می‌توان گفت که اگر تعداد آرگومان‌ها بیشتر از تعداد تعریف شده باشند، می‌توان با استفاده از شیء آرگومان در جاوا اسکریپت به آن‌ها دسترسی پیدا کرد.

مقادیر بازگشتی در توابع جاوا اسکریپت

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

 ، مقداری را بازگرداند. مثال زیر در این رابطه است.

function Sum(val1, val2) {
    return val1 + val2;
};

var result = Sum(10,20); // returns 30

function Multiply(val1, val2) {
    console.log( val1 * val2);
};

result = Multiply(10,20); // undefined

در مثال بالا، تابعی به نام Sum

 ، دو متغیر val1

  و val2

 را با هم جمع می‌کند و نتیجه را بازمی‌گرداند. بنابراین، کد فراخوانی شده می‌تواند مقدار بازگشتی را دریافت کرده و آن را به متغیری اختصاص دهد. تابع دوم Multiply

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

function multiple(x) {

    function fn(y)
    {
        return x * y;
    }
    
    return fn;
}

var triple = multiple(3);
triple(2); // returns 6
triple(3); // returns 9

همان‌طور که گفته شد، برای ایجاد تابعی که پس از فراخوانی تابع به یک مقدار تبدیل شود، از کلمه کلیدی Return

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

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

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

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

جاوا اسکریپت به کاربر این امکان را می‌دهد تا تابعی را به متغیری اختصاص دهد و سپس از آن متغیر در جاوا اسکریپت به عنوان تابع استفاده کند. به این عمل، ساخت «عبارت تابعی» (Function Expression) می‌گویند. عبارت تابع روش دیگری برای ابراز و استفاده از تابع در جاوا اسکریپت است.

آموزش JavaScript ES6 جاوا اسکریپت
فیلم آموزش JavaScript ES6 جاوا اسکریپت در تم آف

کلیک کنید

این روش از نظر سینتکسی، شباهت یادی به اعلان تابع دارد، اما عبارت تابعی به کاربر این امکان را می‌دهد که تابع را با نام تعریف کند یا نام تابع را حذف کند که در این صورت به آن تابع ناشناش گفته می‌شود. سینتکس عبارت تابعی در جاوا اسکریپت به صورت زیر است.

let namedFunction = function myFunction(){
	//some code here...
}

در این مثال، تابع دارای نام myFunction

 است و در آن، تابع دارای نام بوده و به هیچ وجه ناشناس نیست. هنگام تعریف یک تابع ناشناس، نام تابع حذف می‌شود. مثالی از ابراز تابع به شکل عبارت در جاوا اسکریپت به صورت زیر است:

var add = function sum(val1, val2) {
    return val1 + val2;
};

var result1 = add(10,20);
var result2 = sum(10,20); // not valid

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

آموزش JavaScript ES6 جاوا اسکریپت
فیلم آموزش JavaScript ES6 جاوا اسکریپت در تم آف

کلیک کنید

تابع ناشناس در جاوا اسکریپت

جاوا اسکریپت به کاربر اجازه می‌دهد تا تابع را بدون هیچ نامی تعریف کند. این تابع بدون نام، «تابع ناشناس» (Anonymous Function) نامیده می‌شود. وقتی تابع ناشناس تعریف می‌کنیم، درست مثل مثال زیر، نام تابع حذف می‌شود:

let anonymousFunction = function(){
	//some code here...
}

ملاحظه می‌شود که تابع فوق به یک متغیر اختصاص داده شده‌ است. کلمه کلیدی Function

 یک «مقدار تابعی» (Function Value) ایجاد می‌کند که وقتی به عنوان «عبارت» (Expression) به کار می‌رود، می‌توان آن را به متغیری نسبت داد. بنابراین، برای فراخوانی این تابع، از نام متغیر استفاده می‌شود. نام متغیر در واقع به‌ عنوان نام جدید تابع عمل می‌کند.

تابع ناشناس در جاوا اسکریپت

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

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

  • ارجاع تابع Callback
  • ایجاد «بستار» (Closure)
  • «عبارت تابعی بلافاصله فراخوانی شده» (Immediately Invoked Function Expressions | IIFE)

مثالی برای تابع ناشناس در جاوا اسکریپت

در ادامه، مثالی برای درک بهتر تابع ناشناس در جاوا اسکریپت ارائه شده است.

var showMessage = function (){
    alert("Salam!");
};

showMessage();

var sayHello = function (firstName) {
    alert("Salam " + firstName);
};

showMessage();

sayHello("Faradars");

خروجی به صورت زیر است:

Salam Faradars

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

«توابع فوری فراخوانی شده» (Immediately Invoked Function Expressions) که به اختصار IIFE خطاب می‌شود، یکی دیگر از نمادگان عبارت‌های تابعی در جاوا اسکریپت (تابع ناشناس) است که به صورت مجزا کار می‌کند و مستقل از هر کد دیگری است. این تابع در جاوا اسکریپت بلافاصله در جایی که تعریف شده است، فراخوانی می‌شود. سینتکس آن به صورت زیر است:

(function (){
	//function body
})();

یکی از موارد استفاده از IIFE این است که متغیری را در بر بگیرد که احتمالاً دوباره در داخل کدها استفاده نشود. بنابراین به محض اجرای تابع، متغیر موجودیت پیدا خواهد کرد.

آموزش ویو جی اس – فریم ورک Vue.js در جاوا اسکریپت JavaScript
فیلم آموزش ویو جی اس – فریم ورک Vue.js در جاوا اسکریپت JavaScript در تم آف

کلیک کنید

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

در جاوا اسکریپت، تابع می‌تواند یک یا چند تابع درونی داشته باشد که به آن‌ها «توابع تودرتو» (Nested Functions) می‌گویند. تابع داخلی می‌تواند به متغیرها و پارامترهای تابع بیرونی دسترسی داشته باشد. با این حال، تابع بیرونی نمی‌تواند به متغیرهای تعریف شده در داخل توابع داخلی دسترسی پیدا کند.

آموزش جاوا اسکریپت JavaScript
فیلم آموزش جاوا اسکریپت JavaScript در تم آف

کلیک کنید

برای درک بهتر توابع تو‌درتوی جاوا اسکریپت در ادامه مثالی ارائه شده است.

function ShowMessage(firstName)
{
    function SayHello() {
        alert("Salam" + firstName);
    }

    return SayHello();
}

ShowMessage("Faradars");

خروجی در ادامه آمده است.

Salam Faradars

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

«توابع پیکان» (Arrow Function) در جاوا اسکریپت نماد دیگری از عبارت تابعی هستند، اما سینتکس کوتاه‌تری دارند. آن‌ها اولین بار در ES6 معرفی شدند و به کاربر در نوشتن کدهای تمیزتر کمک می‌کنند.

توابع پیکان در javascript

در توابع پیکان، کلمه کلیدی تابع حذف شده می‌شود و به جای آن از علامت پیکان (=>)

  استفاده خواهد شد. سینتکس آن به صورت زیر است:

let nameOfFunction = (parameters) => {
	//function body
}

عملکرد محدوده تابع و بستارها در جاوا اسکریپت چگونه است؟

«محدوده» (Scope) مربوط به مباحث «دسترس‌پذیری» (Accessibility) در جاوا اسکریپت است. هر تابع جدیدی که تعریف می‌شود، محدوده‌ای جدید ایجاد می‌کند که به نام «محدوده تابع» (Function Scope) شناخته می‌شود. متغیرهای ایجاد شده در محدوده تابع، خارج از آن محدوده قابل ‌مشاهده یا قابل دسترسی نیستند.

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

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

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

این مفهوم در جاوا اسکریپت به‌عنوان «بستار» (Closure) شناخته می‌شود. با این حال، تابع والد نمی‌تواند به متغیرهای ایجاد شده در تابع فرزند دسترسی داشته باشد. به این ترتیب، متغیرها و توابع داخل تابع فرزند به دامنه خود محدود می‌شوند.

مثال هایی برای درک بهتر Scope و Closure در توابع جاوا اسکریپت

در ادامه مثال‌هایی برای بررسی عملکرد محدوده و بستار در جاوا اسکریپت آمده است. ابتدا برای Scope مثال زیر ارائه می‌شود.

//variables defined in the global scope

let  a = 40;
let b = 20;

//this function is also defined in the global scope

function parentFunc(){
	//access variables a and b inside this function

	console.log(a + b); 
}

خروجی به صورت زیر است:

60

همچنین برای نمونه در مثال زیر تابع فرزند در داخل تابع والد تعریف شده است.

//variables defined in the global scope

let a = 40;
let b = 20;

//this function is also defined in the global scope

function parentFunc(){
	let  name = “Doe”;
    
    //this inner function is defined inside the parent function scope
    
	function childFunc(){
		console.log(`${name} is ${a - b} years old`); 
      }
    return childFunc();
}

parentFunc(); //ouput: Doe is 20 years old

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

console.log(c);

function parentFunc(){
	let c = 30
} 

//output: reference error - c is not define

در مثال زیر سعی شده است به متغیر ایجاد شده در یک تابع تودرتو در تابع والد دسترسی ایجاد شود.

function parentFunc(){
	console.log(age);
	function childFunc(){
		let  age = 20;
	} 
    return childFunc();
}

parentFunc(); 

خروجی به صورت زیر است.

ReferenceError: age is not defined
    at parentFunc (:10:15)
    at :23:1
    at dn (:16:5449)

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

در اصل، زمانی که هیچ مقداری به طور صریح به پارامترهای تابع داده نشود، پارامترهای تابع به صورت تعریف نشده تخصیص داده می‌شوند. در چنین مواقعی، پارامترهای پیش‌فرض به برنامه‌نویس این امکان را می‌دهند تا زمانی که تابع تعریف می‌شود، مقداری پیش‌فرض را به پارامترها اختصاص دهد. در ادامه مثالی برای این مورد ارائه شده است.

function greeting(name, message = ”Salam”){
	console. log(`${messgae}  ${name}`)
}

greeting(‘Faradars’); //output:Salam Faradars
//you can also assign a new value to the default parameter 
//when you call the function
greeting(‘Doe’, ‘Hi’); //output: Salam Doe

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

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

کلیک کنید

نحوه عملکرد پارامترهای Rest در جاوا اسکریپت چگونه است؟

با پارامترهای Rest ، می‌توان تابعی را برای ذخیره چندین آرگومان در آرایه تعریف کرد. این پارامترها به ویژه زمانی مفید هستند که تابع با چندین آرگومان فراخوانی شود.

fdbadvert id=’827857′]{“align”:”default”}[/fdbadvert]

مثال زیر این موضوع را نشان می‌دهد.

function sayHello(message, ...names){
  names.forEach(name => console.log(`${message} ${name}`));
}

sayHello('Hello', "Faradars", "Faradars.blog", "Doe");

خروجی به صورت زیر خواهد بود.

Hello Faradars
Hello Faradars.blog
Hello Doe

درست مانند پارامترهای پیش‌فرض، پارامترهای Rest

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

آموزش ری اکت روتر React Router برای مسیریابی بین صفحات وب
فیلم آموزش ری اکت روتر React Router برای مسیریابی بین صفحات وب در تم آف

کلیک کنید

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

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

  1. تابع در جاوا اسکریپت به کاربر این امکان را می‌دهد که بلوکی ایزوله از کدها را تعریف کند، آن را نام‌گذاری کند و سپس آن را هر چند بار که می‌خواهد اجرا کند.
  2. Function در جاوا اسکریپت را می‌توان با استفاده از کلمه کلیدی Function

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

  3. تابع می‌تواند شامل یک یا چند پارامتر باشد. تعیین مقادیر پارامتر تابع در حین اجرای آن اختیاری است.
  4. تعیین نوع در جاوا اسکریپت به صورت پویا انجام می‌شود، بنابراین پارامتر تابع در جاوا اسکریپت می‌تواند مقدار هر نوع داده‌ای را نگه دارد.
  5. هنگام فراخوانی تابع می‌توان آرگومان‌های کمتر یا بیشتری را مشخص کرد.
  6. همه توابع می‌توانند به طور پیش‌فرض به جای نام پارامترها به شیء آرگومان‌ها دسترسی داشته باشند.
  7. تابع می‌تواند تابع دیگری را به عنوان خروجی بازگرداند.
  8. جاوا اسکریپت به کاربر امکان می‌دهد توابع ناشناس ایجاد کند که باید به متغیری اختصاص داده شوند.
  9. مقادیر ارسال شده به تابع به‌ عنوان پارامتر در متغیرهای محلی آن کپی می‌شوند.
  10. تابع ممکن است به متغیرهای بیرونی دسترسی داشته باشد. این فرایند فقط با رویکرد از داخل به بیرون کار می‌کند. کد خارج از تابع، نمی‌تواند به متغیرهای محلی یا داخلی خود دسترسی داشته باشد.
  11. تابع می‌تواند مقداری را برگرداند و اگر این‌طور نباشد، نتیجه آن «تعریف نشده» (Undefined) است.
  12. برای درک آسان تابع و پاک‌سازی کدها، توصیه می‌شود عمدتاً از متغیرها و پارامترهای محلی در تابع و نه از متغیرهای سراسری استفاده کنیم.
  13. درک تابعی که پارامترها را دریافت می‌کند، با آن‌ها کار می‌کند و نتیجه‌ای را برمی‌گرداند، همیشه آسان‌تر از تابعی است که هیچ پارامتری دریافت نمی‌کند.

سخن پایانی

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

مجموعه آموزش جاوا اسکریپت (JavaScript)
فیلم مجموعه آموزش جاوا اسکریپت (JavaScript) در تم آف

کلیک کنید

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.