Q39. What is the difference between synchronous and asynchronous JavaScript?
সাথে সাথে চলা বনাম অপেক্ষা করে চলা — event loop ও blocking সমস্যা।
Synchronous কোড লাইন বাই লাইন সাথে সাথে চলে — উপরের লাইন শেষ না হলে নিচের লাইন শুরু হয় না। আর asynchronous কোড পরে অন্য সময়ে চলে, যার মানে কাজ বাকি রেখে সাময়িকভাবে অন্য কাজ করা যায়।
console.log("প্রথম");
// অনেক সময় লাগে কিন্তু browser block করে না
setTimeout(() => {
console.log("তৃতীয়");
}, 1000);
console.log("দ্বিতীয়");output হবে প্রথম, দ্বিতীয়, তারপর তৃতীয়। কারণ setTimeout শুধু callback অপেক্ষার তালিকায় রাখে ও ফেরত আসে, তাই সাথে সাথে দ্বিতীয় ছাপা হয়ে যায়। ১ সেকেন্ড পরে আসলেই তৃতীয় ছাপা হয়।
সবচেয়ে বড় সমস্যা দেখা যায় যখন synchronous কাজ খুব ভারী হয়।
// এই কোডটি চলতে চলতে UI ফ্রিজ হয়ে যাবে
for (let i = 0; i < 1000000000; i++) {
// ভারী হিসাব
}
console.log("এই লাইনটি অনেক পরে আসবে");
// ব্যবহারকারী click বা scroll করতে পারবে না,fetch, setTimeout, setInterval, event listener, file পড়া — এর সব asynchronous। এগুলো সাধারণত browser-এর কোনো API দিয়ে হয়, যা কাজটি main thread-এর বাইরে সাময়িকভাবে রেখে পরে ফেরত আসে।
// synchronous — ধারাবাহিকভাবে দ্রুত চলে
for (let i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
// asynchronous — পরে চলে
setTimeout(() => console.log("সেকেন্ড"), 0);
Promise.resolve().then(() => console.log("প্রথম microtask"));
console.log("মূল কোড");output ক্রম হবে 0, 1, 2, মূল কোড, প্রথম microtask, সেকেন্ড। দেখা যায় main code আগে শেষ হয়, তারপর Promise-এর callback, সবশেষে setTimeout-এর callback চলে — যদিও দুটোতেই 0 দেওয়া হয়েছে।
// ব্লক করা এড়ানোর উপায়
function heavyTask(callback) {
setTimeout(() => {
console.log("ভারী কাজ শেষ");
callback();
}, 0);
}
heavyTask(() => {
console.log("পরের কাজ");
});
console.log("এই লাইন আগে ছাপা হবে");| বিষয় | Synchronous | Asynchronous |
|---|---|---|
| সময় | সাথে সাথে | পরে |
| পরের কাজ | আগেরটা শেষ হলে | আগেরটা শুরু করেই পরেরটা |
| উদাহরণ | console.log, for loop | setTimeout, fetch, Promise |
| ঝুঁকি | UI freeze | error handle করা কঠিন |
Asynchronous মানে “multithreaded” নয় — JavaScript একটি thread-এই চলে, কিন্তু event loop-এর সাহায্যে কাজ বিরত রাখে ও পরে চালায়, তাই ভারী কাজ চলতে গেলে UI বন্ধ হয় না।