জাভাস্ক্রিপ্ট Debugging

Debugging কি?

JavaScript program-এ কোনো ভুলের কারণে code প্রত্যাশিতভাবে কাজ না করলে সেই ভুল খুঁজে বের করে ঠিক করার প্রক্রিয়াকে Debugging বলা হয়।

সহজভাবে বললে, program কীভাবে চলছে তা পর্যবেক্ষণ করে কোথায় সমস্যা হচ্ছে তা শনাক্ত করা এবং প্রয়োজনীয় পরিবর্তন করে program-কে সঠিকভাবে চালানোই Debugging-এর মূল উদ্দেশ্য।

Browser-এর Developer Tools ব্যবহার করে JavaScript code debug করা যায়।

• Code-এর সমস্যা শনাক্ত করা যায়।
• Program-এর execution ধাপে ধাপে পর্যবেক্ষণ করা যায়।

let number = 10;
let result = number * 2;

console.log(result);

কোড এডিটর

console.log() দিয়ে Debugging

JavaScript debugging-এর সবচেয়ে সহজ পদ্ধতিগুলোর একটি হলো console.log() ব্যবহার করা। কোনো variable বা expression-এর বর্তমান value console-এ দেখার জন্য এটি ব্যবহার করা যায়।

Code-এর কোন অংশ পর্যন্ত execution হয়েছে এবং কোনো variable-এ কী value রয়েছে তা বোঝার জন্য console.log() বিশেষভাবে উপকারী।

নিচের উদাহরণে number এবং result-এর value Console-এ দেখা হচ্ছে।

• Variable-এর বর্তমান value দেখা যায়।
• Code-এর বিভিন্ন ধাপ পরীক্ষা করা যায়।

let number = 20;
console.log("number =", number);

let result = number + 10;
console.log("result =", result);

কোড এডিটর

Error কী?

JavaScript code-এ এমন কোনো সমস্যা থাকলে যার কারণে program সঠিকভাবে execute করতে পারে না বা প্রত্যাশিত result পাওয়া যায় না, তাকে সাধারণভাবে Error বলা হয়।

Syntax ভুল, Reference ভুল বা program-এর logic-এর ভুল—বিভিন্ন কারণে সমস্যা তৈরি হতে পারে। Error message এবং Console-এর তথ্য দেখে সমস্যার কারণ বোঝা সহজ হয়।

নিচের code-এ undefined variable ব্যবহার করার কারণে ReferenceError তৈরি হবে।

• Error-এর ধরন বোঝা গুরুত্বপূর্ণ।
• Console-এর error message দেখে সমস্যার জায়গা শনাক্ত করা যায়।

console.log(userName);

কোড এডিটর

Syntax Error ও Debugging

JavaScript-এর syntax বা লেখার নিয়ম সঠিক না হলে SyntaxError হতে পারে। যেমন bracket, quote বা statement-এর structure ভুল হলে browser code parse করতে সমস্যা করতে পারে।

এই ধরনের সমস্যা সমাধানের জন্য Console-এ দেখানো error message এবং line number লক্ষ্য করা যায়।

নিচের উদাহরণে closing parenthesis না থাকায় syntax সমস্যা তৈরি হবে।

• Bracket ও quote ঠিক আছে কি না পরীক্ষা করুন।
• Error message-এ উল্লেখ করা line লক্ষ্য করুন।

