توابع IIFE | آموزش جاوااسکریپت به زبان ساده

const z = 20;

(function () {
  const z = 10;
})()

alert(z); // 20

اینجا خیالمون راحته که متغیرهای حوزه بیرونی امن هستن.

پاس دادن آرگومان به تابع

به روش زیر می‌تونیم به این توابع آرگومان پاس بدیم:

می‌تونیم از همین روش، برای پاس دادن آبجکت سراسری this استفاده کنیم:

// In browsers
(function (global) {
  // ... 
})(window);

// In Node
(function (global) {
  // ... 
})(global);

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

روش‌های مختلف نوشتن IIFE

می‌تونیم این توابع رو بصورت زیر هم بنویسیم:

(function () {

}());

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

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

;(function () {

}());

-(function () {

}());

+(function () {

}());

!(function () {

}());

~(function () {

}());

همه کارکترهایی که در ابتدای این عبارت‌ها می‌بینید برای این قرار داده شدن که کد با خطا مواجه نشه. چطوری کد با خطا مواجه میشه؟ کد زیر رو در نظر بگیرید:

با اجرا کردن این کد این خطا رو می‌گیریم:

TypeError: "Hello" is not a function

چون توی کد بالا، بعد از خط اول سمی‌کالن ; نذاشتیم، کد ما به این صورت در نظر گرفته شد:

const x = "Hello"(...);

جاوااسکریپت فکر کرد که ما می‌خوایم تابعی به اسم Hello رو اجرا کنیم. پس برای همین، همیشه سعی کنیم یا سمی‌کالن‌ها رو بذاریم و یا از کارکترهای بالا در ابتدای IIFE استفاده کنیم.

استفاده از تابع با نام

می‌تونیم اسم این توابع رو هم مشخص کنیم:

(function mountain() {

}());

اسم‌گذاری این توابع، باعث نمیشه که بتونیم بعداً از اون استفاده کنیم و بیشتر برای خطایابی (Debugging) یا استفاده از خود تابع توی خودش به درد می‌خوره:

(function mountain() {

}());

mountain(); // ReferenceError: mountain is not defined

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

(function mountain() {
  mountain();
}());

می‌تونیم این توابع رو بریزیم توی یک متغیر:

باید در نظر داشته باشیم که توی کد بالا، ابتدا IIFE اجرا میشه و خروجی اون به متغیر day نسبت داده میشه. پس مقدار day تابع نیست:

خب دوستان این هم از آخرین قسمت این دوره! امیدوارم از این دوره استفاده کرده باشین. سربلند باشین مثل JS 😉🙌