Asynchronous JavaScript – জাভাস্ক্রিপ্টের টাইম ট্রাভেল

Asynchronous JavaScript ধরুন, আপনি একটা API থেকে ডেটা আনছেন। কোডে লিখেছেন console.log(data) কিন্তু নিচে দেখছেন undefined। অথচ API ঠিকই কাজ করছে। অথবা ফর্ম সাবমিট করার পরে রেসপন্স পাওয়ার আগেই পেজ রিফ্রেশ হয়ে যাচ্ছে। কেন এমন হচ্ছে?

সমস্যাটা হচ্ছে Asynchronous Behavior। JavaScript এর Execution Engine কাজ শুরু করে দেয় এবং যেই অংশটা পরে আসবে বলে মনে করে, সেটা স্কিপ করে সামনে এগিয়ে যায়। আপনি যদি সেটা না বুঝে কোড লেখেন, তাহলে undefined, null, বা ভুল টাইমিং এর response পাবেন।

এই সমস্যার সমাধান জানতে হলে বুঝতে হবে কীভাবে JavaScript কাজ করে asynchronous ভাবে। আর সেই পথেই আপনাকে নিয়ে যাবো আজকের ব্লগে কদম গল্পে গল্পে, উদাহরণে 

JavaScript Single-Threaded হওয়ায় সমস্যা কী?

JavaScript একটা Single Threaded ভাষা। মানে একই সময়ে একটিমাত্র কাজ করতে পারে।

এখন ধরুন আপনি একটা লম্বা প্রসেস চালু করলেন, যেমনঃ

• সার্ভার থেকে ডেটা আনা (API call)
• ফাইল পড়া
• ডাটাবেসে রিকোয়েস্ট পাঠানো

এই ধরনের কাজগুলো একটু সময় নেয়। আপনি যদি সেগুলো সরাসরি চালান, তাহলে পুরো ব্রাউজার আটকে যাবে সেই কাজটা শেষ হওয়া পর্যন্ত। ইউজার কিছুই করতে পারবে না। স্ক্রল করতে পারবে না, ক্লিক করতে পারবে না সবকিছু থেমে থাকবে।

এখানেই আসে Asynchronous ধারণা। আমরা চাই লম্বা কাজগুলো “পেছনে” চলুক, আর ব্রাউজার ফ্রি থাকুক। ইউজার যেন অন্য কাজ চালিয়ে যেতে পারে।

তাই আমাদের দরকার Asynchronous প্রযুক্তি যেমন: Callback, Promise, এবং async/await যার মাধ্যমে আমরা JavaScript কে একসাথে অনেক কাজ করতে শিখাই, একে একে না করে।

Callback: Asynchronous এর প্রথম ধাপ

Callback কী?

Callback হলো এমন একটা ফাংশন যেটা আরেকটা ফাংশনের মধ্যে প্যারামিটার হিসেবে পাঠানো হয়, এবং কাজ শেষ হওয়ার পরে সেটা কল করা হয়।

Example:

function khabarBanano(callback) {
    console.log('চুলায় ভাত বসানো হলো...');
    setTimeout(() => {
        console.log('ভাত হয়ে গেছে!');
        callback();
    }, 3000);
}
function khabarKhaoya() {
    console.log('এখন খাওয়া যাবে!');
}
khabarBanano(khabarKhaoya);

Callback Hell: যখন কোড পড়াই দুঃস্বপ্ন!

চলুন একটা বাস্তব জীবনের উদাহরণ দেই।

ধরুন আপনি এক বন্ধুকে বললেন:
“তুই বাজার থেকে দুধ নিয়ে আয়, তারপর কলা কিনে আয়, তারপর বাসায় এসে কলা-মিল্কশেক বানা, তারপর আমায় খাওয়াতে ভুলিস না!”

আপনার বন্ধু যদি প্রতিটা কাজের পরে “তুই এখন কী করবি?” জিজ্ঞেস করে, আর প্রতিটা নির্দেশ আলাদা করে বলতে হয়, তখন ব্যাপারটা কেমন গোলমেলে হয় একদম সেই অবস্থা JavaScript Callback Hell এর।

Callback Hell মানে কী?

Callback হচ্ছে এমন এক ফাংশন, যাকে কাজ শেষে ডাকা হয়। কিন্তু যখন আপনি একটার পর একটা asynchronous কাজ করতে চান, এবং প্রতিটা কাজের শেষে অন্য callback বসান তখন যে nested, ঢাউস, এলোমেলো কোড তৈরি হয়, সেটাকেই বলে Callback Hell।

doSomething(function(result) {
    doAnotherThing(result, function(nextResult) {
        doMore(nextResult, function(finalResult) {
            console.log("সব কাজ শেষ!");
        });
    });
});

এখানে কি ঘটছে?

• doSomething কাজ শেষ হলে doAnotherThing চালু হচ্ছে।
  
• সেটা শেষ হলে doMore, তারপর একদম ভেতরে গিয়ে console.log(“সব কাজ শেষ!”)।
  

সমস্যা কোথায়?

1. Code Readability কমে যায়:
   এতগুলো ফাংশন একটার ভিতরে আরেকটা ঢুকিয়ে দিলে কোড দেখতে যায় বাঁকানো সিঁড়ির মতো যেন একজোড়া } হারিয়ে গেলে আপনার চোখে জল আসবে!
   
