הסבר על JavaScript Closures

אתם משתמשים ב-closures מדי יום ב-JavaScript. סביר להניח שאתם משתמשים בהם ב-React hooks, ב-event listeners וב-callbacks של Node.js. מפתחים רבים מתקשים עם התיאוריה, אך הקונספט פשוט ברגע שמזהים את התבנית.

כדי להבין closures, עליכם להבין lexical scope.

lexical scope פירושו שפונקציה יכולה לגשת למשתנים מהסקופ (scope) שלה וכל סקופ חיצוני שבו היא הוגדרה. זה תלוי במקום שבו כתבתם את הקוד, ולא במקום שבו אתם קוראים לו.

closure הוא פונקציה שזוכרת משתנים מהסקופ המקורי שלה, גם לאחר שהסקופ ההוא מסתיים.

חשבו על פונקציה כעל מי שנושא תרמיל על הגב. כשפונקציה נוצרת, היא אורזת לתוך התרמיל הזה כל משתנה שהיא צריכה מהסביבה שלה. הפונקציה לוקחת את התרמיל הזה לכל מקום אליו היא הולכת.

כך עובדים closures בפועל:

  • משתנים פרטיים (Private Variables): ניתן להסתיר נתונים מהעולם החיצון. בדוגמה של חשבון בנק, משתנה היתרה (balance) נשאר פרטי. ניתן לשנות אותו רק באמצעות מתודות ספציפיות כמו הפקדה (deposit) או משיכה (withdraw). זה מונע גישה ישירה לנתונים רגישים.

  • מפעלים לפונקציות (Function Factories): ניתן ליצור פונקציות שמייצרות פונקציות אחרות. מפעל כופלה (multiplier factory) יכול ליצור פונקציה שמכפילה ב-2 או פונקציה שמכפילה ב-3. כל פונקציה חדשה שומרת את הכופלה הספציפית שלה בתוך התרמיל שלה.

  • מאזינים לאירועים (Event Listeners): כשאתם מחברים אירוע לחיצה (click event) לכפתור, המטפל (handler) זוכר את הנתונים מפונקציית ההגדרה (setup function). גם לאחר שפונקציית ההגדרה מסתיימת, המאזין מחזיק בנתונים הללו.

  • React Hooks: בכל פעם שאתם משתמשים ב-useState או ב-useEffect, אתם משתמשים ב-closures. באג נפוץ ב-React קורה כאשר closure לוכד ערך ישן של state. זה נקרא stale closure.

שימו לב לשימוש בזיכרון. מכיוון ש-closure מחזיק הפניה חיה (live reference) למשתנים, המנוע לא יכול לנקות אותם באמצעות garbage collection כל עוד ה-closure קיים. הימנעו מהחזקת אובייקטים ענקיים בתוך closure אם אינכם זקוקים להם לזמן ממושך.

סיכום:

  • lexical scope מגדיר את הגישה.
  • closures הופכים את הגישה הזו לעמידה (persistent).
  • פונקציה נושאת את הסביבה שלה בתוך תרמיל.
  • השתמשו ב-let במקום ב-var בלולאות כדי למנוע באגים של scoping.

Source: https://dev.to/digitalunicon/javascript-closures-explained-with-examples-339f