بررسی توابع IIFE ( Immediately Invoked Function Expressions) در جاوااسکریپت

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

توی این پست می‌خوایم یکی از روش‌های داشتن یک برنامه‌ی کپسوله شده رو یاد بگیریم. اسم این روش IIFE هست.

موارد زیر رو توی این قسمت یاد می‌گیریم:

  • IIFE چیه
  • چرا از IIFE استفاده کنیم
  • پاس دادن آرگومان به تابع
  • روش‌های مختلف نوشتن IIFE
  • استفاده از تابع با نام


IIFE چیه؟ ?

این یک مخفف برای عبارت Immediately Invoked Function Expression هست. یک اسم پیچیده، برای یک مفهوم بسیار ساده!

IIFE به تابعی گفته میشه که به محض تعریف شدن، اجرا میشه.

نحوه نوشتن اون به سادگی زیر هست:

(function () {

})();

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

داخل تابع می‌تونیم کار دلخواهمون رو انجام بدیم. خب کاربرد این روش چیه؟


چرا از IIFE استفاده کنیم؟

کپسوله کردن قسمت‌های برنامه! همونطور که می‌دونیم، متغیرهایی که توی توابع تعریف میشن، دارای حوزه محلی (Local Scope) هستن. محصور کردن متغیرها توی یک تابع، ۲ خوبی داره:

۱. متغیرها فقط مخصوص همون تابع یا اسکوپ هستن و از بیرون تابع قابل دسترسی نیستن. یعنی:

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

alert(x); // ReferenceError: x is not defined;

پس خیالمون راحته که متغیرهای ما امن هستن.

۲. متغیرهای گلوبال اسکوپ دستکاری نمی‌شن. یعنی:

const z = 20;

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

alert(z); // 20

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


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

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

(function (x, y) {
  alert(x + y)
})(10, 20); // 30

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

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

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

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


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

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

(function () {

}());

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

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

;(function () {

}());

-(function () {

}());

+(function () {

}());

!(function () {

}());

~(function () {

}());

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

const x = &quotHello&quot

(function () {

}());

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

TypeError: &quotHello&quot is not a function

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

const x = &quotHello&quot(...);

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


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

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

(function mountain() {

}());

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

(function mountain() {

}());

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

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

(function mountain() {
  mountain();
}());
کد بالا یک تابع بازگشتی هست که هیچ شرط پایانی نداره و بنابراین این کد بی‌نهایت بار اجرا و باعث متوقف شدن برنامه میشه

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

const day = (function () {
  return 4;
})()

alert(day) // 4

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

const day = (function () {
  return 4;
})()

alert(day()) // TypeError: day is not a function


خب دوستان این پست هم به پایان رسید. امیدوارم استفاده کرده باشین. روزتون خوش ?✌️


منبع:




همچنین بخوانید:

اسکوپ (scope) در جاوااسکریپت چیست؟

هویستینگ (Hoisting) در جاوااسکریپت چیست؟

بررسی (let - var - const) در جاوااسکریپت

تفاوت دو مساوی (==) و سه مساوی (===) در جاوااسکریپت

بررسی متدهای تعامل با کاربر در جاوااسکریپت : alert , prompt, confirm

استفاده از عبارت 'use strict' در جاوااسکریپت

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

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

بررسی Callback Function در جاوااسکریپت

تفاوت عملگرهای Spread و Rest در جاوااسکریپت

پارامتر پیشفرض(Default Parameter) در جاوااسکریپت

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

بررسی پروتوتایپ (Prototype) در جاوااسکریپت

بررسی Arrow Functions در جاوااسکریپت

بررسی Functions Calling Other Functions در جاوااسکریپت

بررسی آرایه (Array) در جاوااسکریپت

بررسی اشیاء یا آبجکت (objects) در جاوااسکریپت

بررسی حلقه‌ها (Loops) در جاوااسکریپت

بررسی انتخابگرها (Selectors) در جاوااسکریپت

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

بررسی DOM در جاوااسکریپت، آموزش متد querySelector

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

بررسی مفهوم Execution Context در جاوااسکریپت - پشت‌ پرده جاوااسکریپت (بخش اول)

بررسی مفهوم Execution Context در جاوااسکریپت - پشت‌ پرده جاوااسکریپت (بخش دوم)

تعریف API (Application Programming Interface) به زبان ساده!

دِستراکچرینگ (Destructuring) در جاوااسکریپت یعنی چه؟

بررسی عملگر (...) Spread در جاوااسکریپت

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

اتصال کوتاه (Short Circuiting) با عملگرهای منطقی AND و OR (||) در جاوااسکریپت

اتصال کوتاه (Short Circuiting) با عملگر منطقی Nullish coalescing (??) در جاوااسکریپت

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

بررسی Enhanced Object literals در جاوااسکریپ

بررسی Optional Chaining (_.) در جاوااسکریپت

بررسی کاربرد Map و Set در جاوااسکریپت (مقدماتی)

بررسی کاربرد Map و Set در جاوااسکریپت (پیشرفته)

پارامتر پیشفرض (default parameter) در جاوااسکریپت

منظور از first class function در جاوااسکریپت

بررسی متد apply در جاوااسکرت

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

تفاوت متدهای call و apply در جاوااسکریپت

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