2. Debug করা কঠিন:
   কোথায় Error ধরবেন? কোথায় কী হচ্ছে? Stack trace দেখলেই মাথা ঘুরে যায়। nested callback এ কোনটা কোনটার আগে চলবে বোঝাই যায় না।
   
3. Maintenance Nightmare:
   কোডে নতুন ফিচার যুক্ত করতে গেলে ভয় লাগে “ভুল করলেই পুরো সিস্টেম ভেঙে যাবে না তো?”
   
4. Scalability অসম্ভব:
   আজ তিনটা nested callback, কাল ১০টা? এইভাবে বড় প্রজেক্টে callback দিয়ে কাজ চালানো একরকম অসম্ভব।

 চলুন দেখি Callback Hell কেমন লাগে…

loginUser('arif', function(user) {
    getUserDetails(user.id, function(details) {
        fetchUserPosts(details.username, function(posts) {
            filterImportantPosts(posts, function(important) {
                notifyUser(important, function() {
                    console.log("সব কিছু শেষ!");
                });
            });
        });
    });
});

এই কোডটা পড়তে গিয়ে আপনি যদি চিন্তায় পড়ে যান “এটা কি আমি কাল লিখেছিলাম?” তাহলে বুঝবেন, আপনি Callback Hell-এ পড়েছেন!

Callback Hell থেকে বাঁচার উপায়?

এই সমস্যার সমাধান করতেই এসেছে Promise ও async/await যারা Callback Hell কে ঘাড় ধাক্কা দিয়ে বের করে দেয় এবং কোডকে করে সুন্দর, পরিস্কার আর পড়তে গল্পের মতো!

পরবর্তী অংশে Promise ও async/await কিভাবে Callback Hell কে সরিয়ে কোডকে পরিষ্কার করে, তা নিয়ে আরও গল্প থাকবে। তাই চোখ রাখুন এখানেই।

Promise: Callback hell এর সমাধান:

Promise কী?

Promise হলো একটা অবজেক্ট, যেটা ভবিষ্যতে কিছু রেজাল্ট দিবে হোক সেটা success বা failure।

তিনটা স্টেট থাকে:

1. Pending (কাজ চলছে)
2. Fulfilled (কাজ সফল)
3. Rejected (কাজ ব্যর্থ)

উদাহরণ:

let khabarDeoa = new Promise(function(resolve, reject) {
    let ready = true;
    if (ready) {
        resolve("খাবার এসে গেছে!");
    } else {
        reject("দুঃখিত, রান্না হয়নি");
    }
});

khabarDeoa
    .then(function(result) {
        console.log(result);
    })
    .catch(function(error) {
        console.log(error);
    });

সুবিধা:

• Clean কোড
• Better Error Handling
• Chaining সম্ভব, যেমন:

getUser()
  .then(getPosts)
  .then(getComments)
  .catch(handleError);

async/await: Promise এর সুন্দরতম রূপ

async/await কী?

ES2017 (ES8) এ Introduce করা হয়। আপনি চাইলে asynchronous কোডকে synchronous স্টাইলে লিখতে পারেন। এটি Promise এর ওপরেই কাজ করে, কিন্তু সিনট্যাক্স অনেক সহজ।

উদাহরণ:

function biriyaniBanano() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("বিরিয়ানি রেডি!");
        }, 3000);
    });
}

async function khabarProcess() {
    console.log("অর্ডার দেওয়া হলো...");
    const result = await biriyaniBanano();
    console.log(result);
    console.log("খাওয়া শুরু!");
}

khabarProcess();

সুবিধা:

• কোড পড়া সহজ
• ডিবাগ করা সহজ
• Nested Callback থেকে মুক্তি
• Try/Catch এর মাধ্যমে Error Handling সহজ:

async function loadData() {
    try {
        const res = await fetch('https://api.example.com/data');
        const data = await res.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

কখন কোনটা ব্যবহার করবেন?

Technique	Best For
Callback	Simple asynchronous task
Promise	Chaining, cleaner error flow
async/await	Complex logic with readability

সংক্ষিপ্ত কিছু টিপসঃ

• setTimeout / setInterval দিয়ে Asynchronous শুরু হতো আগে।
• fetch, axios এগুলো Promise based API request এর জন্য ব্যবহৃত হয়।
• async ফাংশনের ভিতরে await ব্যবহার করা যায়, বাইরের না।
• await শুধুমাত্র Promise return করে এমন ফাংশনের জন্য কাজ করে।

Asynchronous JavaScript শেখা মানে আপনি JavaScript-এর advanced power unlock করছেন। callback, promise, async/await এই তিন ভাইকে ভালোভাবে বুঝে ফেললে আপনি যে কোনো complex asynchronous problem এর সমাধান করতে পারবেন।

নতুনদের জন্য সাজানো এই ব্লগটি পড়ে যদি একটুও ক্লিয়ার হয়, তাহলে ছোট্ট একটা শেয়ার বা কমেন্ট করলে আমরা আরও উৎসাহ পাবো।

আপনি যদি JavaScript এর এরকম মজার, গল্পভিত্তিক ব্যাখ্যা ভালোবাসেন তাহলে Programming Hero’র PH BOOK আপনার জন্য একদম পারফেক্ট। রিয়েল লাইফ উদাহরণ, মজা আর হাস্যরসের ছোঁয়ায় কঠিন কনসেপ্টগুলোকে একেবারে সহজ ও উপভোগ্য করে তোলা হয়েছে।