Synchronous और Asynchronous JavaScript को समझना
JavaScript एक समय में एक ही कार्य (task) चलाता है। ऐसा इसलिए है क्योंकि यह एक single-threaded भाषा है।
तेज़ ऐप्स बनाने के लिए, आपको synchronous और asynchronous कोड के बीच का अंतर जानना आवश्यक है।
Synchronous Execution
कोड लाइन दर लाइन चलता है। प्रत्येक कार्य पिछले कार्य के समाप्त होने की प्रतीक्षा करता है।
एक ATM लाइन के बारे में सोचें। जब तक पहला व्यक्ति अपना काम पूरा नहीं कर लेता, दूसरा व्यक्ति मशीन का उपयोग नहीं कर सकता।
यदि किसी एक कार्य में लंबा समय लगता है, तो पूरा प्रोग्राम रुक जाता है। इसे blocking कहा जाता है।
Asynchronous Execution
कार्य स्वतंत्र रूप से चलते हैं। JavaScript एक कार्य शुरू करता है और तुरंत अगले कार्य पर बढ़ जाता है।
एक रेस्टोरेंट के बारे में सोचें। आप खाना ऑर्डर करते हैं, और फिर इंतज़ार करते समय अपने दोस्तों से बात करते हैं। आप कुछ भी करने से पहले बस चुपचाप बैठकर खाने के आने का इंतज़ार नहीं करते।
Asynchronous कोड आपके एप्लिकेशन को निम्नलिखित के दौरान फ्रीज़ (freeze) होने से बचाता है:
- API requests
- Database queries
- File reading
- Image uploads
Asynchronous कोड को संभालने के तीन तरीके:
Callbacks एक विशिष्ट कार्य पूरा होने के बाद एक फंक्शन चलता है। यह एक डिलीवरी ड्राइवर की तरह है जो आपके खाना पहुँचने पर आपको कॉल करता है।
Promises एक promise भविष्य के परिणाम को दर्शाता है। यह 'pending' स्थिति में रहता है जब तक कि यह 'resolved' (सफलता) या 'rejected' (त्रुटि) न हो जाए।
Async/Await यह asynchronous कोड को synchronous कोड की तरह दिखाता है। इसे पढ़ना आसान है। आप अपने प्रोग्राम के बाकी हिस्सों को ब्लॉक किए बिना किसी फंक्शन को रोकने के लिए
awaitका उपयोग करते हैं।
यह पर्दे के पीछे (under the hood) कैसे काम करता है:
JavaScript इन कार्यों को प्रबंधित करने के लिए एक Event Loop का उपयोग करता है।
- Call Stack: आपके वर्तमान फंक्शन्स को ट्रैक करता है।
- Web APIs: टाइमर या fetch जैसे लंबे कार्यों को संभालता है।
- Callback Queue: पूरे हो चुके कार्यों को रखता है।
- Event Loop: जब stack खाली होता है, तो यह queue से कार्यों को stack में ले जाता है।
तुलना:
Synchronous:
- क्रमवार (sequentially) चलता है
- प्रोग्राम को ब्लॉक करता है
- लिखना सरल है
- भारी कार्यों के लिए धीमा है
Asynchronous:
- स्वतंत्र रूप से चलता है
- Non-blocking है
- अधिक जटिल है
- वेब ऐप्स के लिए कुशल (efficient) है
इन अवधारणाओं (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