سلام دوستان. یک موضوع مهم و کاربردی توی جاوا اسکریپت وجود داره و معمولاً توی مصاحبه‌ها هم پرسیده میشه کلوژر یا Closure هست که امروز مفصل با اون آشنا می‌شیم.

 

کلوژر چیه؟ 🤔

کلوژر (Closure) چیزی نیست جز یک تابع معمولی که داخل یک تابع دیگه تعریف و return میشه:

function outer() {
  return function inner() {

  }
}

توی این کد تابع inner یک کلوژر هست و به این صورت استفاده میشه:

function outer() {
  return function inner() {
    alert("Hi");
  }
}

const x = outer();
x();

برای دیدن خروجی این کد دکمه ► رو بزنین. توی خط ۷ تابع outer رو اجرا کردیم و خروجی اون که تابع inner هست رو ریختیم توی متغیر x. پس الان مقدار متغیر x یک تابع هست و باید مثل یک تابع فراخونی بشه. مثل خط ۸.

اما خب تعریف کردن یک تابع داخل یک تابع دیگه چه مزایایی داره؟ کلوژر دو مشکل رو حل می‌کنه:

۱. پایداری اطلاعات
۲. امنیت اطلاعات

 

۱. پایداری اطلاعات یعنی چی؟ 🤔

کد زیر رو در نظر بگیرین. فرض کنیم یک تابع داریم که تعداد کلیک‌ها رو می‌خواد بشماره (دکمه ► رو بزنین تا خروجی رو ببینین):

function clicked() {
  let counter = 0;
  counter++;

  return counter;
}

alert(clicked()); // 1
alert(clicked()); // 1
alert(clicked()); // 1

ما توی خط‌های آخر ۳ بار این تابع رو اجرا کردیم و انتظار داریم شمارنده عدد 3 رو به ما نشون بده. اما با اجرای این کد می‌بینیم که شمارنده ۳ بار عدد 1 رو نشون داد. چرا؟

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

اینجا به محض اینکه تابع clicked فراخونی میشه، یک متغیر counter مخصوص همون فراخونی تولید میشه و به محض تموم شدن کار تابع، اون متغیر از بین میره.

توی فراخونی اول (خط ۸) یک counter اختصاصی تولید شد و وقتی کار تابع به پایان رسید از بین رفت. همین قضیه برای فراخونی‌های خط ۹ و ۱۰ هم صدق می‌کنه. این یعنی متغیر نیست.