در قسمت قبل در رابطه با پیکره کلی تعریف توابع و انواع syntax های آن صحبت کردیم . در قسمت های بعد به نحوه عملکرد توابع و انواع توابع از نظر نوع عملکرد و تکنیک های کاربردی در زمان استفاده از توابع می پردازیم

توابع در جاوا اسکریپت قسمت یک – پیکره کلی تعریف توابع و انواع syntax های آن

Call Function by name stored in string

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

window["hello"]
//function hello(person)

window["hello"](person)
"ahmad"

نکته مهم : این روش برای arrow function ها قابل استفاده نمی باشد.

Recursive functions

توابع بازگشتی یک حلقه از اجرای یک task است که به صورت پویا می تواند یک سری پارامتر ها را پیمایش کند . عملکرد توابع بازگشتی بسیار شبیه به حلقه ها است . با این تفاوت که در حلقه ها ما تنها می توانستیم یک level را پیمایش کنیم و برای level بعدی باید حلقه دوم را اجرا می کردیم (Nested loops) .اما در توابع بازگشتی این پیمایش در عمق به صورت پویا انجام می گیرد.

در مثال زیر یک حلقه ساده را با استفاده از توابع بازگشتی اجرا می کنیم:

function recursiveLog(arr,index){
    if(arr.length < index){
        return;
    }
    console.log(arr[index])
    recursiveLog(arr,++index)
}

var a = [1,2,3,4,5]
recursiveLog(a,0)

همان طور که در مثال بالا مشاهده کردید توابع بازگشتی از سه قسمت اصلی تشکیل شده است:

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

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

در یک مثال دیگر ما یک سری آرایه تو در تو از لیست برندهای خودرو داریم و قصد داریم با پیمایش عادی به صورت Recursive Function و با حلقه های معمولی این آرایه تو در تو را نمایش بدهیم :

آرایه ای که قرار است یک بار در یک حلقه تو در تو برای نمایش قرار گیرد و یک بار در یک تابع بازگشتی:

var a = [
  'toyota',
  [
    'lexus'
  ],
  'gmc',
  [
    'cadillac',
    'buick',
    'chevrolet'
  ],
  'hyondai',
  'pegaut'
]

For Loop

var ul = document.createElement('ul')
for(let elemParent of a){
  if(elemParent instanceof Array){
    var ulChild = document.createElement('ul')
    for(let elem of elemParent){
      var listItem = document.createElement('li')
      var text = document.createTextNode(elem)
      listItem.appendChild(text)
      ulChild.appendChild(listItem)
    }
    ul.appendChild(ulChild)
  }else{
    var listItem = document.createElement('li')
    var text = document.createTextNode(elemParent)
    listItem.appendChild(text)
    ul.appendChild(listItem)
  }
}
document.body.appendChild(ul)

Recursive Function

function recursive_list(list){
  var ul = document.createElement('ul')
  for(let elem of list){
    if(elem instanceof Array){
      ul.appendChild(recursive_list(elem));
    }else{
      var listItem = document.createElement('li')
      var text = document.createTextNode(elem)
      listItem.appendChild(text)
      ul.appendChild(listItem)
    }
  }
  return ul;
}
var unsortedList = recursive_list(a)
document.body.appendChild(unsortedList)

تکرار کد در روش Recursive Function کم تر و منطق قابل فهم تری نسبت به استفاده از For Loop دارد.

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

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

در تابع اول رنگ قرمز در حال پیمایش دوم هستیم که gmc است . در پیمایش سوم دوباره به یک آرایه می خوریم که باید مجدد باکس سبز رنگ را در یک تابع بازگشتی از جنس recursiveList اجرا کنیم. باکس سبز رنگ که ۳ پیمایش دارد اجرا می گردد و درنهایت به تابع اول یعنی باکس قرمز پیمایش ۵ می رسیم که تا انتها به صورت ساده نمایش داده می شود و تابع به اتمام می رسد.

Self-Invoking Functions

نوع دیگری از توابع که پس از تعریف در همان جا خودشان را فراخوانی می کنند self-invoking functions می گوییم و syntax آن ها ب شکل زیر می باشد:

(function (parameters) {
    //body of the function
})(arguments);

Executing JavaScript from a string

اجرای یک اسکریپت که در یک متغیر قرار گرفته است (مثلا در قالب یک رشته) در اکثر زبان های برنامه نویسی موجود است . این کار از نظر امنیتی بسیار ریسک بالایی دارد به طوری که در حالت strict mode قابل استفاده نیست . برای این کار ما دو حالت پیاده سازی داریم :

حالت اول ) استفاده از تابع eval

console.log(eval('2 + 2'));
// expected output: 4

حالت دوم ) استفاده از new Function

var F=new Function ("alert('Hello World')");
return(F());