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

به نام خدا با عرض سلام و وقت بخیر خدمت دوستان گرامی در راستای آموزش مقدماتی این جلسه به مبحث توابع در جاوا اسکریپت(function) خواهیم پرداخت.باما همراه باشید.

وقتی اسم تابع میاد یاد ریاضی دوران دبیرستان میافتیم که اونجا می گفتیم هر تابع به ازای هر ورودی یک خروجی برای ما تولید میکنه یعنی ما میومدیم یه ورودی میدادیم اخر سر یه خروجی از تابعمون تحویل میگرفتیم برای مثلا اگه تابع ما به شکل f(x)=x+2 بود ما به ازای هر ورودی یه خروجی داشتیم x اینجا پارامتر ورودیه ما بود در جاوا اسکریپت هم فانکش ها دقیقا همین مفهموم رو برای ما دارند.

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

function declaration

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

جهت تعریف تابع از کلمه کلیدی  function استفاده می نماییم و دنبال آن:

1. نام تابع
2. لیستی از پارامترهای تابع، در داخل پرانتز که با کاما از هم جدا میشوند.
3. براکت ها که داخل انها عملی که قرار است تابع  انجام دهد تعریف میشود.

به عنوان مثال، کد زیر یک تابع ساده به نام مربع را تعریف می کند:

function square(number) {
  return number * number;
}

تابع مربع یک عدد را به  عنوان پارامتر را میگیرد.عملیاتی که درون تابع تعریف شده استبه این شکل میباشد که پارامتر تابع یعنی عدد را در خودش ضرب میکند. همچنین عبارت return مقدار برگردانده شده توسط تابع را مشخص می کند:

return number * number

هنگامی که یک شی را به عنوان پارامتر ارسال می کنیم، اگر تابع ویژگی های شی را تغییر دهد، آن تغییر در خارج از تابع  نیز قابل مشاهده است، همانطور که در مثال زیر نشان داده شده است:

function myFunc(theObject) {
  theObject.make = 'Toyota';
}

var mycar = {make: 'Honda', model: 'Accord', year: 1998};
var x, y;

x = mycar.make; // x gets the value "Honda"

myFunc(mycar);
y = mycar.make; // y gets the value "Toyota"
                // (the make property was changed by the function)

function expression

بعضی ازتوابع رو ما میتونیم به صورت  function expression تعریف کنیم. در این توابع ما میتوانیم تابع خودمون رو بدون نام تعریف کنیم.به عنوان مثال تابع مربع رو که در بالاتعریف کردیم رو میتونیم به صورت زیر نیز تعریف نماییم.

const square = function(number) { return number * number }
var x = square(4) // x gets the value 16

بدیهی است یک نام را به تابع اختصاص دهیم در امر شناسایی و اشکال زدایی کار مارا راحت تر میکند.

Calling functions

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

square(5);

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

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

<button onclick="test();">کلیک کنید</button>
 
<script>
 
function test(){
 document.write("سلام خوبی؟");
}
 
</script>

Function scope

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

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

// The following variables are defined in the global scope
var num1 = 20,
    num2 = 3,
    name = 'Chamakh';

// This function is defined in the global scope
function multiply() {
  return num1 * num2;
}

multiply(); // Returns 60

// A nested function example
function getScore() {
  var num1 = 2,
      num2 = 3;

  function add() {
    return name + ' scored ' + (num1 + num2);
  }

  return add();
}

getScore(); // Returns "Chamakh scored 5"

recursive function

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

1. نام تابع
2. arguments.callee
3. یک متغیر درون دامنه که به تابع اشاره دارد

به عنوان مثال، تعریف تابع زیر را در نظر بگیرید:

var foo = function bar() { 
// statements go here
 }

در بدنه تابع، موارد زیر همه معادل هم هستند:

1.    ()bar
2.    ()arguments.callee
3.    ()foo

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

برای مثال…

var x = 0;
while (x < 10) { // "x < 10" is the loop condition
   // do stuff
   x++;
}

… را می توان به یک اعلان تابع بازگشتی تبدیل کرد و به دنبال آن یک تابع را فراخوانی کرد:

function loop(x) {
  if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)")
    return;
  // do stuff
  loop(x + 1); // the recursive call
}
loop(0)

Function parameters

با شروع ECMAScript 2015، دو نوع پارامتر جدید به وجود امد

1. default parameters
2.  rest parameters

Default parameters

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

Without default parameters (pre-ECMAScript 2015)

در گذشته، استراتژی کلی برای تنظیم پیش‌فرض‌ها این بود که مقادیر پارامترها را در بدنه تابع آزمایش می‌کردند و در صورتی که تعریف نشده بودند، مقداری را تعیین می‌کردند.
در مثال زیر، اگر مقداری برای b ارائه نشده باشد، مقدار آن هنگام ارزیابی a*b تعریف نشده است و فراخوانی برای ضرب معمولاً NaN را برمی گرداند. اگرچه، خط دوم در این مثال از این امر جلوگیری می کند:

function multiply(a, b) {
  b = typeof b !== 'undefined' ?  b : 1;

  return a * b;
}

multiply(5); // 5

With default parameters (post-ECMAScript 2015)

با پارامترهای پیش فرض، بررسی دستی در بدنه عملکرد دیگر ضروری نیست. می توانیم 1 را به عنوان مقدار پیش فرض b در محل قرارگیری پارامترهای تابع قرار دهیم:

function multiply(a, b = 1) {
  return a * b;
}

multiply(5); // 5

Rest parameters

rest parameter ها به ما این امکان می دهند تا تعداد نامحدودی از آرگومان ها را به عنوان یک آرایه نمایش دهیم.

در مثال زیر، تابع multiply از rest parameter برای جمع آوری آرگومان ها از دومی تا انتها استفاده می کند. سپس تابع اینها را در آرگومان اول ضرب می کند.

function multiply(multiplier, ...theArgs) {
  return theArgs.map(x => multiplier * x);
}

var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]

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

سایر مقالات

حلقه ها در جاوا اسکریپت

دستورات یا ساختار شرطی در جاوا اسکریپت