JavaScript Synchronous and Asynchronous
JavaScript പ്രവർത്തിക്കുന്നത് ഒരു സിംഗിൾ ത്രെഡിലാണ് (single thread). അതായത്, ഇത് ഒരേസമയം ഒരു കാര്യം മാത്രമേ ചെയ്യുന്നുള്ളൂ. കാര്യക്ഷമമായ കോഡ് എഴുതുന്നതിന് ഇത് എങ്ങനെയാണ് ടാസ്ക്കുകൾ കൈകാര്യം ചെയ്യുന്നതെന്ന് നിങ്ങൾ മനസ്സിലാക്കേണ്ടതുണ്ട്.
Synchronous JavaScript
Synchronous കോഡ് വരിവരിയായിട്ടാണ് പ്രവർത്തിക്കുന്നത്. ഓരോ ടാസ്ക്കും തൊട്ടുമുമ്പുള്ള ടാസ്ക് പൂർത്തിയാകുന്നത് വരെ കാത്തിരിക്കുന്നു. ഇതിനെ ബ്ലോക്കിംഗ് (blocking) എന്ന് വിളിക്കുന്നു. ഒരു ടാസ്ക് എടുക്കാൻ കൂടുതൽ സമയം എടുക്കുകയാണെങ്കിൽ, മുഴുവൻ പ്രോഗ്രാമും നിലച്ചുപോകും.
- Execution: നിശ്ചിത ക്രമം.
- Blocking: ഉണ്ട്.
- Complexity: ലളിതം.
- Best for: ലളിതമായ, ക്രമമായ ടാസ്ക്കുകൾക്ക്.
Asynchronous JavaScript
Asynchronous കോഡ് സ്വതന്ത്രമായി പ്രവർത്തിക്കുന്നു. ടാസ്ക്കുകൾ കാത്തിരിക്കുമ്പോൾ അവ മറ്റ് കോഡുകളെ തടസ്സപ്പെടുത്തുന്നില്ല. ഇതിനെ നോൺ-ബ്ലോക്കിംഗ് (non-blocking) എന്ന് വിളിക്കുന്നു. ടാസ്ക് ബാക്ക്ഗ്രൗണ്ടിൽ ആരംഭിക്കുകയും അത് പൂർത്തിയാകുമ്പോൾ നിങ്ങളെ അറിയിക്കുകയും ചെയ്യുന്നു.
- Execution: ടാസ്ക്കുകൾ സ്വതന്ത്രമായി പ്രവർത്തിക്കുന്നു.
- Blocking: ഇല്ല.
- Complexity: ഉയർന്നത്.
- Best for: API calls, timers, കൂടാതെ file operations എന്നിവയ്ക്ക്.
അസിൻക്രണസ് ടാസ്ക്കുകൾ കൈകാര്യം ചെയ്യാനുള്ള മൂന്ന് വഴികൾ:
- Callbacks: ഒരു ടാസ്ക് പൂർത്തിയായ ശേഷം പ്രവർത്തിക്കുന്ന ഒരു ഫങ്ക്ഷൻ.
- Promises: ഒരു ഓപ്പറേഷന്റെ പൂർത്തീകരണത്തെയോ പരാജയത്തെയോ സൂചിപ്പിക്കുന്ന ഒരു ഒബ്ജക്റ്റ്.
- Async/Await: ഏറ്റവും വൃത്തിയുള്ള രീതിയാണിത്. ഇത് ത്രെഡിനെ ബ്ലോക്ക് ചെയ്യാതെ തന്നെ അസിൻക്രണസ് കോഡിനെ സിൻക്രണസ് കോഡ് പോലെ തോന്നിപ്പിക്കുന്നു.
സാധാരണയായി ഉപയോഗിക്കുന്ന അസിൻക്രണസ് ഓപ്പറേഷനുകൾ:
- Timers: setTimeout()
- API calls: fetch()
- File reading: readFile()
- User events: addEventListener()
Event Loop ആണ് ഇത് പ്രവർത്തിപ്പിക്കുന്നത്. ഒരേസമയം ഒന്നിലധികം ടാസ്ക്കുകൾ നിയന്ത്രിക്കുന്നതിനായി ഇത് Call Stack, Web APIs, കൂടാതെ Callback Queue എന്നിവ ഉപയോഗിക്കുന്നു.
Summary:
- Synchronous: ഓരോന്നായി നടക്കുന്നു. എക്സിക്യൂഷൻ ബ്ലോക്ക് ചെയ്യുന്നു.
- Asynchronous: സ്വതന്ത്രമായ ടാസ്ക്കുകൾ. ബ്ലോക്ക് ചെയ്യുന്നില്ല.
- JavaScript default: Synchronous.
Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.w3schools.com/js/js_asynchronous.asp Source: https://medium.com/@mohdtalib.dev/what-is-synchronous-and-asynchronous-in-javascript-07adb7b4cc5f
Full post: https://dev.to/raja_b_0c9d242e2c26cf063b/javascript-synchronous-and-asynchronous-2a69