സിൻക്രണസ് (Synchronous), അസിൻക്രണസ് (Asynchronous) JavaScript എന്നിവ മനസ്സിലാക്കാം
JavaScript ഓരോ സമയത്തും ഒരു ടാസ്ക് മാത്രമേ പ്രവർത്തിപ്പിക്കുകയുള്ളൂ. കാരണം ഇതൊരു സിംഗിൾ-ത്രെഡഡ് (single-threaded) ഭാഷയാണ്.
വേഗതയേറിയ ആപ്പുകൾ നിർമ്മിക്കുന്നതിന്, സിൻക്രണസ് കോഡും അസിൻക്രണസ് കോഡും തമ്മിലുള്ള വ്യത്യാസം നിങ്ങൾ അറിഞ്ഞിരിക്കണം.
സിൻക്രണസ് എക്സിക്യൂഷൻ (Synchronous Execution)
കോഡ് ഓരോ വരിയായി പ്രവർത്തിക്കുന്നു. ഓരോ ടാസ്ക്കും അതിന്റെ മുൻപത്തെ ടാസ്ക് പൂർത്തിയാകുന്നത് വരെ കാത്തിരിക്കുന്നു.
ഒരു എടിഎം (ATM) ക്യൂവിനെക്കുറിച്ച് ചിന്തിക്കുക. ഒന്നാമത്തെ വ്യക്തി ജോലി പൂർത്തിയാക്കുന്നത് വരെ രണ്ടാമത്തെ വ്യക്തിക്ക് മെഷീൻ ഉപയോഗിക്കാൻ കഴിയില്ല.
ഒരു ടാസ്ക് എടുക്കാൻ കൂടുതൽ സമയം എടുക്കുകയാണെങ്കിൽ, മുഴുവൻ പ്രോഗ്രാമും നിൽക്കും. ഇതിനെയാണ് ബ്ലോക്കിംഗ് (blocking) എന്ന് വിളിക്കുന്നത്.
അസിൻക്രണസ് എക്സിക്യൂഷൻ (Asynchronous Execution)
ടാസ്ക്കുകൾ സ്വതന്ത്രമായി പ്രവർത്തിക്കുന്നു. JavaScript ഒരു ടാസ്ക് ആരംഭിച്ചാലുടൻ അടുത്ത ടാസ്കിലേക്ക് നീങ്ങുന്നു.
ഒരു റെസ്റ്റോറന്റിനെക്കുറിച്ച് ചിന്തിക്കുക. നിങ്ങൾ ഭക്ഷണം ഓർഡർ ചെയ്യുന്നു, തുടർന്ന് ഭക്ഷണം വരുന്നത് വരെ സുഹൃത്തുക്കളോട് സംസാരിക്കുന്നു. ഭക്ഷണം വരുന്നത് വരെ മറ്റൊന്നും ചെയ്യാതെ വെറുതെ ഇരിക്കുകയല്ല നിങ്ങൾ ചെയ്യുന്നത്.
താഴെ പറയുന്ന സമയങ്ങളിൽ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ഫ്രീസ് (freeze) ആകുന്നത് തടയാൻ അസിൻക്രണസ് കോഡ് സഹായിക്കുന്നു:
- API റിക്വസ്റ്റുകൾ (API requests)
- ഡാറ്റാബേസ് ക്വറികൾ (Database queries)
- ഫയൽ റീഡിംഗ് (File reading)
- ഇമേജ് അപ്ലോഡുകൾ (Image uploads)
അസിൻക്രണസ് കോഡ് കൈകാര്യം ചെയ്യാനുള്ള മൂന്ന് വഴികൾ:
Callbacks ഒരു പ്രത്യേക ടാസ്ക് പൂർത്തിയായ ശേഷം ഒരു ഫംഗ്ഷൻ പ്രവർത്തിക്കുന്നു. ഭക്ഷണം വരുമ്പോൾ ഡെലിവറി ഡ്രൈവർ നിങ്ങളെ വിളിക്കുന്നത് പോലെയാണിത്.
Promises ഒരു പ്രോമിസ് ഭാവിയിലെ ഒരു ഫലത്തെ സൂചിപ്പിക്കുന്നു. അത് 'resolved' (വിജയം) അല്ലെങ്കിൽ 'rejected' (പിശക്) ആകുന്നത് വരെ 'pending' അവസ്ഥയിൽ തുടരുന്നു.
Async/Await ഇത് അസിൻക്രണസ് കോഡിനെ സിൻക്രണസ് കോഡ് പോലെ തോന്നിപ്പിക്കുന്നു. ഇത് വായിക്കാൻ എളുപ്പമാണ്. പ്രോഗ്രാമിന്റെ ബാക്കി ഭാഗങ്ങളെ തടസ്സപ്പെടുത്താതെ ഒരു ഫംഗ്ഷനെ താൽക്കാലികമായി നിർത്താൻ നിങ്ങൾ
awaitഉപയോഗിക്കുന്നു.
ഇത് എങ്ങനെയാണ് പ്രവർത്തിക്കുന്നത്:
ഈ ടാസ്ക്കുകളെ നിയന്ത്രിക്കാൻ JavaScript ഒരു Event Loop ഉപയോഗിക്കുന്നു.
- Call Stack: നിങ്ങളുടെ നിലവിലെ ഫംഗ്ഷനുകളെ ട്രാക്ക് ചെയ്യുന്നു.
- Web APIs: ടൈമറുകൾ അല്ലെങ്കിൽ ഫെച്ചുകൾ (fetches) പോലുള്ള ദീർഘമായ ടാസ്ക്കുകൾ കൈകാര്യം ചെയ്യുന്നു.
- Callback Queue: പൂർത്തിയായ ടാസ്ക്കുകളെ സൂക്ഷിക്കുന്നു.
- Event Loop: സ്റ്റാക്ക് (stack) കാലിയാകുമ്പോൾ ക്യൂവിൽ നിന്ന് ടാസ്ക്കുകളെ സ്റ്റാക്കിലേക്ക് മാറ്റുന്നു.
താരതമ്യം:
Synchronous:
- ക്രമമായി പ്രവർത്തിക്കുന്നു (Runs sequentially)
- പ്രോഗ്രാമിനെ ബ്ലോക്ക് ചെയ്യുന്നു
- എഴുതാൻ എളുപ്പമാണ്
- വലിയ ടാസ്ക്കുകൾക്ക് സാവധാനമേ പ്രവർത്തിക്കൂ
Asynchronous:
- സ്വതന്ത്രമായി പ്രവർത്തിക്കുന്നു
- ബ്ലോക്കിംഗ് ഇല്ല (Non-blocking)
- കൂടുതൽ സങ്കീർണ്ണമാണ്
- വെബ് ആപ്പുകൾക്ക് കൂടുതൽ കാര്യക്ഷമമാണ്
ഈ ആശയങ്ങളിൽ വൈദഗ്ധ്യം നേടുന്നത് React, Node.js, ആധുനിക APIs എന്നിവ ഉപയോഗിക്കുന്നതിനുള്ള പ്രധാന ഘടകമാണ്.
Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript Full post: https://dev.to/annapoo/understanding-synchronous-and-asynchronous-javascript-5gea