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

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

پیش‌نیازها

• سواد مقدماتی رایانه
• درکی ابتدایی از HTML و CSS
• آشنایی اولیه با جاوا اسکریپت به خصوص «تابع‌ها به عنوان بلوک‌های کد با قابلیت استفاده مجدد»

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

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

کلیک کنید

با کلیک روی لینک زیر می‌توانید قسمت قبلی این مجموعه مطلب را مطالعه کنید:

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

مقادیر بازگشتی چه هستند؟

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

1var myText = 'I am a string';
2var newString = myText.replace('string', 'sausage');
3console.log(newString);
4// the replace() string function takes a string,
5// replaces one substring with another, and returns
6// a new string with the replacement made

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

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

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

استفاده از مقادیر بازگشتی در تابع سفارشی

برای بازگشت یک مقدار از تابع سفارشی باید از کلیدواژه return استفاده کنیم. این کلیدواژه را در مثال ترسیم دایره‌ها در مقاله «حلقه‌ها در جاوا اسکریپت — راهنمای کاربردی» ملاحظه کردیم. در این مثال که کد آن در زیر ارائه شده است، تابع ()draw ده دایره تصادفی را روی یک <canvas> در HTML رسم می‌کند.

1function draw() {
2  ctx.clearRect(0,0,WIDTH,HEIGHT);
3  for (var i = 0; i < 100; i++) {
4    ctx.beginPath();
5    ctx.fillStyle = 'rgba(255,0,0,0.5)';
6    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
7    ctx.fill();
8  }
9}

در هر بار تکرار حلقه، سه فراخوانی به تابع ()random صورت می‌گیرد تا سه مقدار تصادفی به ترتیب برای مختصات x، مختصات y و شعاع دایره بازگشت یابد. تابع ()random یک پارامتر می‌گیرد که عددی کامل است و یک عدد تصادفی کامل بین 0 و آن عدد بازگشت می‌دهد. ظاهر آن چنین است:

1function randomNumber(number) {
2  return Math.floor(Math.random()*number);
3}

این کد را می‌توان به صورت زیر نوشت:

1function randomNumber(number) {
2  var result = Math.floor(Math.random()*number);
3  return result;
4}

