𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱

നിങ്ങൾ ദിവസവും JavaScript-ൽ closures ഉപയോഗിക്കുന്നുണ്ട്. React hooks, event listeners, Node.js callbacks എന്നിവയിൽ നിങ്ങൾ ഇവ ഉപയോഗിക്കുന്നുണ്ടാകാം. പല ഡെവലപ്പർമാരും ഇതിന്റെ സിദ്ധാന്തം (theory) മനസ്സിലാക്കാൻ പ്രയാസപ്പെടുന്നുണ്ടെങ്കിലും, അതിന്റെ രീതി (pattern) മനസ്സിലാക്കിയാൽ ഈ ആശയം വളരെ ലളിതമാണ്.

Closures മനസ്സിലാക്കാൻ, നിങ്ങൾ ആദ്യം lexical scope മനസ്സിലാക്കണം.

ഒരു ഫങ്ക്ഷന് അതിന്റെ സ്വന്തം സ്കോപ്പിൽ നിന്നും അത് നിർവചിക്കപ്പെട്ട (defined) പുറത്തുള്ള ഏത് സ്കോപ്പിൽ നിന്നും വേരിയബിളുകൾ ആക്സസ് ചെയ്യാൻ കഴിയുമെന്നാണ് lexical scope കൊണ്ട് അർത്ഥമാക്കുന്നത്. ഇത് നിങ്ങൾ കോഡ് എവിടെ എഴുതിയിരിക്കുന്നു എന്നതിനെ ആശ്രയിച്ചിരിക്കുന്നു, കോഡ് എവിടെ വിളിക്കുന്നു (call ചെയ്യുന്നു) എന്നതിലല്ല.

ഒരു സ്കോപ്പ് അതിന്റെ പ്രവർത്തനം പൂർത്തിയാക്കിയ ശേഷവും, അതിന്റെ യഥാർത്ഥ സ്കോപ്പിലെ വേരിയബിളുകളെ ഓർമ്മിച്ചുവെക്കുന്ന ഒരു ഫങ്ക്ഷനാണ് closure.

ഒരു ഫങ്ക്ഷനെ ഒരു ബാക്ക്പാക്ക് (backpack) കൊണ്ടുനടക്കുന്നതായി സങ്കൽപ്പിക്കുക. ഒരു ഫങ്ക്ഷൻ നിർമ്മിക്കപ്പെടുമ്പോൾ, അതിന്റെ ചുറ്റുപാടിൽ (environment) നിന്ന് അതിന് ആവശ്യമുള്ള ഓരോ വേരിയബിളും ആ ബാക്ക്പാക്കിൽ പാക്ക് ചെയ്യുന്നു. ഫങ്ക്ഷൻ എവിടെ പോയാലും ആ ബാക്ക്പാക്ക് കൂടെ കൊണ്ടുപോകുന്നു.

പ്രായോഗികമായി closures എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് നോക്കാം:

  • Private Variables: പുറംലോകത്തുനിന്ന് ഡാറ്റ മറച്ചുവെക്കാൻ നിങ്ങൾക്ക് സാധിക്കും. ഒരു ബാങ്ക് അക്കൗണ്ട് ഉദാഹരണത്തിൽ, balance എന്ന വേരിയബിൾ പ്രൈവറ്റ് ആയിരിക്കും. deposit അല്ലെങ്കിൽ withdraw പോലുള്ള പ്രത്യേക രീതികളിലൂടെ (methods) മാത്രമേ നിങ്ങൾക്ക് അത് മാറ്റാൻ കഴിയൂ. ഇത് സെൻസിറ്റീവ് ആയ ഡാറ്റ നേരിട്ട് ആക്സസ് ചെയ്യുന്നത് തടയുന്നു.

  • Function Factories: മറ്റ് ഫങ്ക്ഷനുകളെ നിർമ്മിക്കുന്ന ഫങ്ക്ഷനുകൾ നിങ്ങൾക്ക് നിർമ്മിക്കാം. ഒരു multiplier factory-ക്ക് ഒരു double function അല്ലെങ്കിൽ ഒരു triple function നിർമ്മിക്കാൻ കഴിയും. ഓരോ പുതിയ ഫങ്ക്ഷനും അതിന്റെ ബാക്ക്പാക്കിൽ അതിന്റേതായ പ്രത്യേക multiplier സൂക്ഷിക്കുന്നു.

  • Event Listeners: ഒരു ബട്ടണിൽ click event ഘടിപ്പിക്കുമ്പോൾ, handler ആ setup ഫങ്ക്ഷനിൽ നിന്നുള്ള ഡാറ്റ ഓർമ്മിച്ചുവെക്കുന്നു. Setup ഫങ്ക്ഷൻ അവസാനിച്ചാലും, listener ആ ഡാറ്റ നിലനിർത്തുന്നു.

  • React Hooks: നിങ്ങൾ ഓരോ തവണ useState അല്ലെങ്കിൽ useEffect ഉപയോഗിക്കുമ്പോഴും closures ഉപയോഗിക്കുന്നുണ്ട്. ഒരു closure സ്റ്റേറ്റിന്റെ (state) പഴയ മൂല്യം (old value) പിടിച്ചുവെക്കുമ്പോൾ React-ൽ സാധാരണയായി ഉണ്ടാകുന്ന ഒരു ബഗ് ആണ് ഇത്. ഇതിനെ stale closure എന്ന് വിളിക്കുന്നു.

മെമ്മറി ഉപയോഗത്തിൽ ശ്രദ്ധിക്കുക. ഒരു closure വേരിയബിളുകളുടെ ഒരു live reference നിലനിർത്തുന്നതിനാൽ, closure നിലനിൽക്കുന്നിടത്തോളം കാലം garbage collection വഴി അവയെ നീക്കം ചെയ്യാൻ എഞ്ചിന് കഴിയില്ല. ദീർഘകാലത്തേക്ക് ആവശ്യമില്ലാത്ത വലിയ ഒബ്ജക്റ്റുകൾ (massive objects) closure-ൽ സൂക്ഷിക്കുന്നത് ഒഴിവാക്കുക.

സംഗ്രഹം:

  • Lexical scope ആക്സസ് നിർവചിക്കുന്നു.
  • Closures ആ ആക്സസിനെ സ്ഥിരതയുള്ളതാക്കുന്നു (persistent).
  • ഒരു ഫങ്ക്ഷൻ അതിന്റെ ചുറ്റുപാടിനെ ഒരു ബാക്ക്പാക്കിൽ കൊണ്ടുനടക്കുന്നു.
  • Scoping ബഗുകൾ ഒഴിവാക്കാൻ ലൂപ്പുകളിൽ var-ന് പകരം let ഉപയോഗിക്കുക.

ഉറവിടം: https://dev.to/digitalunicon/javascript-closures-explained-with-examples-339f