𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗦𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗮𝗻𝗱 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁
JavaScript ಒಂದು ಸಮಯದಲ್ಲಿ ಒಂದು ಕೆಲಸವನ್ನು ಮಾತ್ರ ಮಾಡುತ್ತದೆ. ಏಕೆಂದರೆ ಇದು single-threaded language ಆಗಿದೆ.
ವೇಗವಾದ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ನಿರ್ಮಿಸಲು, synchronous ಮತ್ತು asynchronous ಕೋಡ್ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ನೀವು ತಿಳಿದಿರಬೇಕು.
Synchronous Execution
ಕೋಡ್ ಸಾಲು ಸಾಲಾಗಿ ಚಲಿಸುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಕೆಲಸವು ಹಿಂದಿನ ಕೆಲಸವು ಮುಗಿಯುವವರೆಗೆ ಕಾಯುತ್ತದೆ.
ಇದನ್ನು ಒಂದು ATM ಸಾಲಿನಂತೆ ಭಾವಿಸಿ. ಮೊದಲ ವ್ಯಕ್ತಿಯ ಕೆಲಸ ಮುಗಿಯುವವರೆಗೆ ಎರಡನೇ ವ್ಯಕ್ತಿಯು ಯಂತ್ರವನ್ನು ಬಳಸಲು ಸಾಧ್ಯವಿಲ್ಲ.
ಒಂದು ಕೆಲಸವು ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವಲ್ಲಿ, ಇಡೀ ಪ್ರೋಗ್ರಾಂ ನಿಂತುಹೋಗುತ್ತದೆ. ಇದನ್ನು 'blocking' ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ.
Asynchronous Execution
ಕೆಲಸಗಳು ಸ್ವತಂತ್ರವಾಗಿ ನಡೆಯುತ್ತವೆ. JavaScript ಒಂದು ಕೆಲಸವನ್ನು ಪ್ರಾರಂಭಿಸಿ ತಕ್ಷಣವೇ ಮುಂದಿನ ಕೆಲಸಕ್ಕೆ ಹೋಗುತ್ತದೆ.
ಇದನ್ನು ಒಂದು ರೆಸ್ಟೋರೆಂಟ್ನಂತೆ ಭಾವಿಸಿ. ನೀವು ಆಹಾರವನ್ನು ಆರ್ಡರ್ ಮಾಡಿದ ನಂತರ, ಆಹಾರ ಬರುವವರೆಗೆ ಕಾಯುವಾಗ ನಿಮ್ಮ ಸ್ನೇಹಿತರೊಂದಿಗೆ ಮಾತನಾಡುತ್ತೀರಿ. ನೀವು ಆಹಾರ ಬರುವವರೆಗೆ ಸುಮ್ಮನೆ ಕುಳಿತುಕೊಳ್ಳುವುದಿಲ್ಲ.
Asynchronous ಕೋಡ್ ಈ ಕೆಳಗಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಗಿತಗೊಳ್ಳದಂತೆ (freezing) ತಡೆಯುತ್ತದೆ:
- API requests
- Database queries
- File reading
- Image uploads
Asynchronous ಕೋಡ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಮೂರು ವಿಧಾನಗಳು:
Callbacks ಒಂದು ನಿರ್ದಿಷ್ಟ ಕೆಲಸವು ಪೂರ್ಣಗೊಂಡ ನಂತರ ಒಂದು function ಚಲಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಆಹಾರ ಬಂದಾಗ ಡೆಲಿವರಿ ಡ್ರೈವರ್ ನಿಮಗೆ ಕರೆ ಮಾಡುವುದರಂತೆಯೇ ಇರುತ್ತದೆ.
Promises ಒಂದು promise ಭವಿಷ್ಯದ ಫಲಿತಾಂಶವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಇದು resolved (ಯಶಸ್ಸು) ಅಥವಾ rejected (ದೋಷ) ಆಗುವವರೆಗೆ 'pending' ಸ್ಥಿತಿಯಲ್ಲಿರುತ್ತದೆ.
Async/Await ಇದು asynchronous ಕೋಡ್ ಅನ್ನು synchronous ಕೋಡ್ನಂತೆ ಕಾಣುವಂತೆ ಮಾಡುತ್ತದೆ. ಇದನ್ನು ಓದುವುದು ಸುಲಭ. ನಿಮ್ಮ ಪ್ರೋಗ್ರಾಂನ ಉಳಿದ ಭಾಗವನ್ನು ತಡೆಯದೆ (blocking), ಒಂದು function ಅನ್ನು ತಾತ್ಕಾಲಿಕವಾಗಿ ನಿಲ್ಲಿಸಲು ನೀವು
awaitಅನ್ನು ಬಳಸುತ್ತೀರಿ.
ಇದು ಒಳಗಿನಿಂದ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ:
JavaScript ಈ ಕೆಲಸಗಳನ್ನು ನಿರ್ವಹಿಸಲು Event Loop ಅನ್ನು ಬಳಸುತ್ತದೆ.
- Call Stack: ನಿಮ್ಮ ಪ್ರಸ್ತುತ function ಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ.
- Web APIs: timers ಅಥವಾ fetches ನಂತಹ ದೀರ್ಘಾವಧಿಯ ಕೆಲಸಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.
- Callback Queue: ಪೂರ್ಣಗೊಂಡ ಕೆಲಸಗಳನ್ನು ಹಿಡಿದಿಡುತ್ತದೆ.
- Event Loop: Call stack ಖಾಲಿ ಇದ್ದಾಗ queue ನಿಂದ ಕೆಲಸಗಳನ್ನು stack ಗೆ ವರ್ಗಾಯಿಸುತ್ತದೆ.
ಹೋಲಿಕೆ:
Synchronous:
- ಕ್ರಮಬದ್ಧವಾಗಿ ಚಲಿಸುತ್ತದೆ (Runs sequentially)
- ಪ್ರೋಗ್ರಾಂ ಅನ್ನು ತಡೆಯುತ್ತದೆ (Blocks the program)
- ಬರೆಯಲು ಸುಲಭ
- ಭಾರೀ ಕೆಲಸಗಳಿಗೆ ನಿಧಾನ
Asynchronous:
- ಸ್ವತಂತ್ರವಾಗಿ ಚಲಿಸುತ್ತದೆ
- Non-blocking
- ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾಗಿದೆ
- Web apps ಗೆ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ
ಈ ಪರಿಕಲ್ಪನೆಗಳಲ್ಲಿ ಪರಿಣತಿ ಪಡೆಯುವುದು 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