জাভাস্ক্রিপ্ট টিউটোরিয়াল-শিখুন গল্পে গল্পে সাথে 1100+ Exercise

  • জাভাস্ক্রিপ্ট পরিচিতি-Introduction to JavaScript
  • প্রোগ্রামিং শুরু করতে কতটুকু গণিত লাগে?
  • প্রোগ্রামিং শুরু করতে কতটুকু ইংরেজি জানা লাগে?
  • ভালো প্রোগ্রামার কিভাবে হবো? [+৭টি গুরুত্বপূর্ণ টিপস]
  • Dynamic ডায়নামাইট
  • প্রাইমারি স্কুলের Primitive
  • ডিফাইনহীন Undefined
  • পল্টিবাজ নট (!), ডাবল দিলে কট
  • == এর বেইজ্জুতি Type coercion
  • কল মি callback
  • ছোট scope-এ বড় কথা !

কল মি callback


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


এইটাই বাস্তবতা!


ধর, তোর কাছে greeting নামে একটা ফাংশন আছে। সেটার একটা প্যারামিটার আছে greatingHandler, এইটা যেকোনো কিছু হতে পারে এবং প্যারামিটার হিসেবে যেটাই পাঠাক না কেন, তুই সেটাকে কনসোল লগ করতেছস। তারপর নিচে আরেকটা ফাংশন আছে morningGreet নামে। তুই যদি এইটাকে প্যারামিটার (আর্গুমেন্ট) হিসেবে greeting ফাংশনকে কল করিস, তাহলে আউটপুটে বলে দিবি, তুই একটা ফাংশনকে সেন্ড করেছিস। 


  function greeting(greatingHandler) {
   console.log(greatingHandler);
  }

  function morningGreet() {
   console.log('Good Morning');
  }

  greeting(morningGreet);

Output:  
[Function: morningGreet]


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


  function greeting(greatingHandler) {
   greatingHandler()
  }

  function morningGreet() {
   console.log('Good Morning');
  }

  greeting(morningGreet);

Output: Good Morning


এই জন্য আউটপুট হিসেবে Good Morning পাবি। কারণ, morningGreet নামে যে ফাংশনটা আর্গুমেন্ট হিসেবে সেন্ড করছস, সেটার ভিতরে এই Good Morning-কে কনসোল লগ করতেছস।


কলব্যাক ফাংশন হলো

Callback function হলো এমন একটি ফাংশন, যা অন্য ফাংশনের ভিতরে পাস করা হয় এবং সেই ফাংশনটি কিছু কাজ করার পর এই callback function-কে কল করে।


আরেকটা উদাহরণ দেই—


নিচের কোডে তুই calculate ফাংশন ডিক্লেয়ার করছস। সেটাতে তিনটা প্যারামিটার লাগবে— a, b, এবং callback। এদের মধ্যে a এবং b হলো সংখ্যাগুলো, যেগুলো যোগ করা হবে। আর callback হলো একটা ফাংশন, যেটা যোগফল (sum) নিয়ে কিছু একটা করবে।


  function calculate(a, b, callback) {
    const result = a + b;
    callback(result); 
  }

এখন তোর কাছে আরেকটা ফাংশন আছে printResult, যে একটাই প্যারামিটার নেয় value নামে এবং সেই value-কে কনসোলে প্রিন্ট করে।

  function printResult(value) {
    console.log("Result is:", value);
  }

  calculate(5, 10, printResult);

Output: Result is: 15


এখন তুই যদি calculate(5, 10, printResult) কল করস, তাহলে calculate ফাংশনে গিয়ে a এবং b যোগ করে result হবে 15। তারপর আছে callback (result); অর্থাৎ callback ফাংশন, যেটা আসলে printResult ফাংশন (যেটাকে থার্ড প্যারামিটার হিসেবে পাঠানো হইছে) সেই ফাংশনকে কল করবে এবং result-এর মান অর্থাৎ 15 দিয়ে কল করবে। তখন সে printResult(15)-এর মতো printResult ফাংশনের ভিতরে গিয়ে console.log("Result is:", value) চালাবে আর কনসোলে লগ করবে Result is: 15।


অলরেডি কলব্যাক করেছি 

তুই যখন map, filter, find ইত্যাদি মেথড ব্যবহার করিস, তখন যেই ফাংশনটা তুই তাদের ভিতরে পাঠাইস, সেটি আসলে callback function। 


map মেথডে যেই ফাংশন পাস করা হয়, তা প্রতিটি উপাদানের জন্য কলব্যাক ফাংশনকে কল করে। একইভাবে filter মেথডে যেই ফাংশন পাস করা হয়, অর্থাৎ যে ফাংশন দিয়ে উপাদানগুলোকে ফিল্টার করে বা find করে, সেগুলা আসলে কলব্যাক ফাংশন।


  const numbers = [1, 2, 3, 4, 5];
  const doubledNumbers = numbers.map(num => num * 2);
  console.log(doubledNumbers); 

Output: [2, 4, 6, 8, 10]


আবার অ্যারো ফাংশনকে কলব্যাক ফাংশন হিসেবে ইউজ না করে নরমাল ফাংশনকে কলব্যাক ফাংশন হিসেবে ইউজ করতে পারবি। 


  const numbers = [1, 2, 3, 4, 5];
  const result = numbers.map(function(num) {
    return num * 2;
  });
  console.log(result); 

Output: [2, 4, 6, 8, 10]


Practice:

  1. একটি ফাংশন লিখ, তার ভিতরে আরেকটি ফাংশন প্যারামিটার হিসেবে পাঠিয়ে তাকে কল কর এবং রেজাল্ট দেখ।
  2. ফাংশন লিখ, যেটি একটি অবজেক্ট প্যারামিটার নিবে এবং callback-এর মাধ্যমে অবজেক্টের সব কিগুলো কনসোলে দেখাবে।
  3. numberProcessor নামে একটি ফাংশন লিখ, যেটি একটি সংখ্যা এবং একটি callback নিবে এবং সংখ্যাটিকে 5 দিয়ে ভাগ করে callback-এর মাধ্যমে আউটপুট দেখাবে।
  4. তুই ফাংশনের ভিতর থেকে অন্য একটা ফাংশন কল করবি, যেমন greeting ফাংশনের ভিতরে greetingHandler() ফাংশন কল করা হয়েছে। একবার তুই একটা প্রোগ্রাম লিখে দেখ, যেখানে প্রথম ফাংশনটি অন্য ফাংশনকে কল করবে এবং ফাংশনের আউটপুট কনসোলে দেখাবে।


Previous PageNext Page