JavaScript Synchronous নাকি Asynchronous?

JavaScript Synchronous নাকি Asynchronous এ নিয়ে নানান কনফিউশান থাকে অনেকের মাঝেই তাই আজকে আলোচনা করছি আসলে JavaScript Synchronous নাকি Asynchronous এ নিয়ে ।

জাভাস্ক্রিপ্ট বাই ডিফল্ট সিনক্রোনাস প্রোগ্রামিং ল্যাঙ্গুয়েজ হলেও জাভাস্ক্রিপ্ট অত্যন্ত স্মার্ট হওয়ায় অ্যাসিনক্রোনাস আচরণও করতে পারে। আমরা যখন কোন রিমোট সার্ভারে কাজ করতে চাই যাকে অ্যাজাক্স কল বলে, ইনপুট/আউটপুট নিয়ে কাজ করতে চাই অথবা ফাইল সিস্টেম নিয়ে কাজ করতে চাই তখন জাভাস্ক্রিপ্ট এটা সম্ভব করে তার অ্যাসিনক্রোনাস আচরণ দিয়ে । JavaScript শিখতে গিয়ে আমরা অনেক সময় বুঝতেই পারি না, এই কোডটা আগে চললো কেন, আর ওটা পরে কেনো চললো!
আর এখানেই চলে আসে সেই রহস্যময় জিনিসটা – Synchronous vs Asynchronous JavaScript।

এই ব্লগে আপনি জানবেন,

• এই দুই ভাইয়ের মধ্যে কে বেশি সিরিয়াস আর কে একটু অলস
• কীভাবে তারা JavaScript এ আচরণ করে
• আর কীভাবে এগুলো আপনাকে বানিয়ে দেয় অসাধারণ ডেভেলপার!

Synchronous JavaScript – “ধৈর্য ধরো ভাই, আমার কাজ শেষ না হলে সামনে কিছু হবে না!”

Synchronous জাভাস্ক্রিপ্ট মানে হচ্ছে, একসাথে একটাই কাজ চলবে। যতক্ষণ না একটা কাজ শেষ হচ্ছে, পরের লাইনে কোড যাবে না।

উদাহরণ:

console.log("1. আমি শুরু করলাম");

console.log("2. আমি মাঝখানে");

console.log("3. আমি শেষ!");

      আউটপুট:

1. আমি শুরু করলাম  

                       2. আমি মাঝখানে  

                       3. আমি শেষ!

সবকিছু এক লাইনে, সাজানো-গোছানো। এটা অনেকটা লাইনে দাঁড়ানোর মতো। বাসে উঠতে গেলে অথবা বিদ্যুৎ বিল দিতে যেয়ে সবাই লাইনে দাঁড়িয়ে, একে একে এগোয়। কেউ কাউকে কাটিয়ে আগে যায় না।

Asynchronous JavaScript – “আরে তুমি কাজ করো, আমি পরে এসে দেখে নিবো”

Asynchronous মানে হচ্ছে, তুমি কাজ চালিয়ে যাও, আমি পিছে একটা টাইমবোম (setTimeout 🤭) সেট করে দিলাম, সময় হলে দেখবো।

উদাহরণ:

console.log("1. আমি শুরু করলাম");

setTimeout(() => {

  console.log("2. আমি একটু দেরিতে আসলাম!");

}, 2000);

console.log("3. আমি শেষ!");

আউটপুটঃ

1. আমি শুরু করলাম  

3. আমি শেষ!  

2. আমি একটু দেরিতে আসলাম!

setTimeout হলো জাভাস্ক্রিপ্টের একটা ডিফল্ট ফাংশন, যা একটা ওয়েব এপিআই বা এসিংক্রোনাস টাস্ক। এখানে আপনি দেখলেন টাইমআউট ফাংশন দেরিতে চললো, কিন্তু বাকি কোড অপেক্ষা করলো না। এটা অনেকটা রেস্টুরেন্টে খাবারের অর্ডার দিয়ে পাশের টেবিলে বসে ফেসবুক চালানোর মতো। খাবার আসলে খাবো টাইপ একটা ব্যাপার। 

