Closure در JavaScript چیست؟ آموزش کامل Scope، Lexical Environment و کاربردهای واقعی

اگر بخواهیم فقط یک مفهوم در JavaScript را نام ببریم که درک آن تفاوت بین یک توسعه‌دهنده مبتدی و حرفه‌ای را مشخص می‌کند، آن مفهوم Closure است. Closure نه تنها یکی از پرتکرارترین سوالات مصاحبه‌های فرانت‌اند است، بلکه در روزمره‌ترین کدهایی که می‌نویسید هم حضور دارد، حتی اگر از آن آگاه نباشید. Closure به زبان ساده ترکیبی از یک تابع و محیط Lexical است که در آن تابع تعریف شده است. اما این جمله ساده، عمق بسیار زیادی دارد و برای درک کامل آن باید ابتدا مفاهیم پایه‌ای‌تری مانند Scope، Lexical Scope و Scope Chain را بشناسید. در جاوااسکریپت، هر تابعی که تعریف می‌کنید یک Closure ایجاد می‌کند. Closure به تابع اجازه می‌دهد به متغیرهایی که در تابع بیرونی و محیط بیرونی تعریف شده‌اند دسترسی داشته باشد، حتی بعد از آنکه تابع بیرونی اجرا شده و از Call Stack خارج شده باشد. این رفتار ممکن است در ابتدا عجیب به نظر برسد، اما وقتی مکانیزم Scope و Lexical Environment را درک کنید، Closure کاملاً منطقی خواهد بود. Closure در بسیاری از الگوهای برنامه‌نویسی JavaScript نقش کلیدی دارد. از Event Handler‌ها گرفته تا Module Pattern، از React Hooks گرفته تا Middleware‌های Express.js، همه و همه از Closure استفاده می‌کنند. درک Closure به شما کمک می‌کند کدی بنویسید که هم قدرتمند باشد و هم قابل نگهداری. هدف این مقاله این است که شما را از مفاهیم کاملاً پایه‌ای Scope شروع کند و قدم به قدم به Closure و کاربردهای پیشرفته آن برساند. در پایان این مقاله، نه تنها Closure را درک خواهید کرد، بلکه می‌توانید آن را در مصاحبه‌ها به زبان ساده توضیح دهید و در پروژه‌های واقعی به صورت حرفه‌ای از آن استفاده کنید. قبل از شروع، یک نکته مهم: Closure یک ویژگی زبانی خاص جاوااسکریپت نیست و در بسیاری از زبان‌های برنامه‌نویسی مانند Python، Swift و Rust هم وجود دارد. اما نحوه پیاده‌سازی و رفتار آن در هر زبان متفاوت است. درک Closure در JavaScript به شما کمک می‌کند در سایر زبان‌ها هم این مفهوم را سریع‌تر یاد بگیرید. پس بیایید سفرمان را از Scope شروع کنیم.