اما نوشتن نسخه اولیه سریع‌تر و فشرده‌تر است. هر بار که تابع فراخوانی می‌شود، نتیجه محاسبه (Math.floor(Math.random()*number را بازگشت می‌دهیم. این مقدار بازگشتی در نقطه‌ای که تابع فراخوانی می‌شود، مورد استفاده قرار می‌گیرد و سپس اجرای کد ادامه می‌یابد. از این رو برای نمونه اگر کد زیر را اجرا کنیم:

1ctx.arc(random(WIDTH)، random(HEIGHT)، random(50)، 0، 2 * Math.PI);

فراخوانی‌های ()random مقادیری به ترتیب به صورت 500، 200 و 35 بازگشت می‌دهند. در این حالت این خط کد را می‌توان به صورت زیر تصور کرد:

1ctx.arc(500، 200، 35، 0، 2 * Math.PI);

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

یادگیری عملی

در این بخش قصد داریم تابع‌های سفارشی خود را که شامل مقادیر بازگشتی هستند بنویسیم. قبل از هر چیز کد زیر را در یک فایل به نام function-library.html درج و روی سیستم خود ذخیره نمایید.

1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Function library example</title>
6  <style>
7    input {
8      font-size: 2em;
9      margin: 10px 1px 0;
10    }
11  </style>
12</head>
13<body>
14
15  <input class="numberInput" type="text">
16  <p></p>
17  
18  <script>
19    var input = document.querySelector('.numberInput');
20    var para = document.querySelector('p');
21  </script>
22</body>
23</html>

این یک صفحه ساده HTML است که شامل فیلد <input> و یک پاراگراف است. همچنین یک عنصر <script> وجود دارد که در آن یک ارجاع به عناصر HTML در دو متغیر انجام داده‌ایم. این صفحه کوچک به ما امکان وارد کردن یک عدد را در کادر متنی می‌دهد و سپس اعداد مختلف مرتبط با آن را در پاراگراف زیرش نمایش می‌دهد.

در ادامه تابع‌های مفیدی به این عنصر <script> اضافه می‌کنیم. در زیر دو خط کد جاوا اسکریپت موجود، تعاریف تابع زیر را اضافه کنید:

1function squared(num) {
2  return num * num;
3}
4
5function cubed(num) {
6  return num * num * num;
7}
8
9function factorial(num) {
10  var x = num;
11  while (x > 1) {
12    num *= x-1;
13    x--;
14  }
15  return num;
16}

تابع‌های ()squared و ()cubed تقریباً مشخص هستند. آن‌ها مربع و مکعب عدد ارائه شده به صورت پارامتر را بازگشت می‌دهند. تابع ()factorial فاکتوریل عدد مفروض را بازگشت می‌دهد.

طراحی Event Handler

سپس قصد داریم روشی برای نمایش اطلاعاتی در مورد عدد وارد شده در کادر متنی نمایش دهیم. بدین منظور این «دستگیره رویداد» (event handler) را زیر تابع‌های موجود اضافه کنید:

1input.onchange = function() {
2  var num = input.value;
3  if (isNaN(num)) {
4    para.textContent = 'You need to enter a number!';
5  } else {
6    para.textContent = num + ' squared is ' + squared(num) + '. ' +
7                       num + ' cubed is ' + cubed(num) + '. ' +
8                       num + ' factorial is ' + factorial(num) + '.';
9  }
10}

در این کد ما یک دستگیره رویداد به نام onchange ایجاد می‌کنیم که هرزمان تغییری در فیلد ورودی رخ دهد اجرا می‌شود. یعنی هنگامی که مقدار جدیدی در کادر متنی وارد کرده و آن را ارائه دهیم (برای مثال از دکمه tab استفاده شود) این کد اجرا خواهد شد. زمانی که این تابع بی‌نام اجرا شود، مقدار موجود وارد شده در کادر ورودی در متغیر num ذخیره می‌شود.

سپس یک آزمون شرطی اجرا می‌کنیم، به طوری که اگر مقدار ورودی عدد نباشد، یک پیام خطا در پاراگراف نمایش می‌یابد. این آزمون بررسی می‌کند که آیا عبارت مقدار true بازگشت می‌دهد یا نه. از تابع (isNaN(num برای بررسی این که مقدار num عدد است یا نه استفاده می‌کنیم. اگر این مقدار عدد نباشد، تابع ما مقدار true بازگشت می‌دهد و در غیر این صورت مقدار بازگشتی flase خواهد بود.

اگر این آزمون مقدار flase بازگشت دهد، یعنی مقدار num عدد است و از این رو جمله‌ای درون عنصر پاراگراف نمایش می‌دهیم که مربع، مکعب و فاکتوریل این عدد را شامل می‌شود. برای تشکیل این جمله باید فراخوانی‌هایی به تابع‌های ()squared() ،cubed و ()factorial انجام داده و مقادیر بازگشتی را مورد استفاده قرار دهیم. در نهایت، کد خود را ذخیره کرده، در مرورگر بارگذاری کنید و مورد بررسی قرار دهید.

تغییرات بیشتر

شما می‌توانید تغییراتی که می‌خواهید را روی کد اجرا کنید. برای نمونه می‌توانید تابع‌های سفارشی دیگری مانند ریشه دوم و سوم عدد مفروض را محاسبه کرده و به صورت مقادیر بازگشتی از آن‌ها استفاده کنید. همچنین می‌توانید تابعی برای محاسبه محیط یک دایره بر اساس شعاع دایره برابر با num بنویسید.

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

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

سخن پایانی

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

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

کلیک کنید

برای مطالعه قسمت بعدی این مجموعه مطلب آموزش جاوا اسکریپت روی لینک زیر کلیک کنید:

• مقدمه‌ ای بر رویدادها در جاوا اسکریپت --- راهنمای کاربردی

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش جاوا اسکریپت (JavaScript)
• مجموعه آموزش‌های طراحی و توسعه پروژه های وب
• جاوا اسکریپت چیست؟ — به زبان ساده
• آموزش جاوا اسکریپت — مجموعه مقالات جامع وبلاگ فرادرس
• رفع خطا‌ها در جاوا اسکریپت — به زبان ساده
• 1۰ کتابخانه و فریم‌ورک جاوا اسکریپت که باید آنها را بشناسید

==