কিভাবে JavaScript কলব্যাক ফাংশন ব্যবহার করবেন

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

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

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

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

কলব্যাক ফাংশনগুলি যে ফাংশনটিতে ঘোষণা করা হয় তার মধ্যে চালানো হয়। আপনি যখন একটি ফাংশন চালান, তার কলব্যাক ফাংশন, যদি একটি নির্দিষ্ট করা থাকে, তা কার্যকর হবে। একবার এটি চালানো হলে, কলব্যাক ফাংশন প্রধান ফাংশনে একটি প্রতিক্রিয়া প্রদান করবে।

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

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

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

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

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

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

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

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

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

খেলোয়াড়ের নাম:ভায়োলেট

চরিত্রের ধরন:ম্যাজ

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

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

printName("Violet", printCharacterType())

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

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

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

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

<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.");
});

এই কোড আইডি "ইমেজ" সহ উপাদান নির্বাচন করে। এটি তখন অ্যাড ইভেন্টলিস্টেনার পদ্ধতি ব্যবহার করে যখন ব্যবহারকারী ছবিটিকে "মাউস ওভার" (হোভার ওভার) করে তখন শুনতে শুনতে। যখন ব্যবহারকারী তাদের কার্সার দিয়ে ছবিটির উপর ঘোরায়, তখন কনসোলে একটি বার্তা প্রিন্ট করা হবে:

ব্যবহারকারী ছবিটির উপর মাউস রেখেছেন৷

ওয়েব অনুরোধের সাথে কলব্যাক ব্যবহার করা

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

আসুন একটি প্রোগ্রাম তৈরি করি যা JSON প্লেসহোল্ডার API-কে একটি অনুরোধ করে, একটি ডামি ডেটা সহ API যা আমরা পরীক্ষার উদ্দেশ্যে ব্যবহার করতে পারি। আমাদের প্রোগ্রাম কনসোলে প্রতিক্রিয়া প্রিন্ট করা উচিত. আমরা একটি ফাংশন ঘোষণা করে শুরু করব যা অনুরোধ করে:

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

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

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

এই কোডটি JSON প্লেসহোল্ডার এপিআইকে অনুরোধ করার জন্য makeRequest পদ্ধতিকে নির্দেশ করে। আমাদের কলব্যাক ফাংশন এই অনুরোধ থেকে কনসোলে ফিরে আসা ডেটা প্রিন্ট করে:

{
  "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."
}

দারুণ! আমাদের কোড একটি ওয়েব অনুরোধ করেছে এবং কনসোলে এর প্রতিক্রিয়া প্রিন্ট করেছে৷

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

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

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

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