𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗦𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗮𝗻𝗱 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁
JavaScript ஒரு நேரத்தில் ஒரு பணியை மட்டுமே செய்கிறது. ஏனெனில் இது ஒரு single-threaded மொழி.
வேகமான செயலிகளை (apps) உருவாக்க, synchronous மற்றும் asynchronous குறியீடுகளுக்கு (code) இடையிலான வேறுபாட்டை நீங்கள் தெரிந்து கொள்ள வேண்டும்.
Synchronous Execution
குறியீடு வரி வரியாக இயங்குகிறது. ஒவ்வொரு பணியும் முந்தைய பணி முடிவடையும் வரை காத்திருக்கும்.
ஒரு ATM வரிசையை நினைத்துப் பாருங்கள். முதல் நபர் முடிக்கும் வரை இரண்டாவது நபர் இயந்திரத்தைப் பயன்படுத்த முடியாது.
ஒரு பணி அதிக நேரம் எடுத்தால், முழு நிரலும் (program) நின்றுவிடும். இது blocking என்று அழைக்கப்படுகிறது.
Asynchronous Execution
பணிகள் சுதந்திரமாக இயங்குகின்றன. JavaScript ஒரு பணியைத் தொடங்கி, உடனடியாக அடுத்த பணிக்குச் சென்றுவிடும்.
ஒரு உணவகத்தை நினைத்துப் பாருங்கள். நீங்கள் உணவை ஆர்டர் செய்த பிறகு, உணவு வரும் வரை நண்பர்களுடன் பேசிக்கொண்டே இருக்கலாம். உணவு வரும் வரை நீங்கள் எதையும் செய்யாமல் அப்படியே அமர்ந்திருக்க மாட்டீர்கள்.
Asynchronous குறியீடு பின்வரும் நேரங்களில் உங்கள் செயலி (application) முடங்குவதைத் தடுக்கிறது:
- API requests
- Database queries
- File reading
- Image uploads
Asynchronous குறியீட்டைக் கையாள மூன்று வழிகள்:
Callbacks ஒரு குறிப்பிட்ட பணி முடிந்த பிறகு ஒரு function இயங்கும். இது உங்கள் உணவு வந்தவுடன் டெலிவரி டிரைவர் உங்களை அழைப்பதைப் போன்றது.
Promises ஒரு promise எதிர்கால முடிவைக் குறிக்கிறது. அது resolved (வெற்றி) அல்லது rejected (பிழை) ஆகும் வரை pending நிலையில் இருக்கும்.
Async/Await இது asynchronous குறியீட்டை synchronous குறியீடு போலவே காட்டும். இது படிக்க எளிதானது. உங்கள் நிரலின் மற்ற பகுதிகளைத் தடுக்காமல், ஒரு function-ஐ இடைநிறுத்த நீங்கள் await-ஐப் பயன்படுத்தலாம்.
இது பின்னணியில் எவ்வாறு செயல்படுகிறது:
JavaScript இந்த பணிகளை நிர்வகிக்க ஒரு Event Loop-ஐப் பயன்படுத்துகிறது.
- Call Stack: உங்கள் தற்போதைய functions-களைக் கண்காணிக்கிறது.
- Web APIs: timers அல்லது fetches போன்ற நீண்ட பணிகளைக் கையாளுகிறது.
- Callback Queue: முடிந்த பணிகளைச் சேமித்து வைக்கிறது.
- Event Loop: stack காலியாக இருக்கும்போது, queue-விலிருந்து பணிகளை stack-க்கு மாற்றுகிறது.
ஒப்பீடு:
Synchronous:
- வரிசையாக இயங்கும்
- நிரலைத் தடுக்கும் (Blocks)
- எழுதுவதற்கு எளிது
- கடினமான பணிகளுக்கு மெதுவானது
Asynchronous:
- சுதந்திரமாக இயங்கும்
- தடுப்பற்றது (Non-blocking)
- சற்று சிக்கலானது
- web apps-களுக்குத் திறமையானது
இந்தத் தத்துவங்களை (concepts) முழுமையாகக் கற்றுக்கொள்வது 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