JavaScript Closures ವಿವರಣೆ

ನೀವು ಪ್ರತಿದಿನ JavaScript ನಲ್ಲಿ closures ಬಳಸುತ್ತೀರಿ. ನೀವು ಬಹುಶಃ ಅವುಗಳನ್ನು React hooks, event listeners ಮತ್ತು Node.js callbacks ನಲ್ಲಿ ಬಳಸುತ್ತಿರಬಹುದು. ಅನೇಕ ಡೆವಲಪರ್‌ಗಳು ಇದರ ಸಿದ್ಧಾಂತದೊಂದಿಗೆ ಕಷ್ಟಪಡುತ್ತಾರೆ, ಆದರೆ ಒಮ್ಮೆ ನೀವು ಅದರ ಮಾದರಿಯನ್ನು (pattern) ಅರ್ಥಮಾಡಿಕೊಂಡರೆ ಈ ಪರಿಕಲ್ಪನೆಯು ಸರಳವಾಗಿರುತ್ತದೆ.

Closures ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, ನೀವು lexical scope ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು.

Lexical scope ಎಂದರೆ ಒಂದು function ತನ್ನದೇ ಆದ scope ಮತ್ತು ಅದು ವ್ಯಾಖ್ಯಾನಿಸಲಾದ (defined) ಯಾವುದೇ ಹೊರಗಿನ (outer) scope ನಿಂದ variable ಗಳನ್ನು ಪ್ರವೇಶಿಸಬಲ್ಲದು ಎಂದರ್ಥ. ಇದು ನೀವು ಕೋಡ್ ಅನ್ನು ಎಲ್ಲಿ ಬರೆಯುತ್ತೀರಿ ಎಂಬುದರ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ, ಅದನ್ನು ಎಲ್ಲಿ ಕರೆಯುತ್ತೀರಿ (call) ಎಂಬುದರ ಮೇಲಲ್ಲ.

Closure ಎಂಬುದು ಒಂದು function ಆಗಿದ್ದು, ಅದು ತನ್ನ ಮೂಲ scope ಕಾರ್ಯಗತಗೊಂಡ ನಂತರವೂ (finishes running) ಆ scope ನ variable ಗಳನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳುತ್ತದೆ.

ಒಂದು function ಅನ್ನು ಬೆನ್ನಿಗೆ ಬ್ಯಾಗ್ (backpack) ಹೊತ್ತುಕೊಂಡಿರುವಂತೆ ಭಾವಿಸಿ. Function ಅನ್ನು ರಚಿಸಿದಾಗ, ಅದಕ್ಕೆ ಬೇಕಾದ ಪ್ರತಿಯೊಂದು variable ಅನ್ನು ಅದು ತನ್ನ ಪರಿಸರದಿಂದ (environment) ಆ ಬ್ಯಾಗ್‌ನಲ್ಲಿ ತುಂಬಿಕೊಳ್ಳುತ್ತದೆ. ಆ function ಎಲ್ಲಿಗೆ ಹೋದರೂ ಆ ಬ್ಯಾಗ್ ಅನ್ನು ತನ್ನೊಂದಿಗೆ ಕೊಂಡೊಯ್ಯುತ್ತದೆ.

ಪ್ರಾಯೋಗಿಕವಾಗಿ closures ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

  • Private Variables: ನೀವು ಹೊರಗಿನ ಪ್ರಪಂಚದಿಂದ ಡೇಟಾವನ್ನು ಮರೆಮಾಚಬಹುದು. ಬ್ಯಾಂಕ್ ಖಾತೆಯ ಉದಾಹರಣೆಯಲ್ಲಿ, balance variable ಖಾಸಗಿಯಾಗಿರುತ್ತದೆ. ನೀವು ಅದನ್ನು deposit ಅಥವಾ withdraw ನಂತಹ ನಿರ್ದಿಷ್ಟ ವಿಧಾನಗಳ (methods) ಮೂಲಕ ಮಾತ್ರ ಬದಲಾಯಿಸಬಹುದು. ಇದು ಸೂಕ್ಷ್ಮ ಡೇಟಾವನ್ನು ನೇರವಾಗಿ ಪ್ರವೇಶಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

  • Function Factories: ನೀವು ಇತರ function ಗಳನ್ನು ಉತ್ಪಾದಿಸುವ function ಗಳನ್ನು ರಚಿಸಬಹುದು. ಒಂದು multiplier factory ಡಬಲ್ function ಅಥವಾ ಟ್ರಿಪಲ್ function ಅನ್ನು ರಚಿಸಬಲ್ಲದು. ಪ್ರತಿಯೊಂದು ಹೊಸ function ತನ್ನದೇ ಆದ ನಿರ್ದಿಷ್ಟ multiplier ಅನ್ನು ತನ್ನ ಬ್ಯಾಗ್‌ನಲ್ಲಿ ಇಟ್ಟುಕೊಳ್ಳುತ್ತದೆ.

  • Event Listeners: ನೀವು ಬಟನ್‌ಗೆ click event ಅನ್ನು ಅಳವಡಿಸಿದಾಗ, handler ಆ setup function ನ ಡೇಟಾವನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳುತ್ತದೆ. Setup function ಮುಗಿದ ನಂತರವೂ, listener ಆ ಡೇಟಾವನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುತ್ತದೆ.

  • React Hooks: ನೀವು ಪ್ರತಿ ಬಾರಿ useState ಅಥವಾ useEffect ಬಳಸಿದಾಗಲೂ, closures ಬಳಸುತ್ತಿದ್ದೀರಿ ಎಂದರ್ಥ. React ನಲ್ಲಿ ಒಂದು ಸಾಮಾನ್ಯ ಬಗ್ (bug) ಎಂದರೆ closure ಒಂದು ಹಳೆಯ state value ಅನ್ನು capture ಮಾಡುವುದು. ಇದನ್ನು stale closure ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ.

ಮೆಮೊರಿ ಬಳಕೆಯನ್ನು ಗಮನಿಸಿ. Closure ಒಂದು variable ಗೆ live reference ಅನ್ನು ಹೊಂದಿರುವುದರಿಂದ, closure ಇರುವವರೆಗೆ engine ಅದನ್ನು garbage collection ಮೂಲಕ ಸ್ವಚ್ಛಗೊಳಿಸಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ. ನಿಮಗೆ ಅವು ದೀರ್ಘಕಾಲದವರೆಗೆ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೆ, closure ನಲ್ಲಿ ದೊಡ್ಡ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು (massive objects) ಇಟ್ಟುಕೊಳ್ಳುವುದನ್ನು ತಪ್ಪಿಸಿ.

ಸಾರಾಂಶ:

  • Lexical scope ಪ್ರವೇಶವನ್ನು (access) ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
  • Closures ಆ ಪ್ರವೇಶವನ್ನು ಶಾಶ್ವತಗೊಳಿಸುತ್ತವೆ (persistent).
  • ಒಂದು function ತನ್ನ ಪರಿಸರವನ್ನು ಬ್ಯಾಗ್‌ನಲ್ಲಿ ಹೊತ್ತುಕೊಂಡಿರುತ್ತದೆ.
  • Scoping bugs ತಪ್ಪಿಸಲು loops ನಲ್ಲಿ var ಬದಲಿಗೆ let ಬಳಸಿ.

ಮೂಲ: https://dev.to/digitalunicon/javascript-closures-explained-with-examples-339f