জাভাস্ক্রিপ্ট কলব্যাক ফাংশন ব্যবহার: একটি গাইড

আপনি সম্ভবত কোড স্নিপেটে ফাংশনের ভেতরে "callback" শব্দটি দেখেছেন। কলব্যাক হলো একটি বিশেষ ধরনের ফাংশন যা অন্য একটি ফাংশনের ভেতরে প্যারামিটার হিসেবে পাস করা হয়।

কলব্যাক ফাংশন প্রায়ই ইভেন্ট হ্যান্ডলারের ভেতরে ব্যবহৃত হয় একটি কোড ব্লক চালাতে। এই গাইডে আমরা কলব্যাক ফাংশন কী, কীভাবে কাজ করে, এবং উদাহরণসহ কীভাবে আপনার কোডে ব্যবহার করবেন তা আলোচনা করব।

কলব্যাক ফাংশন কী?

একটি কলব্যাক ফাংশন হলো এমন একটি ফাংশন যা অন্য একটি ফাংশনে প্যারামিটার হিসেবে পাস করা হয়।

কলব্যাক ফাংশনটি যে ফাংশনে ঘোষণা করা হয়েছে সেটির ভেতরে চলে। আপনি যখন একটি ফাংশন এক্সিকিউট করেন, তার কলব্যাক ফাংশন (যদি নির্দিষ্ট থাকে)ও এক্সিকিউট হয়। একবার চালানোর পর কলব্যাক ফাংশন মেইন ফাংশনে একটি রেসপন্স ফেরত দেয়।

কলব্যাক ফাংশন কাজ করে কারণ জাভাস্ক্রিপ্ট-এ প্রতিটি ফাংশন একটি অবজেক্ট। এর মানে আমরা সেগুলো অন্য যেকোনো অবজেক্টের মতো ব্যবহার করতে পারি। আমরা ফাংশনকে ভেরিয়েবলে অ্যাসাইন করতে পারি, বা আর্গুমেন্ট হিসেবে পাস করতে পারি, ঠিক যেকোনো অন্য মানের মতো।

একটি সহজ উদাহরণ দিয়ে কলব্যাক কীভাবে কাজ করে তা দেখি। একটি ফাংশন তৈরি করব যা একটি ভিডিও গেমের প্লেয়ারের নাম কনসোলে প্রিন্ট করবে, তারপর তাদের ক্যারেক্টার টাইপ। প্রথমে একটি ফাংশন ঘোষণা করি:

function printName(name, callback) {
    console.log(`Player Name: ${name}`);
    callback();
}

এটি একটি অ্যানোনিমাস জাভাস্ক্রিপ্ট ফাংশন যাতে একটি কলব্যাক রয়েছে। অ্যানোনিমাস ফাংশন হলো নামোনামা ফাংশন। সেগুলো সাধারণত অন্য ফাংশনের ভেতরে থাকে, উপরের উদাহরণের মতো।

এই কলব্যাক আমাদের কোডে দ্বিতীয় প্যারামিটার। যখন এই ফাংশন চলবে, প্লেয়ারের নাম কনসোলে প্রিন্ট হবে। তারপর আমাদের কলব্যাক ফাংশনের কন্টেন্ট এক্সিকিউট হবে।

এখন এই ফাংশনটি ব্যবহার করি:

printName("Violet", function() {
    console.log("Character Type: Mage");
})

এই কোডে আমরা printName() ফাংশনটি কল করেছি। প্লেয়ারের নাম "Violet" বলে নির্দিষ্ট করেছি। এবং কলব্যাক হিসেবে একটি ফাংশন পাস করেছি যা ক্যারেক্টার টাইপ প্রিন্ট করে। কোড চালালে আউটপুট:

Player Name: Violet
Character Type: Mage

printName() ফাংশনের কন্টেন্ট এক্সিকিউট হয়েছে, তারপর কলব্যাক ফাংশনের কন্টেন্ট। কলব্যাক ফাংশন প্যারামিটার হিসেবে পাস করার সময় ঘোষণা করা বাধ্যতামূলক নয়। আমরা কোড রিফ্যাক্টর করে কলব্যাক ফাংশন আলাদা করে লিখতে পারি:

function printCharacterType() {
    console.log("Character Type: Mage");
}
printName("Violet", printCharacterType)

এই কোডও একই আউটপুট দেবে। আমরা printCharacterType() নামে একটি ফাংশন তৈরি করেছি যা প্লেয়ারের ক্যারেক্টার টাইপ কনসোলে প্রিন্ট করে। এই ফাংশনটি এক্সিকিউট হয় যখন আমরা printName() চালাই, কারণ এটি কলব্যাক হিসেবে নির্দিষ্ট করা হয়েছে।

