Synchronous এবং Asynchronous JavaScript বোঝা
JavaScript একবারে একটি কাজ সম্পন্ন করে। এর কারণ হলো এটি একটি 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 ভবিষ্যতের ফলাফল নির্দেশ করে। এটি resolve (সফল) বা reject (ত্রুটি) না হওয়া পর্যন্ত pending অবস্থায় থাকে।
Async/Await এটি asynchronous কোডকে synchronous কোডের মতো দেখায়। এটি পড়া সহজ। আপনি আপনার প্রোগ্রামের বাকি অংশকে ব্লক না করেই একটি ফাংশন থামানোর জন্য await ব্যবহার করেন।
এটি পর্দার আড়ালে কীভাবে কাজ করে:
JavaScript এই কাজগুলো পরিচালনা করতে একটি Event Loop ব্যবহার করে।
- Call Stack: আপনার বর্তমান ফাংশনগুলোকে ট্র্যাক করে।
- Web APIs: টাইমার বা fetch-এর মতো দীর্ঘ কাজগুলো পরিচালনা করে।
- Callback Queue: সম্পন্ন হওয়া কাজগুলোকে ধরে রাখে।
- Event Loop: স্ট্যাক খালি থাকলে কিউ (queue) থেকে কাজগুলোকে স্ট্যাকে নিয়ে আসে।
Comparison:
Synchronous:
- ক্রমানুসারে চলে
- প্রোগ্রামকে ব্লক করে
- লেখা সহজ
- ভারী কাজের জন্য ধীরগতির
Asynchronous:
- স্বাধীনভাবে চলে
- Non-blocking
- আরও জটিল
- ওয়েব অ্যাপের জন্য দক্ষ
এই ধারণাগুলোতে দক্ষতা অর্জন করা React, Node.js এবং আধুনিক API ব্যবহারের চাবিকাঠি।
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