জাভাস্ক্রিপ্ট যদি কোন অ্যাজাক্স কল পায়, তাহলে সেই অপারেশন শেষ হওয়া পর্যন্ত অপেক্ষা না করে পরের এক্সিকিউশনে যায়। এই প্রোগ্রামে setTimeout দিয়ে ২ সেকেন্ড পরে ২ নাম্বার কনসোল টা প্রিন্ট করতে বলছি। যেহেতু এখানে ২ সেকেন্ড টাইম দরকার তাই জাভাস্ক্রিপ্ট কম্পাইলার এই অংশটাতে ২ সেকেন্ড অপেক্ষা না করে পরের অপারেশনে চলে যাবে। এবং ২ নাম্বার লাইন টা কনসোলে দেখানোর আগেই ৩ নাম্বার লাইনটা কনসোলে দেখিয়ে দিবে। এরপর ২ সেকেন্ড শেষ হয়ে গেলে ২ নাম্বার লাইনটা কনসোলে দেখিয়ে দিবে। 

রিয়েল লাইফ সিনারিওঃ জাভাস্ক্রিপ্টের এই আচরণের জন্য কি সমস্যা হতে পারে এবং সেটা কিভাবে   সমাধান করতে পারি সেটা নিয়েই এখন আলোচনা করবো। 

ধরুন আমাদের কোডবেসে এমন কোড আছে যেটা আরেকটা রিমোট সার্ভার থেকে ডাটা লোড বা ফেচ করে নিয়ে আসে এবং আমাদের এপ্লিকেশনে প্রদর্শন করে। এখন এই যে প্রসেস টা, আমরা যদি ডাটা ফেচ করে পরের লাইনেই ডাটা শো করে দিই তাহলে কিন্তু ডাটা শো করবে না। ঠিকভাবে ডাটা ফেচ করার কোড লিখলেও আমরা সঠিকভাবে ডাটা পাবো না। কারন রিমোট সার্ভার থেকে ডাটা লোড করে নিয়ে আসা অ্যাসিনক্রোনাস প্রসেস। আমরা যদি রিমোট সার্ভার থেকে ডাটা আসার আগেই ডাটা শো করানোর ইন্সট্রাকশন দেই তাহলে undefined অথবা অন্য কোন আনএক্সপেক্টেড এরোর পেয়ে যাবো।

কারন রিমোট সার্ভার থেকে ডাটা ফেচ করে আমাদের এপ্লিকেশনে ডাটা নিয়ে আসতে সময় দরকার। কত সময় দরকার সেটা আমরা জানি না।  তবে জাভাস্ক্রিপ্টের এই অ্যাসিনক্রোনাস আচরণ আসলে খারাপ কিছু না। বরং এটাই জাভাস্ক্রিপ্টের ম্যাজিক। 

জাভাস্ক্রিপ্টে তো কল স্ট্যাক আছে আমরা জানি।

যেখানে লাইন বাই লাইন কোড এক্সিকিউট হতে থাকে। সেখানে কোন অ্যাসিনক্রোনাস টাস্ক বা অ্যাজাক্স কল চলে আসলে জাভাস্ক্রিপ্ট সেটার জন্য পুরো এপ্লিকেশনকে ব্লক না করে সেটাকে ওয়েব এপিআই এর কাছে পাঠিয়ে দেয় এবং পরবর্তীতে সেটা এক্সিকিউশনের জন্য রেডি হলে ইভেন্ট লুপ সেটাকে কল স্ট্যাকে পাঠিয়ে দেয় এক্সিকিউটের জন্য। এদিকে লাইন বাই লাইন সিনক্রোনাস টাস্কগুলো এক্সিকিউট হতে থাকে।  জাভাস্ক্রিপ্টের অত্যন্ত গুরুত্বপূর্ণ একটা ফিচার এই ইভেন্ট লুপ।

সেটা আমরা অন্য একটা আলোচনায় আলাপ করবো। আপাতোত এই দারুণ ভিডিওটা দেখতে পারেন – ইভেন্ট লুপ

Technology এর সকল আপডেট সবার আগে বিস্তারিত পেতে চেক করুন