function add(a, b {
  return a + b;
}

কোড এডিটর

ReferenceError Debugging

যে variable বা function-এর reference পাওয়া যাচ্ছে না, সেটি ব্যবহার করলে ReferenceError হতে পারে। সাধারণত variable declaration-এর আগে বা ভুল নাম ব্যবহার করলে এই ধরনের সমস্যা দেখা যায়।

Variable-এর নাম declaration-এর সঙ্গে মিলিয়ে দেখা এবং variable কোথায় তৈরি হয়েছে তা পরীক্ষা করা ReferenceError খুঁজে বের করার সহজ উপায়।

নিচের উদাহরণে total নামের variable ব্যবহার করা হলেও সেটি declare করা হয়নি।

• Variable-এর spelling পরীক্ষা করুন।
• Variable কোথায় declare করা হয়েছে তা পরীক্ষা করুন।

let price = 500;
console.log(total);

কোড এডিটর

Debugger Statement

JavaScript-এর debugger statement ব্যবহার করে browser-এর Developer Tools-এর debugger-এ program-এর execution থামানো যায়। এটি code-এর নির্দিষ্ট জায়গা থেকে execution পর্যবেক্ষণ করতে সাহায্য করে।

Developer Tools খোলা থাকলে debugger statement execution-কে সেই জায়গায় pause করতে পারে। এরপর variable এবং execution flow পরীক্ষা করা যায়।

নিচের উদাহরণে debugger statement-এর কারণে execution নির্দিষ্ট জায়গায় থামতে পারে।

• Code-এর নির্দিষ্ট জায়গায় execution pause করা যায়।
• Pause অবস্থায় variable-এর value পরীক্ষা করা যায়।

let price = 1000;
let quantity = 2;

debugger;

let total = price * quantity;
console.log(total);

কোড এডিটর

Breakpoint দিয়ে Debugging

Browser Developer Tools-এর Sources বা Debugger panel-এ breakpoint সেট করা যায়। Breakpoint হলো code-এর এমন একটি জায়গা যেখানে execution সাময়িকভাবে থেমে যায়।

Breakpoint ব্যবহার করে code line-by-line পর্যবেক্ষণ করা এবং variable-এর value পরীক্ষা করা যায়।

নিচের function-এর execution পর্যবেক্ষণ করতে debugger statement ব্যবহার করে breakpoint-এর ধারণা বোঝা যায়।

• Execution flow ধাপে ধাপে দেখা যায়।
• প্রতিটি ধাপে variable-এর value পরীক্ষা করা যায়।

function calculateTotal(price, quantity) {
  let total = price * quantity;
  debugger;
  return total;
}

console.log(calculateTotal(500, 3));

কোড এডিটর

Step-by-Step Debugging

Debugger-এ code pause করার পর Step Over, Step Into এবং Step Out-এর মতো control ব্যবহার করে program-এর execution পর্যবেক্ষণ করা যায়। এগুলো function call এবং পরবর্তী statement কীভাবে execute হচ্ছে তা বুঝতে সাহায্য করে।

বিশেষ করে জটিল function বা একাধিক function call থাকা code-এর ক্ষেত্রে ধাপে ধাপে execution দেখা debugging সহজ করতে পারে।

নিচের উদাহরণে function call-এর execution পর্যবেক্ষণ করা যায়।

• Function-এর ভিতরের execution অনুসরণ করা যায়।
• কোন statement-এর পরে result পরিবর্তন হচ্ছে তা দেখা যায়।

function multiply(a, b) {
  return a * b;
}

function calculate() {
  const result = multiply(10, 5);
  return result;
}

debugger;
console.log(calculate());

কোড এডিটর

Logic Error Debugging

সব debugging problem syntax বা runtime error-এর কারণে হয় না। অনেক সময় code কোনো error না দেখিয়েও ভুল result দিতে পারে। এই ধরনের সমস্যাকে সাধারণভাবে Logic Error বলা হয়।

Logic Error খুঁজে বের করতে expected result এবং actual result তুলনা করা, variable-এর value পরীক্ষা করা এবং code-এর প্রতিটি ধাপ অনুসরণ করা প্রয়োজন।

নিচের উদাহরণে total হিসাবের formula ভুল হওয়ায় result প্রত্যাশিত হবে না।

• Expected এবং actual result তুলনা করুন।
• Variable-এর value ধাপে ধাপে পরীক্ষা করুন।

let price = 500;
let quantity = 2;

let total = price + quantity;
console.log(total);

কোড এডিটর

Debugging-এর ভালো পদ্ধতি

Effective debugging-এর জন্য প্রথমে problem-টি নির্দিষ্টভাবে শনাক্ত করা, তারপর error message বা result পরীক্ষা করা এবং code-এর ছোট ছোট অংশ যাচাই করা উপকারী। একসঙ্গে অনেক পরিবর্তন না করে ধাপে ধাপে পরিবর্তন করলে সমস্যার কারণ বোঝা সহজ হয়।

Console, debugger statement, breakpoint এবং browser Developer Tools একসঙ্গে ব্যবহার করলে JavaScript code-এর execution সম্পর্কে পরিষ্কার ধারণা পাওয়া যায়।

নিচের উদাহরণে console.log() ব্যবহার করে প্রতিটি ধাপে variable-এর value পরীক্ষা করা হয়েছে।

• Error message মনোযোগ দিয়ে পড়ুন।
• Console ও breakpoint ব্যবহার করে execution পরীক্ষা করুন।

function calculateTotal(price, quantity) {
  console.log("price =", price);
  console.log("quantity =", quantity);

  const total = price * quantity;
  console.log("total =", total);

  return total;
}

console.log(calculateTotal(500, 2));

কোড এডিটর

Method Overriding কী?

Inheritance ব্যবহার করার সময় child class তার parent class-এর কোনো method নিজের প্রয়োজন অনুযায়ী নতুনভাবে define করলে তাকে Method Overriding বলা হয়।

Polymorphism বোঝার জন্য method overriding একটি গুরুত্বপূর্ণ ধারণা। Parent class-এ একটি common method রাখা যায় এবং child class সেই method-এর আলাদা implementation দিতে পারে।

নিচের উদাহরণে Animal class-এর sound() method Dog class-এ override করা হয়েছে।

• Child class parent class-এর method override করতে পারে।
• একই method call করলেও child object অনুযায়ী আলাদা result পাওয়া যায়।

class Animal {
  sound() {
    return "Animal sound";
  }
}

class Dog extends Animal {
  sound() {
    return "Woof!";
  }
}

const dog = new Dog();
console.log(dog.sound());

কোড এডিটর

একাধিক Child Class-এ Polymorphism

একটি parent class-এর common method বিভিন্ন child class-এ আলাদাভাবে implement করা যায়। ফলে একই method call বিভিন্ন object-এর জন্য ভিন্ন result দিতে পারে।

এভাবে application-এ common structure বজায় রেখেও object-এর নিজস্ব behavior তৈরি করা যায়।

নিচের উদাহরণে Dog, Cat এবং Cow একই sound() method ব্যবহার করলেও তাদের output আলাদা।

• সব child class একই method name ব্যবহার করতে পারে।
• প্রতিটি child class নিজের প্রয়োজন অনুযায়ী behavior নির্ধারণ করতে পারে।

class Animal {
  sound() {
    return "Animal sound";
  }
}

class Dog extends Animal {
  sound() {
    return "Woof!";
  }
}

class Cat extends Animal {
  sound() {
    return "Meow!";
  }
}

class Cow extends Animal {
  sound() {
    return "Moo!";
  }
}

console.log(new Dog().sound());
console.log(new Cat().sound());
console.log(new Cow().sound());

কোড এডিটর

Common Interface-এর ধারণা

JavaScript-এ Java বা C#-এর মতো strict interface keyword নেই। তবে একটি common method structure অনুসরণ করে বিভিন্ন class-কে একই ধরনের interface-এর মতো ব্যবহার করা যায়।

এর ফলে calling code জানে কোন method ব্যবহার করতে হবে, কিন্তু প্রতিটি class সেই method কীভাবে কাজ করবে তা নিজের মতো নির্ধারণ করতে পারে।

নিচের উদাহরণে Payment-এর বিভিন্ন class pay() method প্রকাশ করছে।

• Caller একই method name ব্যবহার করতে পারে।
• প্রতিটি implementation নিজের কাজ অনুযায়ী result দিতে পারে।

class CardPayment {
  pay(amount) {
    return "Paid " + amount + " by card";
  }
}

class CashPayment {
  pay(amount) {
    return "Paid " + amount + " by cash";
  }
}

console.log(new CardPayment().pay(1000));
console.log(new CashPayment().pay(1000));

কোড এডিটর

Polymorphism ও Inheritance

Inheritance parent class-এর property ও method child class-এ reuse করার সুযোগ দেয়। Polymorphism সেই common method-কে child class অনুযায়ী ভিন্ন behavior দিতে সাহায্য করে।

অর্থাৎ inheritance structure তৈরি করতে সাহায্য করে এবং overriding-এর মাধ্যমে polymorphic behavior প্রকাশ করা যায়।

নিচের উদাহরণে Shape parent class এবং Rectangle ও Circle child class।

• Child class parent class থেকে structure পেতে পারে।
• Child class common method নিজের মতো override করতে পারে।

class Shape {
  area() {
    return 0;
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius * this.radius;
  }
}

console.log(new Rectangle(10, 5).area());
console.log(new Circle(5).area());

কোড এডিটর

একই Function দিয়ে বিভিন্ন Object

একটি function এমনভাবে লেখা যায় যাতে সেটি নির্দিষ্ট একটি class-এর উপর নির্ভর না করে একটি common method ব্যবহার করে। তখন বিভিন্ন object একই function-এর মাধ্যমে নিজের behavior প্রকাশ করতে পারে।

এটি code reuse এবং flexible design তৈরিতে সাহায্য করে।

নিচের উদাহরণে printSound() function যেকোনো object-এর sound() method ব্যবহার করছে।

• Function নির্দিষ্ট class-এর পরিবর্তে common method-এর উপর নির্ভর করতে পারে।
• নতুন class যোগ করলেও একই function ব্যবহার করা সম্ভব।

class Dog {
  sound() {
    return "Woof!";
  }
}

class Cat {
  sound() {
    return "Meow!";
  }
}

function printSound(animal) {
  console.log(animal.sound());
}

printSound(new Dog());
printSound(new Cat());

কোড এডিটর

Polymorphism ও super

Child class method override করার পরেও parent class-এর একই method-এর functionality প্রয়োজন হলে super ব্যবহার করা যায়। এতে parent behavior-এর সঙ্গে child-এর অতিরিক্ত behavior যোগ করা সম্ভব।

এটি বিশেষভাবে useful যখন child class পুরোপুরি নতুন behavior না দিয়ে parent behavior-এর উপর ভিত্তি করে কাজ বাড়াতে চায়।

নিচের উদাহরণে Dog class parent sound() method-এর result-এর সঙ্গে নিজের text যোগ করছে।

• super দিয়ে parent method call করা যায়।
• Override করা method-এ parent behavior reuse করা সম্ভব।

class Animal {
  sound() {
    return "Animal sound";
  }
}

class Dog extends Animal {
  sound() {
    return super.sound() + " and Dog barks";
  }
}

const dog = new Dog();
console.log(dog.sound());

কোড এডিটর

Polymorphism-এর বাস্তব ব্যবহার

বাস্তব application-এ একই কাজের বিভিন্ন implementation থাকলে Polymorphism ব্যবহার করা যেতে পারে। যেমন payment, notification, storage বা report system-এ একই method name-এর মাধ্যমে বিভিন্ন service ব্যবহার করা যায়।

ফলে মূল application logic-কে প্রতিটি implementation-এর internal detail জানার প্রয়োজন কমে যায়।

নিচের উদাহরণে Email ও SMS notification একই send() method প্রকাশ করছে।

• একই service type-এর বিভিন্ন implementation রাখা যায়।
• Application logic সহজে বিভিন্ন implementation ব্যবহার করতে পারে।

class EmailNotification {
  send(message) {
    return "Email: " + message;
  }
}

class SMSNotification {
  send(message) {
    return "SMS: " + message;
  }
}

function notify(service, message) {
  console.log(service.send(message));
}

notify(new EmailNotification(), "Hello");
notify(new SMSNotification(), "Hello");

কোড এডিটর

Polymorphism-এর সুবিধা

Polymorphism বড় application-এ flexible এবং reusable code structure তৈরি করতে সাহায্য করতে পারে। একই interface বা method ব্যবহার করে বিভিন্ন implementation পরিচালনা করা সম্ভব হয়।

নতুন implementation যোগ করার সময় existing calling code অপরিবর্তিত রাখা সম্ভব হলে application maintain করা সহজ হতে পারে।

নিচের উদাহরণে বিভিন্ন payment object একই pay() method-এর মাধ্যমে ব্যবহার করা হচ্ছে।

• Common method-এর মাধ্যমে বিভিন্ন object পরিচালনা করা যায়।
• নতুন implementation যোগ করার সুযোগ তৈরি হয়।

class CardPayment {
  pay(amount) {
    return "Card payment: " + amount;
  }
}

class MobilePayment {
  pay(amount) {
    return "Mobile payment: " + amount;
  }
}

function makePayment(payment, amount) {
  console.log(payment.pay(amount));
}

makePayment(new CardPayment(), 2000);
makePayment(new MobilePayment(), 2000);

কোড এডিটর

Polymorphism, Overriding ও বাস্তব ধারণা

JavaScript-এ Polymorphism বুঝতে হলে common method, inheritance এবং method overriding-এর সম্পর্ক বোঝা গুরুত্বপূর্ণ। একই method name বিভিন্ন object-এ ভিন্ন behavior প্রকাশ করতে পারে।

সব Polymorphism inheritance-এর মাধ্যমে হতে হবে এমন নয়। JavaScript-এর flexible object model-এর কারণে common method থাকা আলাদা object-ও একই function-এর সঙ্গে কাজ করতে পারে।

নিচের উদাহরণে Dog ও Cat একই sound() method প্রকাশ করছে এবং printSound() function উভয়ের সঙ্গেই কাজ করছে।

• Method overriding Polymorphism-এর একটি প্রচলিত উদাহরণ।
• Common method structure অনুসরণ করা আলাদা object-ও একই function-এর সঙ্গে ব্যবহার করা যায়।

class Dog {
  sound() {
    return "Woof!";
  }
}

class Cat {
  sound() {
    return "Meow!";
  }
}

function printSound(animal) {
  console.log(animal.sound());
}

printSound(new Dog());
printSound(new Cat());

কোড এডিটর