𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗦𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗮𝗻𝗱 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁
JavaScript एका वेळी एकच कार्य (task) करते. याचे कारण असे की ही एक single-threaded भाषा आहे.
जलद ॲप्स तयार करण्यासाठी, तुम्हाला synchronous आणि asynchronous कोडमधील फरक माहित असणे आवश्यक आहे.
Synchronous Execution
कोड ओळीनुसार (line by line) चालतो. प्रत्येक कार्य मागील कार्य पूर्ण होईपर्यंत थांबते.
ATM च्या रांगेचा विचार करा. जोपर्यंत पहिली व्यक्ती आपले काम पूर्ण करत नाही, तोपर्यंत दुसरी व्यक्ती मशीन वापरू शकत नाही.
जर एका कार्याला जास्त वेळ लागला, तर संपूर्ण प्रोग्राम थांबतो. याला 'blocking' असे म्हणतात.
Asynchronous Execution
कार्ये स्वतंत्रपणे चालतात. JavaScript एक कार्य सुरू करते आणि लगेच पुढच्या कार्याकडे वळते.
एका रेस्टॉरंटचा विचार करा. तुम्ही जेवण ऑर्डर करता आणि मग जेवण येईपर्यंत मित्रांशी गप्पा मारता. तुम्ही जेवण येईपर्यंत काहीही न करता शांत बसून राहत नाही.
Asynchronous कोड खालील गोष्टींमुळे तुमचे ॲप्लिकेशन फ्रीझ (freeze) होण्यापासून वाचवतो:
- API requests
- Database queries
- File reading
- Image uploads
Asynchronous कोड हाताळण्याचे तीन मार्ग:
Callbacks एखादे विशिष्ट कार्य पूर्ण झाल्यानंतर एक function चालते. हे एखाद्या डिलिव्हरी बॉयसारखे आहे जो तुमचे जेवण आल्यावर तुम्हाला फोन करतो.
Promises Promise हे भविष्यातील निकालाचे प्रतिनिधित्व करते. जोपर्यंत ते resolved (यशस्वी) किंवा rejected (त्रुटी/error) होत नाही, तोपर्यंत ते 'pending' स्थितीत राहते.
Async/Await यामुळे asynchronous कोड synchronous कोडसारखा दिसतो. हे वाचायला सोपे आहे. तुमच्या प्रोग्रामचा उर्वरित भाग ब्लॉक न करता function थांबवण्यासाठी तुम्ही await वापरता.
हे अंतर्गत (under the hood) कसे कार्य करते:
JavaScript या कार्यांचे व्यवस्थापन करण्यासाठी Event Loop चा वापर करते.
- Call Stack: तुमच्या सध्याच्या functions वर लक्ष ठेवते.
- Web APIs: timers किंवा fetches सारखी लांबची कार्ये हाताळते.
- Callback Queue: पूर्ण झालेली कार्ये साठवून ठेवते.
- Event Loop: जेव्हा stack रिकामी असतो, तेव्हा queue मधून कार्ये 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