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

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

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

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

1. اعلان یا تعریف تابع (Function Declaration)
2. عبارت تابعی (Function Expression)

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

کلیک کنید

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

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

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

• Get... : برگرداندن مقداری
• Calc... : محاسبه کردن مقداری
• Create... : ساختن چیزی
• Check... : بررسی کردن چیزی، برگرداندن مقدار Boolean و غیره

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

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

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

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

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

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

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

Salam Ali Amini 
Salam Ahmad Rasoli <br>Salam 100 200

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

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

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

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

کلیک کنید

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

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

• کلمه کلیدی Function
• نام تابع
• پرانتز «می‌تواند پارامترها را بگیرد یا خالی باشد»
• بدنه تابع

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

کلیک کنید

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

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

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

Salam Faradars

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

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

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

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

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

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

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

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

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

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

نوع دوم، از تابع اضافی دیگری به نام isPrime(n) برای آزمایش اول بودن یا نبودن استفاده می‌کند.

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

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

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

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

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

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

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

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

در مثال بالا، تابعی به نامSum ، دو متغیر val1  و val2 را با هم جمع می‌کند و نتیجه را بازمی‌گرداند. بنابراین، کد فراخوانی شده می‌تواند مقدار بازگشتی را دریافت کرده و آن را به متغیری اختصاص دهد. تابع دوم Multiply هیچ مقداری را بر نمی‌گرداند، بنابراین نتیجه تعریف نشده را بازمی‌گرداند. تابع می‌تواند تابع دیگری را در جاوا اسکریپت برگرداند. در مثال زیر این موضوع نشان داده شده است.

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

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

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

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

کلیک کنید

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

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

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

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

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

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

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

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

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

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

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

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

Salam Faradars

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

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

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

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

کلیک کنید

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

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

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

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

Salam Faradars

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

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

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

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

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

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

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

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

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

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

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

60

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

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

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

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

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

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

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

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

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

کلیک کنید

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

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

fdbadvert id='827857']{"align":"default"}[/fdbadvert]

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

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

Hello Faradars
Hello Faradars.blog
Hello Doe

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

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

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

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

سخن پایانی

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

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

کلیک کنید

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