Scope یکی از بنیادی‌ترین مفاهیم هر زبان برنامه‌نویسی است و بدون درک آن، امکان درک Closure وجود ندارد. به زبان ساده، Scope مشخص می‌کند که متغیرها در چه بخشی از کد قابل دسترسی هستند. وقتی یک متغیر تعریف می‌کنید، این متغیر فقط در محدوده مشخصی از کد قابل استفاده است و خارج از آن محدوده وجود ندارد. درک Scope به شما کمک می‌کند بدانید چه متغیرهایی در چه نقاطی از کد در دسترس هستند و از تداخل نام‌ها و باگ‌های غیرمنتظره جلوگیری کنید. جاوااسکریپت سه نوع Scope اصلی دارد: Global Scope، Function Scope و Block Scope. هر کدام از این Scope‌ها قوانین خاص خود را دارند و در شرایط مختلف فعال می‌شوند. علاوه بر این سه نوع، مفهوم Lexical Scope نیز وجود دارد که پایه و اساس کار Closure است. وقتی می‌گوییم JavaScript از Lexical Scope استفاده می‌کند، یعنی Scope یک متغیر در زمان نوشتن کد مشخص می‌شود، نه در زمان اجرا. این تفاوت بسیار مهمی است که در بخش‌های بعدی مفصل بررسی خواهیم کرد. مفهوم دیگری که باید بشناسید Scope Chain است. وقتی جاوااسکریپت می‌خواهد مقدار یک متغیر را پیدا کند، ابتدا در Scope فعلی جستجو می‌کند. اگر پیدا نکرد، به Scope بیرونی‌تر می‌رود. این جستجو به صورت زنجیره‌ای ادامه می‌یابد تا به Global Scope برسد. اگر متغیر در هیچ سطحی پیدا نشود، خطای ReferenceError پرتاب می‌شود. مثال ساده: let globalVar = 'من گلوبال هستم'; function outer() { let outerVar = 'من بیرونی هستم'; function inner() { let innerVar = 'من داخلی هستم'; console.log(globalVar); // دسترسی دارد console.log(outerVar); // دسترسی دارد console.log(innerVar); // دسترسی دارد } inner(); } در این مثال، تابع inner به هر سه متغیر دسترسی دارد. globalVar از Global Scope، outerVar از Scope تابع outer و innerVar از Scope خود inner. این زنجیره دسترسی همان Scope Chain است. نکته مهم: Scope Chain فقط به سمت بیرون حرکت می‌کند. یعنی تابع inner می‌تواند به متغیرهای outer دسترسی داشته باشد، اما outer نمی‌تواند به متغیرهای inner دسترسی پیدا کند. این یک‌طرفه بودن دسترسی، اصل مهمی در طراحی نرم‌افزار به نام Encapsulation را تقویت می‌کند. متغیرهای var و let و const هر کدام رفتار متفاوتی از نظر Scope دارند. var از Function Scope پیروی می‌کند در حالی که let و const از Block Scope. این تفاوت یکی از دلایلی است که var دیگر در کد مدرن توصیه نمی‌شود و let و const جایگزین آن شده‌اند.

Global Scope بزرگ‌ترین و بیرونی‌ترین Scope در جاوااسکریپت است. متغیرهایی که خارج از هر تابع یا بلوک تعریف می‌شوند، در Global Scope قرار دارند و از هر نقطه‌ای از کد قابل دسترسی هستند. در محیط مرورگر، Global Scope به شیء window متصل است. وقتی یک متغیر را در سطح بالای کد با var تعریف می‌کنید، این متغیر به صورت خودکار به window اضافه می‌شود. var appName = 'Codingo'; console.log(window.appName); // 'Codingo' اما متغیرهای let و const که در سطح بالا تعریف می‌شوند، به window اضافه نمی‌شوند. آن‌ها در Global Scope وجود دارند اما بخشی از window نیستند. let appName2 = 'Codingo'; console.log(window.appName2); // undefined در محیط Node.js، Global Scope متفاوت است. به جای window از global استفاده می‌شود و متغیرهای سطح بالای ماژول به global اضافه نمی‌شوند. استفاده بیش از حد از Global Scope یکی از بدترین عادت‌ها در برنامه‌نویسی است. دلایل متعددی وجود دارد: اول، تداخل نام‌ها. وقتی چند اسکریپت در یک صفحه اجرا می‌شوند، ممکن است متغیرهای هم‌نام در Global Scope با یکدیگر تداخل پیدا کنند. دوم، وابستگی پنهان. وقتی تابعی از متغیر Global استفاده می‌کند، این وابستگی در ظاهر مشخص نیست و فهم کد را سخت می‌کند. سوم، تست‌پذیری پایین. کدهایی که به Global State وابسته هستند به سختی قابل تست کردن هستند. چهارم، مشکل Namespace Pollution. وقتی تعداد متغیرهای Global زیاد شود، Namespace آلوده می‌شود و احتمال بروز باگ افزایش می‌یابد. برای جلوگیری از این مشکلات، بهتر است تا حد ممکن از Global Scope اجتناب کنید. به جای آن، متغیرها را درون تابع‌ها یا ماژول‌ها تعریف کنید. IIFE یکی از الگوهای قدیمی برای ایجاد Scope خصوصی بود: (function() { var privateVar = 'من خصوصی هستم'; console.log(privateVar); })(); console.log(typeof privateVar); // undefined در کد مدرن با ES Modules، هر فایل خودش یک Scope جداگانه دارد و متغیرهای export نشده خصوصی هستند. همچنین با استفاده از Block Scope در let و const، می‌توانید متغیرها را در محدوده‌های کوچک‌تری نگه دارید. نکته مهم درباره Global Scope این است که درک آن برای فهم Scope Chain و در نهایت Closure ضروری است. Global Scope آخرین حلقه زنجیره Scope است و اگر متغیری در هیچ Scope داخلی‌تری پیدا نشد، جستجو به Global Scope می‌رسد. console.log(x); // اگر x در هیچ Scope‌ای تعریف نشده باشد: ReferenceError اما اگر بدون var و let و const به متغیری مقدار دهید، آن متغیر به صورت خودکار Global می‌شود. این یکی از خطرناک‌ترین رفتارهای جاوااسکریپت قدیمی است. function badPractice() { accidentalGlobal = 'من ناخواسته گلوبال شدم'; } badPractice(); console.log(accidentalGlobal); // 'من ناخواسته گلوبال شدم' استفاده از strict mode این مشکل را برطرف می‌کند: 'use strict'; function goodPractice() { accidentalGlobal = 'خطا می‌دهد'; } // ReferenceError: accidentalGlobal is not defined

Function Scope یکی از مهم‌ترین مفاهیم Scope در جاوااسکریپت است. در JavaScript، هر تابعی که تعریف می‌کنید، یک Scope جدید ایجاد می‌کند. متغیرهایی که داخل تابع با var تعریف می‌شوند، فقط درون همان تابع قابل دسترسی هستند و خارج از آن وجود ندارند. function greet() { var message = 'سلام دنیا'; console.log(message); // 'سلام دنیا' } greet(); console.log(typeof message); // undefined متغیر message فقط داخل تابع greet وجود دارد و خارج از آن قابل دسترسی نیست. این رفتار Function Scope نام دارد. یک نکته مهم درباره var این است که var از Block Scope پشتیبانی نمی‌کند. یعنی اگر متغیر var را داخل یک حلقه for یا بلوک if تعریف کنید، آن متغیر در تمام تابع قابل دسترسی خواهد بود. function example() { if (true) { var x = 10; } console.log(x); // 10، چون var به Block Scope اهمیت نمی‌دهد } example(); این رفتار یکی از دلایلی است که var می‌تواند باگ‌های غیرمنتظره ایجاد کند. به همین دلیل let و const معرفی شدند که از Block Scope پشتیبانی می‌کنند. Function Scope یک ویژگی مهم دیگر هم دارد: پارامترهای تابع هم در همان Function Scope تعریف می‌شوند. function add(a, b) { var result = a + b; // a، b و result همه در یک Scope هستند return result; } Function Scope‌های تو در تو ایجاد Scope Chain می‌کنند. function outer() { var a = 1; function middle() { var b = 2; function inner() { var c = 3; console.log(a + b + c); // 6 } inner(); } middle(); } outer(); در این مثال، inner به متغیرهای a و b و c دسترسی دارد. middle به a و b دسترسی دارد و outer فقط به a. این سلسله مراتب دسترسی همان Scope Chain است. Hoisting نیز یک رفتار مهم در Function Scope است. متغیرهای var به بالای Scope خود Hoist می‌شوند، یعنی تعریف آن‌ها بالا می‌رود ولی مقداردهی در جای خود باقی می‌ماند. function hoistExample() { console.log(x); // undefined، خطای ReferenceError نمی‌دهد var x = 5; console.log(x); // 5 } // کد بالا معادل این است: function hoistExample() { var x; console.log(x); // undefined x = 5; console.log(x); // 5 } اما let و const Hoist نمی‌شوند. آن‌ها در Temporal Dead Zone قرار دارند و دسترسی به آن‌ها قبل از تعریف باعث ReferenceError می‌شود. function tdzExample() { console.log(y); // ReferenceError: Cannot access 'y' before initialization let y = 5; } Function Scope یکی از ارکان اصلی Closure است. وقتی تابعی داخل تابع دیگر تعریف می‌شود، تابع داخلی به متغیرهای Function Scope تابع بیرونی دسترسی دارد. این دسترسی پایه و اساس Closure است که در بخش‌های بعدی مفصل بررسی خواهیم کرد.

Block Scope یکی از مهم‌ترین بهبودهای ES6 در جاوااسکریپت است. Block Scope یعنی متغیر فقط درون بلوک کدی که در آن تعریف شده قابل دسترسی باشد. بلوک کد با آکولاد باز و بسته مشخص می‌شود، مانند بدنه if، for، while یا حتی یک جفت آکولاد خالی. let و const از Block Scope پشتیبانی می‌کنند اما var نمی‌کند. این تفاوت یکی از مهم‌ترین تفاوت‌های بین متغیرهای قدیمی و جدید جاوااسکریپت است. مثال Block Scope با let: { let x = 10; console.log(x); // 10 } console.log(typeof x); // undefined، x فقط داخل بلوک وجود دارد مثال Block Scope با const: { const PI = 3.14; console.log(PI); // 3.14 } console.log(typeof PI); // undefined مقایسه با var: { var y = 20; console.log(y); // 20 } console.log(y); // 20، var از بلوک عبور می‌کند! یکی از مهم‌ترین کاربردهای Block Scope، حلقه for است. تفاوت var و let در حلقه for یکی از معروف‌ترین مثال‌ها در جاوااسکریپت است. مثال با var: for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 1000); } // خروجی: 3, 3, 3 دلیل: var i در Function Scope تعریف شده و بعد از حلقه مقدارش ۳ است. هر سه callback به یک i اشاره می‌کنند. مثال با let: for (let i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 1000); } // خروجی: 0, 1, 2 دلیل: let i در هر تکرار حلقه یک Scope جدید ایجاد می‌کند و هر callback به i مخصوص خودش دسترسی دارد. این مثال به طرز شگفت‌آوری به مفهوم Closure مرتبط است. هر تابع setTimeout یک Closure است که به i مخصوص تکرار خودش دسترسی دارد. const مانند let از Block Scope پشتیبانی می‌کند با این تفاوت که مقدارش قابل تغییر نیست. const x = 10; x = 20; // TypeError: Assignment to constant variable البته const فقط مانع تغییر مقدار اولیه Primitive می‌شود. اگر const به یک آبجکت یا آرایه اشاره کند، محتوای آبجکت قابل تغییر است. const user = { name: 'Ali' }; user.name = 'Sara'; // این کار مجاز است user = {}; // TypeError: Assignment to constant variable نکته مهم دیگر این است که const باید در زمان تعریف مقداردهی شود. const z; // SyntaxError: Missing initializer in const declaration توصیه عمومی: از const به عنوان انتخاب پیش‌فرض استفاده کنید و فقط وقتی نیاز به تغییر مقدار دارید از let استفاده کنید. هرگز از var استفاده نکنید مگر در کد قدیمی که نیاز به سازگاری دارد. Block Scope در Closure نقش مهمی دارد. وقتی تابعی داخل یک بلوک تعریف می‌شود و از متغیرهای آن بلوک استفاده می‌کند، Closure ایجاد می‌شود که به آن متغیرهای Block Scope دسترسی دارد. درک Block Scope برای فهم دقیق Closure در مثال‌های حلقه for ضروری است.

Lexical Scope که Static Scope هم نامیده می‌شود، یکی از مهم‌ترین مفاهیم جاوااسکریپت است و بدون درک آن، Closure قابل فهم نیست. Lexical Scope یعنی Scope یک متغیر بر اساس محل تعریف تابع مشخص می‌شود، نه محل فراخوانی آن. این یعنی وقتی تابعی را تعریف می‌کنید، Scope آن تابع در همان لحظه تعیین می‌شود و بعداً با تغییر محل فراخوانی عوض نمی‌شود. برای درک بهتر، یک مثال ساده: let x = 10; function foo() { console.log(x); } function bar() { let x = 20; foo(); } bar(); // خروجی: 10، نه 20 دلیل: تابع foo در جایی تعریف شده که x برابر ۱۰ است. وقتی foo از bar فراخوانی می‌شود، foo همچنان x را از Scope خودش یعنی Global Scope می‌خواند. اگر جاوااسکریپت از Dynamic Scope استفاده می‌کرد، خروجی ۲۰ می‌شد چون foo از bar فراخوانی شده و x در bar برابر ۲۰ است. اما جاوااسکریپت از Lexical Scope استفاده می‌کند و Scope در زمان تعریف مشخص می‌شود. این مثال به خوبی تفاوت Lexical Scope و Dynamic Scope را نشان می‌دهد. Lexical Scope سه مزیت اصلی دارد: اول، قابل پیش‌بینی بودن. شما می‌توانید با نگاه کردن به کد، بدون اجرا کردن آن، مشخص کنید هر متغیر از کجا می‌آید. دوم، بهینه‌سازی. مفسر جاوااسکریپت می‌تواند در زمان کامپایل Scope را تحلیل کند و بهینه‌سازی‌هایی انجام دهد. سوم، امنیت. متغیرهای داخلی از بیرون قابل دسترسی نیستند. Lexical Environment مکانیزم داخلی است که Lexical Scope را پیاده‌سازی می‌کند. هر Lexical Environment شامل دو بخش است: Environment Record که متغیرهای محلی را نگه می‌دارد و Reference to Outer Environment که به Lexical Environment بیرونی اشاره می‌کند. وقتی تابعی تعریف می‌شود، یک Lexical Environment جدید ایجاد می‌شود که Environment Record آن شامل متغیرهای محلی و پارامترهای تابع است و Reference آن به Lexical Environment محل تعریف اشاره می‌کند. let global = 'گلوبال'; function outer() { let outerVar = 'بیرونی'; function inner() { let innerVar = 'داخلی'; console.log(innerVar); // از Environment Record خودش console.log(outerVar); // از Lexical Environment بیرونی console.log(global); // از Lexical Environment گلوبال } inner(); } outer(); وقتی مفسر به console.log(outerVar) در inner می‌رسد، ابتدا Environment Record inner را جستجو می‌کند. پیدا نمی‌کند. سپس به Outer Reference می‌رود که Environment Record outer است. آنجا outerVar را پیدا می‌کند. این جستجوی زنجیره‌ای همان Scope Chain است که توسط Lexical Environment پیاده‌سازی شده. نکته مهم: Lexical Environment با Scope تفاوت دارد. Scope یک مفهوم مفهومی است اما Lexical Environment یک ساختار داده واقعی است که مفسر در حافظه ایجاد می‌کند. وقتی می‌گوییم Closure، دقیقاً منظورمان این است که تابع، Reference به Lexical Environment محل تعریف خود را حفظ می‌کند. یک مثال جالب: function createMultiplier(factor) { return function(number) { return number * factor; }; } let double = createMultiplier(2); let triple = createMultiplier(3); console.log(double(5)); // 10 console.log(triple(5)); // 15 هر بار که createMultiplier فراخوانی می‌شود، یک Lexical Environment جدید با مقدار factor متفاوت ایجاد می‌شود. تابع return شده به این Lexical Environment اشاره می‌کند. به همین دلیل double و triple مقادیر factor متفاوتی دارند. درک Lexical Environment کلید اصلی درک Closure است.

حالا که Scope، Function Scope، Block Scope، Lexical Scope و Lexical Environment را فهمیدید، وقت آن رسیده که Closure را به طور کامل تعریف کنیم. Closure ترکیبی از یک تابع و Lexical Environment محل تعریف آن تابع است. به عبارت دیگر، Closure به تابع اجازه می‌دهد به متغیرهایی دسترسی داشته باشد که در Scope بیرونی‌اش تعریف شده‌اند، حتی بعد از آنکه تابع بیرونی از Call Stack خارج شده باشد. این جمله بسیار مهم است و یکی از رایج‌ترین سوالات مصاحبه است. بیایید با یک مثال کلاسیک شروع کنیم: function makeCounter() { let count = 0; return function() { count++; return count; }; } let counter = makeCounter(); console.log(counter()); // 1 console.log(counter()); // 2 console.log(counter()); // 3 در این مثال، تابع makeCounter فراخوانی می‌شود و یک متغیر محلی count با مقدار ۰ تعریف می‌کند. سپس یک تابع ناشناس برمی‌گرداند که count را افزایش می‌دهد و مقدارش را برمی‌گرداند. نکته کلیدی اینجاست: وقتی makeCounter اجرا تمام می‌شود، معمولاً باید متغیر count از بین برود. اما چون تابع return شده به Lexical Environment makeCounter اشاره می‌کند، count زنده می‌ماند. هر بار که counter() را فراخوانی می‌کنیم، تابع به همان count دسترسی دارد و مقدارش را افزایش می‌دهد. این Closure است. حالا بیایید مکانیزم داخلی را دقیق‌تر بررسی کنیم. وقتی makeCounter اجرا می‌شود، یک Lexical Environment ایجاد می‌شود: Environment Record: { count: 0 } و Outer Reference: به Global Lexical Environment. وقتی تابع داخلی return می‌شود، این تابع یک Reference به Lexical Environment بالا نگه می‌دارد. حتی بعد از اتمام makeCounter، Garbage Collector نمی‌تواند این Lexical Environment را پاک کند چون یک Reference فعال به آن وجود دارد. به همین دلیل count زنده می‌ماند. یک مثال مهم دیگر: function createGreeting(greeting) { return function(name) { return greeting + ' ' + name; }; } let hello = createGreeting('سلام'); let goodbye = createGreeting('خداحافظ'); console.log(hello('علی')); // 'سلام علی' console.log(goodbye('سارا')); // 'خداحافظ سارا' هر بار createGreeting فراخوانی می‌شود، یک Lexical Environment جدید با مقدار greeting متفاوت ایجاد می‌شود. hello Closure‌ای است که greeting برابر 'سلام' دارد و goodbye Closure‌ای است که greeting برابر 'خداحافظ' دارد. این مثال نشان می‌دهد هر Closure مستقل است و Lexical Environment خودش را دارد. حالا یک مثال پیچیده‌تر: function outer() { let x = 10; function inner() { console.log(x); } x = 20; return inner; } let fn = outer(); fn(); // 20 چرا ۲۰ و نه ۱۰؟ چون Closure به Reference متغیر اشاره می‌کند، نه مقدار آن در لحظه تعریف. وقتی x از ۱۰ به ۲۰ تغییر می‌کند، inner هم مقدار ۲۰ را می‌بیند. این نکته بسیار مهم است و بسیاری از توسعه‌دهندگان آن را اشتباه درک می‌کنند. Closure مقدار لحظه‌ای متغیر را می‌بیند، نه مقدار اولیه آن را. البته const و let به لطف Block Scope، Closure‌های مطمئن‌تری ایجاد می‌کنند چون محدوده دسترسی کوچک‌تر و قابل پیش‌بینی‌تر است. تا اینجا Closure را به صورت تئوری درک کردیم. در بخش‌های بعدی، کاربردهای عملی آن را بررسی می‌کنیم.

یکی از معروف‌ترین باگ‌های جاوااسکریپت که در مصاحبه‌ها بسیار سوال می‌شود، مربوط به Closure در حلقه‌ها است. این باگ زمانی اتفاق می‌افتد که از var در حلقه for استفاده کنید و داخل حلقه تابعی تعریف کنید که به متغیر حلقه ارجاع دهد. مثال کلاسیک: for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, i * 1000); } // خروجی: 5, 5, 5, 5, 5 اکثر توسعه‌دهندگان انتظار دارند خروجی 0, 1, 2, 3, 4 باشد. اما چرا ۵ بار عدد ۵ چاپ می‌شود؟ دلیل: var i در Function Scope تعریف شده و فقط یک متغیر i وجود دارد. وقتی حلقه تمام می‌شود، مقدار i برابر ۵ است. هر پنج تابع setTimeout که Closure‌هایی هستند، به همان یک i اشاره می‌کنند. وقتی callback‌ها اجرا می‌شوند، i قبلاً ۵ شده است. اولین راه‌حل: استفاده از IIFE. این راه‌حل قدیمی و قبل از ES6 است: for (var i = 0; i < 5; i++) { (function(j) { setTimeout(function() { console.log(j); }, j * 1000); })(i); } // خروجی: 0, 1, 2, 3, 4 دلیل کارکرد: هر بار IIFE فراخوانی می‌شود و j مقدار فعلی i را می‌گیرد. هر IIFE یک Lexical Environment جدید می‌سازد و Closure مربوطه به j مخصوص خودش اشاره می‌کند. دومین و بهترین راه‌حل: استفاده از let. for (let i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, i * 1000); } // خروجی: 0, 1, 2, 3, 4 دلیل: let در هر تکرار حلقه یک Scope جدید ایجاد می‌کند. یعنی در واقع پنج متغیر i مجزا وجود دارد و هر setTimeout به i مخصوص تکرار خودش دسترسی دارد. این رفتار let در حلقه for، خودش یک Closure است. مفسر جاوااسکریپت به ازای هر تکرار، مقدار i را در یک Lexical Environment جدید کپی می‌کند. حالا یک مثال واقعی‌تر: فرض کنید ۵ دکمه دارید و می‌خواهید با کلیک هر دکمه شماره‌اش نمایش داده شود. بد: for (var i = 1; i <= 5; i++) { document.getElementById('btn' + i).addEventListener('click', function() { console.log('دکمه ' + i + ' کلیک شد'); }); } // همیشه 'دکمه 6 کلیک شد' نمایش می‌دهد خوب: for (let i = 1; i <= 5; i++) { document.getElementById('btn' + i).addEventListener('click', function() { console.log('دکمه ' + i + ' کلیک شد'); }); } // 'دکمه 1 کلیک شد', 'دکمه 2 کلیک شد', ... یک مثال پیچیده‌تر: function createFunctions() { var result = []; for (var i = 0; i < 3; i++) { result.push(function() { return i; }); } return result; } var funcs = createFunctions(); console.log(funcs[0]()); // 2 console.log(funcs[1]()); // 2 console.log(funcs[2]()); // 2 هر سه تابع مقدار ۲ برمی‌گردانند چون همه به یک i اشاره می‌کنند و مقدار نهایی i برابر ۲ است. راه‌حل با let: function createFunctions() { let result = []; for (let i = 0; i < 3; i++) { result.push(function() { return i; }); } return result; } let funcs = createFunctions(); console.log(funcs[0]()); // 0 console.log(funcs[1]()); // 1 console.log(funcs[2]()); // 2 این مثال‌ها نشان می‌دهند که درک Closure در حلقه‌ها چقدر حیاتی است. فراموش نکنید: با let مشکل Closure در حلقه‌ها خودکار حل می‌شود.

یکی از مهم‌ترین کاربردهای عملی Closure، ایجاد متغیرهای خصوصی یا Private Variables در جاوااسکریپت است. برخلاف زبان‌هایی مانند Java و C# که کلمه کلیدی private دارند، جاوااسکریپت قدیمی چنین قابلیتی نداشت. Closure این مشکل را حل می‌کند. فرض کنید می‌خواهید یک آبجکت حساب بانکی بسازید که موجودی آن از بیرون قابل تغییر نباشد: function createBankAccount(initialBalance) { let balance = initialBalance; return { deposit: function(amount) { if (amount > 0) { balance += amount; return balance; } throw new Error('مقدار نامعتبر'); }, withdraw: function(amount) { if (amount > 0 && amount <= balance) { balance -= amount; return balance; } throw new Error('مقدار نامعتبر'); }, getBalance: function(balance) { return balance; } }; } let account = createBankAccount(1000); console.log(account.getBalance()); // 1000 account.deposit(500); console.log(account.getBalance()); // 1500 account.withdraw(200); console.log(account.getBalance()); // 1300 console.log(account.balance); // undefined - قابل دسترسی نیست! متغیر balance از بیرون قابل دسترسی نیست و فقط از طریق متدهای deposit و withdraw و getBalance قابل تغییر است. این دقیقاً همان Encapsulation است که با Closure پیاده‌سازی شده. Closure ایجاد شده توسط هر سه متد، به Lexical Environment تابع createBankAccount اشاره می‌کند که balance در آن تعریف شده. این الگو بسیار قدرتمند است و در کتابخانه‌ها و فریمورک‌های زیادی استفاده می‌شود. مثال دیگر: ID Generator خصوصی: function createIdGenerator() { let lastId = 0; return function() { lastId++; return 'user_' + lastId; }; } let generateId = createIdGenerator(); console.log(generateId()); // 'user_1' console.log(generateId()); // 'user_2' console.log(generateId()); // 'user_3' let anotherGenerator = createIdGenerator(); console.log(anotherGenerator()); // 'user_1' - مستقل از generator اول مثال سوم: Validator با وضعیت خصوصی: function createValidator(rules) { let errors = []; return { validate: function(data) { errors = []; for (let key in rules) { if (!rules[key](data[key])) { errors.push(key + ' نامعتبر است'); } } return errors.length === 0; }, getErrors: function() { return errors.slice(); } }; } با استفاده از ES6 Class هم می‌توانید به Private Variable برسید: class Counter { #count = 0; increment() { this.#count++; } getValue() { return this.#count; } } در ES2022، فیلدهای خصوصی با # معرفی شدند. اما Closure همچنان ابزار قدرتمندی برای Encapsulation است و در بسیاری از الگوها به کار می‌رود. به خصوص وقتی نیاز دارید منطق خصوصی پیچیده‌تری داشته باشید که فراتر از یک فیلد ساده باشد.

Factory Functions یکی از کاربردهای بسیار مهم Closure هستند. Factory Function تابعی است که یک آبجکت برمی‌گرداند. وقتی این Factory Function از Closure استفاده کند، می‌تواند آبجکت‌هایی با رفتار و وضعیت خصوصی ایجاد کند. مثال Factory Function: function createUser(name, role) { let loginCount = 0; return { getName: function() { return name; }, getRole: function() { return role; }, login: function() { loginCount++; console.log(name + ' وارد شد. تعداد ورود: ' + loginCount); }, getLoginCount: function() { return loginCount; } }; } let admin = createUser('علی', 'admin'); let user = createUser('سارا', 'user'); admin.login(); // 'علی وارد شد. تعداد ورود: 1' admin.login(); // 'علی وارد شد. تعداد ورود: 2' user.login(); // 'سارا وارد شد. تعداد ورود: 1' هر کاربر وضعیت خصوصی خودش را دارد و از بیرون قابل تغییر نیست. الگوی Module یکی دیگر از الگوهایی است که با Closure پیاده‌سازی می‌شود. قبل از ES Modules، توسعه‌دهندگان از IIFE و Closure برای ساخت Module استفاده می‌کردند. let Calculator = (function() { let history = []; function add(a, b) { let result = a + b; history.push({ op: 'add', args: [a, b], result: result }); return result; } function subtract(a, b) { let result = a - b; history.push({ op: 'subtract', args: [a, b], result: result }); return result; } function getHistory() { return history.slice(); } return { add: add, subtract: subtract, getHistory: getHistory }; })(); Calculator.add(5, 3); Calculator.subtract(10, 4); console.log(Calculator.getHistory()); console.log(Calculator.history); // undefined - خصوصی است! الگوی Module با Closure، history را خصوصی نگه می‌دارد و فقط از طریق getHistory قابل دسترسی است. حالا بیایید الگوی Revealing Module را هم ببینیم: let ShoppingCart = (function() { let items = []; function addItem(name, price) { items.push({ name: name, price: price }); } function getTotal() { return items.reduce(function(sum, item) { return sum + item.price; }, 0); } function getItemCount() { return items.length; } return { add: addItem, total: getTotal, count: getItemCount }; })(); ShoppingCart.add('کتاب', 50000); ShoppingCart.add('دفتر', 20000); console.log(ShoppingCart.total()); // 70000 console.log(ShoppingCart.count()); // 2 یکی از الگوهای پیشرفته‌تر، Singleton Pattern با Closure است: let Database = (function() { let instance = null; function createInstance() { return { host: 'localhost', port: 5432, query: function(sql) { console.log('اجرای: ' + sql); } }; } return { getInstance: function() { if (!instance) { instance = createInstance(); } return instance; } }; })(); let db1 = Database.getInstance(); let db2 = Database.getInstance(); console.log(db1 === db2); // true - همیشه یک نمونه واحد Closure همچنین در ساخت Decorator و Middleware Pattern کاربرد دارد: function withLogging(fn) { return function() { console.log('شروع فراخوانی:', fn.name); let result = fn.apply(this, arguments); console.log('پایان فراخوانی:', fn.name); return result; }; } function add(a, b) { return a + b; } let loggedAdd = withLogging(add); loggedAdd(3, 5); // لاگ و خروجی 8 این الگوها نشان می‌دهند Closure چقدر در طراحی نرم‌افزار قدرتمند است.

Closure نقش بسیار مهمی در React ایفا می‌کند و درک آن برای نوشتن کد React بدون باگ ضروری است. بسیاری از باگ‌های رایج در React مستقیماً به Closure مربوط می‌شوند. اولین مثال: Closure در useState. وقتی از useState در React استفاده می‌کنید، مقدار state در Closure تابع کامپوننت محبوس می‌شود. function Counter() { const [count, setCount] = React.useState(0); function handleClick() { setTimeout(function() { console.log('Count: ' + count); }, 3000); } return React.createElement('button', { onClick: handleClick }, 'Count: ' + count + ' - کلیک کن'); } اگر کاربر دکمه را کلیک کند و قبل از ۳ ثانیه چند بار count را تغییر دهد، setTimeout همچنان مقدار count در لحظه کلیک را چاپ می‌کند. دلیل: handleClick یک Closure است که به count در لحظه رندر اشاره می‌کند. هر بار که React رندر می‌کند، تابع جدیدی با count جدید ساخته می‌شود. اما setTimeout به Closure قبلی اشاره دارد. راه‌حل: استفاده از Ref. function Counter() { const [count, setCount] = React.useState(0); const countRef = React.useRef(count); countRef.current = count; function handleClick() { setTimeout(function() { console.log('Count: ' + countRef.current); }, 3000); } return React.createElement('button', { onClick: handleClick }, 'Count: ' + count); } useRef مقداری را نگه می‌دارد که بین رندرها تغییر نمی‌کند و به Closure‌های قدیمی اشاره نمی‌کند. دومین مثال: Closure در useEffect. useEffect یک Closure است که مقادیر state و props در لحظه رندر را می‌بیند. function Timer() { const [seconds, setSeconds] = React.useState(0); React.useEffect(function() { let interval = setInterval(function() { console.log('Seconds: ' + seconds); setSeconds(seconds + 1); }, 1000); return function() { clearInterval(interval); }; }, []); return React.createElement('div', null, seconds + ' ثانیه'); } این کد باگ دارد! seconds همیشه ۰ است چون useEffect با آرایه خالی فقط یک بار اجرا می‌شود و Closure آن به seconds برابر ۰ اشاره می‌کند. راه‌حل: استفاده از Functional Update. React.useEffect(function() { let interval = setInterval(function() { setSeconds(function(prev) { return prev + 1; }); }, 1000); return function() { clearInterval(interval); }; }, []); با setSeconds(prev => prev + 1)، نیازی به خواندن seconds از Closure نیست و React خودش مقدار قبلی را پاس می‌دهد. سومین مثال: Closure در Event Handler. function SearchBox() { const [query, setQuery] = React.useState(''); React.useEffect(function() { function handleKeyDown(event) { if (event.key === 'Enter') { console.log('جستجو: ' + query); } } window.addEventListener('keydown', handleKeyDown); return function() { window.removeEventListener('keydown', handleKeyDown); }; }, [query]); return React.createElement('input', { value: query, onChange: function(e) { setQuery(e.target.value); } }); } در این مثال، query در dependency array useEffect وجود دارد. یعنی هر بار query تغییر کند، useEffect دوباره اجرا می‌شود و Event Handler جدیدی با Closure جدید ساخته می‌شود. اگر query را از dependency array حذف کنید، handleKeyDown همیشه مقدار اولیه query را می‌بیند. چهارمین مثال: useCallback و Closure. const memoizedCallback = React.useCallback(function() { console.log(count); }, [count]); useCallback تضمین می‌کند که تابع فقط وقتی count تغییر کند، بازسازی شود. این کار از بازسازی غیرضروری Closure جلوگیری می‌کند. درک Closure در React برای جلوگیری از Stale Closure بسیار مهم است. Stale Closure وضعیتی است که Closure به مقادیر قدیمی state اشاره می‌کند. این مشکل در useEffect و Event Handler‌ها بسیار رایج است و بدون درک Closure، رفع آن بسیار دشوار خواهد بود.

Closure مفهوم قدرتمندی است اما اشتباه در استفاده از آن می‌تواند باگ‌های ظریف و سخت‌یاب ایجاد کند. بیایید مهم‌ترین اشتباهات را بررسی کنیم. اشتباه اول: Stale Closure در React. این رایج‌ترین اشتباه است و قبلاً بررسی کردیم. وقتی در useEffect یا useCallback از state استفاده می‌کنید و آن را در dependency array قرار نمی‌دهید، Closure به مقدار قدیمی state اشاره می‌کند. بد: useEffect(function() { let id = setInterval(function() { console.log(count); }, 1000); return function() { clearInterval(id); }; }, []); // count همیشه ۰ خوب: useEffect(function() { let id = setInterval(function() { setCount(function(prev) { return prev + 1; }); }, 1000); return function() { clearInterval(id); }; }, []); اشتباه دوم: Closure ناخواسته و Memory Leak. اگر Closure به آبجکت‌های بزرگ اشاره کند و آن Closure نگه داشته شود، آبکت‌های بزرگ هم در حافظه باقی می‌مانند. function processData() { let hugeData = new Array(1000000).fill('data'); return function() { console.log(hugeData.length); }; } let fn = processData(); // hugeData در حافظه باقی می‌ماند تا fn وجود دارد اگر fn را بعد از استفاده null کنید، Garbage Collector می‌تواند hugeData را آزاد کند. اشتباه سوم: تصور اینکه Closure مقدار را کپی می‌کند. بسیاری فکر می‌کنند Closure مقدار متغیر را در لحظه تعریف کپی می‌کند. این غلط است. Closure به خود متغیر اشاره می‌کند و مقدار فعلی آن را می‌بیند. function create() { var value = 1; return { getValue: function() { return value; }, increment: function() { value++; } }; } var obj = create(); console.log(obj.getValue()); // 1 obj.increment(); console.log(obj.getValue()); // 2 مقدار تغییر می‌کند چون Closure به متغیر value اشاره می‌کند، نه به مقدار ۱. اشتباه چهارم: Closure در حلقه با var. این قبلاً بررسی شد اما ارزش تکرار دارد. for (var i = 0; i < 3; i++) { arr[i] = function() { return i; }; } // همه مقدار ۳ برمی‌گردانند اشتباه پنجم: فراموش کردن پاکسازی Closure در React. وقتی Event Listener یا Timer در useEffect ایجاد می‌کنید، باید در cleanup function آن را پاک کنید. بد: useEffect(function() { window.addEventListener('scroll', handleScroll); // cleanup ندارد }, []); خوب: useEffect(function() { window.addEventListener('scroll', handleScroll); return function() { window.removeEventListener('scroll', handleScroll); }; }, []); اشتباه ششم: Closure‌های تو در توی بیش از حد. Closure‌های زیاد و تو در تو می‌توانند خوانایی کد را کاهش دهند و اشکال‌زدایی را سخت کنند. function deeplyNested() { let a = 1; return function() { let b = 2; return function() { let c = 3; return function() { return a + b + c; }; }; }; } در چنین مواردی بهتر است از آبجکت یا Class استفاده کنید. اشتباه هفتم: استفاده از Closure به جای State Management. Closure برای وضعیت‌های ساده و محلی مناسب است اما برای مدیریت state پیچیده اپلیکیشن، از ابزارهای مناسب مانند Redux یا Context API استفاده کنید.

رعایت بهترین روش‌ها در استفاده از Closure، کد شما را تمیزتر، قابل نگهداری‌تر و کم‌باگ‌تر می‌کند. قانون اول: از let و const به جای var استفاده کنید. این کار از بسیاری از مشکلات Closure به خصوص در حلقه‌ها جلوگیری می‌کند. const برای مقادیر ثابت و let برای مقادیر قابل تغییر. قانون دوم: Dependency Array در useEffect را کامل بنویسید. ESLint با قانون exhaustive-deps به شما کمک می‌کند dependency‌های Closure را فراموش نکنید. قانون سوم: از Functional Update در React استفاده کنید. وقتی state جدید به state قبلی وابسته است، به جای خواندن state از Closure، از فرم تابعی استفاده کنید. قانون چهارم: Closure‌های ناخواسته را شناسایی کنید. وقتی تابعی برمی‌گردانید، بررسی کنید چه متغیرهایی را نگه می‌دارد. اگر متغیر بزرگی نگه داشته شده و دیگر نیاز نیست، آن را null کنید. قانون پنجم: از Closure برای Encapsulation استفاده کنید. وقتی نیاز به متغیر خصوصی دارید، Closure بهترین ابزار است. این الگو را با Factory Functions پیاده‌سازی کنید. قانون ششم: از IIFE برای ایجاد Scope فوری استفاده کنید. وقتی نیاز به اجرای فوری و ایجاد Scope خصوصی دارید، IIFE با Closure بسیار مفید است. قانون هفتم: Closure را به عنوان ابزار State نگهداری بشناسید. Closure می‌تواند وضعیت بین فراخوانی‌های تابع را حفظ کند. این ویژگی در ساخت Cache، Memoization و Debounce بسیار مفید است. مثال Debounce با Closure: function debounce(fn, delay) { let timer = null; return function() { let context = this; let args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }; } let debouncedSearch = debounce(function(query) { console.log('جستجو: ' + query); }, 300); مثال Memoize با Closure: function memoize(fn) { let cache = {}; return function() { let key = JSON.stringify(arguments); if (cache[key] !== undefined) { return cache[key]; } let result = fn.apply(this, arguments); cache[key] = result; return result; }; } let expensiveCalculation = memoize(function(n) { console.log('محاسبه...'); let result = 0; for (let i = 0; i < n; i++) { result += i; } return result; }); expensiveCalculation(1000000); // 'محاسبه...' و نتیجه expensiveCalculation(1000000); // فقط نتیجه، بدون محاسبه مجدد قانون هشتم: از Closure برای Event Handler‌های پارامتری استفاده کنید. function handleClick(itemId) { return function(event) { console.log('آیتم ' + itemId + ' کلیک شد'); }; } button.addEventListener('click', handleClick(42)); این الگو به شما اجازه می‌دهد پارامتر اضافی به Event Handler پاس دهید. قانون نهم: Closure را تست کنید. وقتی از Closure در تست استفاده می‌کنید، مطمئن شوید وضعیت بین تست‌ها reset می‌شود. قانون دهم: Closure‌های ساده و تک‌منظوره بنویسید. هر Closure باید یک مسئولیت مشخص داشته باشد. Closure‌هایی که چندین کار انجام می‌دهند، نگهداری و اشکال‌زدایی‌شان سخت است.

درک تأثیر Closure بر عملکرد برنامه برای نوشتن کد بهینه بسیار مهم است. بیایید جنبه‌های مختلف عملکرد Closure را بررسی کنیم. اول، تأثیر Closure بر حافظه. وقتی Closure ایجاد می‌کنید، Lexical Environment در حافظه نگه داشته می‌شود تا زمانی که Closure وجود دارد. اگر Closure به متغیرهای بزرگی اشاره کند، آن متغیرها هم در حافظه باقی می‌مانند. مفسرهای مدرن جاوااسکریپت بهینه‌سازی‌هایی انجام می‌دهند. V8 موتوری که Chrome و Node.js استفاده می‌کنند، فقط متغیرهایی را نگه می‌دارد که Closure واقعاً از آن‌ها استفاده می‌کند. اگر متغیری در Scope بیرونی تعریف شده باشد ولی Closure از آن استفاده نکند، مفسر آن را آزاد می‌کند. function example() { let small = 1; let huge = new Array(1000000).fill('x'); return function() { return small; // huge استفاده نشده }; } let fn = example(); // در مفسرهای مدرن، huge ممکن است آزاد شود اما در مفسرهای قدیمی‌تر، huge هم نگه داشته می‌شد. اگر نیاز به پشتیبانی از مفسرهای قدیمی دارید، بهتر است huge را بعد از استفاده null کنید. دوم، سرعت دسترسی به متغیرهای Closure. دسترسی به متغیرهای Closure کمی کندتر از دسترسی به متغیرهای محلی است چون مفسر باید Scope Chain را جستجو کند. اما این تفاوت در عمل ناچیز است و نباید نگران آن باشید. مگر اینکه در یک حلقه میلیونی باشید که هر نانوثانیه مهم باشد. سوم، Closure و Garbage Collector. Closure‌ها تا زمانی که به آن‌ها Reference وجود دارد، در حافظه باقی می‌مانند. وقتی Closure دیگر مورد نیاز نیست، باید Reference به آن را حذف کنید تا Garbage Collector بتواند حافظه را آزاد کند. function createHandler() { let data = fetchData(); return function handle() { process(data); }; } let handler = createHandler(); // data و handler هر دو در حافظه هستند handler = null; // حالا Garbage Collector می‌تواند همه چیز را آزاد کند چهارم، Closure و Memory Leak در SPA‌ها. در اپلیکیشن‌های تک‌صفحه‌ای یا Single Page Application، اگر Event Listener‌ها و Timer‌ها درست پاکسازی نشوند، Closure‌های مربوط به کامپوننت‌های قدیمی در حافظه باقی می‌مانند و Memory Leak ایجاد می‌شود. این مشکل به خصوص در React رایج است. پنجم، Closure و Stack Overflow. Closure‌های بازگشتی عمیق می‌توانند Stack Overflow ایجاد کنند. اگر Closure‌ای به صورت بازگشتی خودش را فراخوانی کند، باید از Tail Call Optimization یا روش‌های جایگزین استفاده کنید. ششم، مقایسه Closure و Class از نظر عملکرد. در بیشتر سناریوها، تفاوت عملکرد بین Closure و Class ناچیز است. اما Closure‌ها هر بار فراخوانی Factory Function، توابع جدید می‌سازند در حالی که متدهای Class پروتوتایپ هستند و به اشتراک گذاشته می‌شوند. اگر هزاران نمونه از یک آبجکت می‌سازید، Class از نظر حافظه بهینه‌تر است. هفتم، Closure و Inline Function. در React، وقتی تابع inline به صورت Closure تعریف می‌کنید، هر رندر تابع جدیدی ساخته می‌شود. useCallback می‌تواند از بازسازی غیرضروری جلوگیری کند، اما استفاده بیش از حد از useCallback هم خودش هزینه دارد. به طور کلی، Closure تأثیر بسیار کمی بر عملکرد دارد و مزایای آن بسیار بیشتر از هزینه‌های احتمالی است. فقط در سناریوهای خاص مانند حلقه‌های پرتکرار یا مدیریت حافظه در SPA‌ها باید مراقب باشید.

Closure یکی از محبوب‌ترین موضوعات مصاحبه فنی JavaScript است. بیایید مهم‌ترین سوالات و پاسخ‌هایشان را بررسی کنیم. سوال اول: Closure چیست؟ پاسخ: Closure ترکیبی از یک تابع و Lexical Environment محل تعریف آن است. Closure به تابع اجازه می‌دهد به متغیرهای Scope بیرونی‌اش دسترسی داشته باشد حتی بعد از آنکه Scope بیرونی از بین رفته باشد. سوال دوم: خروجی این کد چیست؟ function outer() { var x = 10; function inner() { console.log(x); } x = 20; return inner; } var fn = outer(); fn(); پاسخ: ۲۰. Closure به متغیر x اشاره می‌کند نه مقدار آن. وقتی x به ۲۰ تغییر می‌کند، inner مقدار ۲۰ را می‌بیند. سوال سوم: خروجی این کد چیست؟ for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 1000); } پاسخ: ۳، ۳، ۳. var فقط یک متغیر i ایجاد می‌کند. وقتی callback‌ها اجرا می‌شوند، i برابر ۳ است. سوال چهارم: چگونه مشکل بالا را حل می‌کنید؟ پاسخ: سه راه‌حل: ۱. استفاده از let به جای var. ۲. استفاده از IIFE. ۳. استفاده از setTimeout با پارامتر سوم. سوال پنجم: تفاوت Closure و Scope چیست؟ پاسخ: Scope محدوده دسترسی به متغیرها است. Closure ترکیب تابع و Scope‌اش است. هر تابعی Closure است چون به Scope محل تعریفش دسترسی دارد. سوال ششم: Closure چه کاربردی دارد؟ پاسخ: Private Variables، Factory Functions، Module Pattern، Memoization، Debounce، Event Handler‌ها، React Hooks و بسیاری الگوهای دیگر. سوال هفتم: آیا Closure باعث Memory Leak می‌شود؟ پاسخ: بله، اگر Closure به متغیرهای بزرگ اشاره کند و آن Closure نگه داشته شود. با null کردن Reference‌ها و پاکسازی Event Listener‌ها و Timer‌ها می‌توان از آن جلوگیری کرد. سوال هشتم: خروجی این کد چیست؟ function counter() { var count = 0; return { increment: function() { count++; }, getCount: function() { return count; } }; } var c = counter(); c.increment(); c.increment(); console.log(c.getCount()); پاسخ: ۲. count یک متغیر خصوصی است که فقط از طریق Closure قابل دسترسی است. سوال نهم: Stale Closure چیست؟ پاسخ: وقتی Closure به مقدار قدیمی یک متغیر اشاره کند. این مشکل در React وقتی ایجاد می‌شود که useEffect یا useCallback به state قدیمی اشاره می‌کنند. سوال دهم: خروجی این کد چیست؟ var funcs = []; for (var i = 0; i < 3; i++) { funcs[i] = function() { return i; }; } console.log(funcs[0]()); console.log(funcs[1]()); console.log(funcs[2]()); پاسخ: ۳، ۳، ۳. هر سه تابع به یک i اشاره می‌کنند. سوال یازدهم: آیا Arrow Function هم Closure ایجاد می‌کند؟ پاسخ: بله. Arrow Function مانند function معمولی Closure ایجاد می‌کند. تفاوت اصلی Arrow Function در this است که از Scope بیرونی به ارث می‌برد. سوال دوازدهم: Lexical Environment چیست؟ پاسخ: ساختار داده‌ای که مفسر جاوااسکریپت برای پیاده‌سازی Lexical Scope استفاده می‌کند. شامل Environment Record و Reference to Outer Environment است. Closure Reference به Lexical Environment محل تعریفش را حفظ می‌کند.

در این مقاله جامع، سفری از مفاهیم پایه‌ای Scope تا کاربردهای پیشرفته Closure طی کردیم. بیایید مهم‌ترین نکات را مرور کنیم. ابتدا Scope را به عنوان محدوده دسترسی به متغیرها شناختیم و سه نوع آن را بررسی کردیم: Global Scope بزرگ‌ترین محدوده، Function Scope محدوده تابع و Block Scope محدوده بلوک کد. سپس فهمیدیم که var از Function Scope و let و const از Block Scope پشتیبانی می‌کنند. Lexical Scope یا Static Scope را یاد گرفتیم: Scope متغیرها در زمان تعریف مشخص می‌شود، نه زمان اجرا. این ویژگی پایه و اساس Closure است. Lexical Environment را به عنوان مکانیزم داخلی مفسر شناختیم که Lexical Scope را پیاده‌سازی می‌کند و شامل Environment Record و Outer Reference است. Closure را تعریف کردیم: ترکیب تابع و Lexical Environment محل تعریفش. Closure به تابع اجازه می‌دهد به متغیرهای بیرونی دسترسی داشته باشد حتی بعد از اتمام Scope بیرونی. Closure در حلقه‌ها را بررسی کردیم و فهمیدیم چرا var مشکل‌ساز است و let چگونه این مشکل را حل می‌کند. کاربردهای مهم Closure را شناختیم: Private Variables برای Encapsulation، Factory Functions برای ساخت آبجکت‌های مستقل، Module Pattern برای سازمان‌دهی کد، Debounce و Memoization برای بهینه‌سازی. Closure در React را عمیقاً بررسی کردیم: مفهوم Stale Closure، مشکلات useEffect و useState، و راه‌حل‌هایی مانند useRef و Functional Update. اشتباهات رایج را شناختیم و یاد گرفتیم چگونه از آن‌ها اجتناب کنیم. سوالات مصاحبه مهم و پاسخ‌هایشان را مرور کردیم. حالا که Closure را درک می‌کنید، چند پیشنهاد برای ادامه مسیر دارم. اول، Currying را یاد بگیرید. Currying تکنیکی است که Closure را به سطح جدیدی می‌برد و در کتابخانه‌هایی مانند Lodash و Ramda بسیار استفاده می‌شود. دوم، Higher-Order Functions را تمرین کنید. map، filter و reduce خودشان Closure هستند و تسلط بر آن‌ها کد شما را بسیار تمیزتر می‌کند. سوم، Pattern‌های طراحی مبتنی بر Closure مانند Observer، Strategy و Decorator را یاد بگیرید. چهارم، React Hooks را از منظر Closure بررسی کنید. درک Closure به شما کمک می‌کند Hooks را عمیق‌تر بفهمید و باگ‌های مرتبط را سریع‌تر رفع کنید. Closure یکی از آن مفاهیمی است که وقتی واقعاً درکش کنید، نحوه نگاه شما به JavaScript عوض می‌شود. کدهایی که می‌نویسید تمیزتر، امن‌تر و قابل نگهداری‌تر خواهند بود. در مصاحبه‌ها با اعتماد به نفس بیشتری توضیح خواهید داد و در پروژه‌های واقعی از قدرت Closure بهره‌مند خواهید شد. ممنون که تا انتهای این مقاله همراه بودید. امیدوارم این محتوا درک عمیقی از Closure به شما داده باشد. تمرین کنید، کد بنویسید و از Closure در پروژه‌هایتان استفاده کنید.