ইভেন্টের সাথে কলব্যাক ব্যবহার

কলব্যাক সাধারণত জাভাস্ক্রিপ্ট ইভেন্টের সাথে ব্যবহৃত হয়।

ইভেন্ট একটি অ্যাকশন শোনায়, যেমন ইউজার বাটনে ক্লিক করলে, এবং সেই অ্যাকশন হলে একটি কোড ব্লক চালায়। একটি কলব্যাক তৈরি করি যা ইউজার একটি ইমেজের ওপর মাউস হোভার করলে চলবে। একটি HTML ফাইল খুলুন এবং <body> ট্যাগের ভেতরে নিচের কোড পেস্ট করুন:

<img src="https://careerkarma.com/favicon.ico" id="image" />

এটি ওয়েব পেজে একটি ইমেজ ডিফাইন করে যেটিতে ইউজার ক্লিক করতে পারবে। তারপর নিচের জাভাস্ক্রিপ্ট কোড <script> ট্যাগের ভেতরে লিখুন:

var image = document.querySelector("#image");
image.addEventListener("mouseover", function() {
    console.log("The user has moused over the image.");
});

এই কোড "image" আইডি বিশিষ্ট এলিমেন্টটি সিলেক্ট করে। তারপর addEventListener মেথড ব্যবহার করে ইউজার কখন ইমেজের ওপর "mouseover" (হোভার) করছে তা শোনায়। ইউজার কাসর দিয়ে ইমেজের ওপর হোভার করলে কনসোলে একটি মেসেজ প্রিন্ট হবে:

The user has moused over the image.

ওয়েব রিকোয়েস্টের সাথে কলব্যাক ব্যবহার

ওয়েব রিকোয়েস্ট সাধারণত সিঙ্ক্রোনাস ভাবে এক্সিকিউট করা হয়। কারণ অধিকাংশ ওয়েব অ্যাপ্লিকেশন পেজের বাকি অংশ লোড হওয়ার আগে নির্দিষ্ট ডেটা রিট্রিভ করতে চায়।

একটি প্রোগ্রাম তৈরি করি যা JSON Placeholder API-তে রিকোয়েস্ট করবে—এটি একটি ডামি ডেটা API যা টেস্টিংয়ের জন্য ব্যবহার করা যায়। আমাদের প্রোগ্রাম রেসপন্স কনসোলে প্রিন্ট করবে। প্রথমে রিকোয়েস্ট করার ফাংশন ঘোষণা করি:

function makeRequest(url, callback) {
    var query = await fetch(url).then(res => res.json());
    callback(query);
}

এই ফাংশন fetch() API ব্যবহার করে ওয়েব রিকোয়েস্ট করবে। রেসপন্স "query" ভেরিয়েবলে অ্যাসাইন হবে। আমরা এই ওয়েব রিকোয়েস্টের ফলাফল আমাদের কলব্যাক ফাংশনে "query" আর্গুমেন্ট হিসেবে পাস করে ফেরত দেব। এখন ফাংশনটি কল করি এবং রেসপন্স কনসোলে প্রিন্ট করি:

makeRequest("https://jsonplaceholder.typicode.com/posts/1", function(data) {
    console.log(data);
});

এই কোড makeRequest মেথডকে JSON Placeholder API-তে রিকোয়েস্ট করতে নির্দেশ করে। আমাদের কলব্যাক ফাংশন এই রিকোয়েস্ট থেকে ফেরত আসা ডেটা কনসোলে প্রিন্ট করে:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto."
}

বাহ! আমাদের কোড একটি ওয়েব রিকোয়েস্ট করল এবং এর রেসপন্স কনসোলে প্রিন্ট করল।

উপসংহার (এবং চ্যালেঞ্জ)

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

চ্যালেঞ্জ খুঁজছেন? একটি কলব্যাক ফাংশন লিখুন যা ওয়েব পেজে একটি বাটন প্রেস করলে এক্সিকিউট হবে। আপনি যদি এটি ইতিমধ্যে করে ফেলেছেন, তবে একটি ফাংশন লিখুন যা একটি আইটেম লিস্ট সোর্ট করে এবং প্রতিটিকে কনসোলে প্রিন্ট করতে কলব্যাক ফাংশন ব্যবহার করে।

এখন আপনি জাভাস্ক্রিপ্ট কলব্যাক অ্যাসিঙ্ক্রোনাস প্রোগ্রামিং-এ প্রোফেশনালের মতো ব্যবহার করতে পারবেন!