Chapter 17: JavaScript Error Validation

17-1: দুষ্ট থেকে মুক্ত type validation

তোর আশেপাশেই অনেক ফাজিল পোলাপান আছে, যাদেরকে তুই ডানে যেতে বললে সে বামে যাবে, সোজা কথা বললে বাঁকা কথায় রিপ্লাই দিবে, কারো কাছ থেকে দূরে থাকতে বললে তার সাথেই গিয়ে বেশি গেস্টাগেস্টি করে। যে খাবার খাইতে না করবে, সেটাই বেশি ঘপাঘপ গিলতে থাকে। অর্থাৎ সোজা কাজটাকে উল্টায় ফেলবে সব সময়। এরকম কিছু দুষ্টু প্রকৃতির পোলাপান থাকে। তাদের জন্য সবসময় সতর্ক থাকতে হয়।

প্রোগ্রামিং করার সময়ও আমাদের অনেক সতর্ক থাকতে হয়। অনেক দুষ্ট, বান্দর, পোলাপান সোজা ইনপুট না দিয়ে বাঁকা ইনপুট দেয়। সেজন্য তার ইনপুট প্যারামিটার Validation করে নিতে হয়।

ধর, তোর কাছে যোগ করার একটা ফাংশন আছে—

function sum(num1, num2) {
  const total = num1 + num2;
  return total;
}

const result = sum(5, 7);
console.log(result);

Output: 12;

কেউ যদি একটা প্যারামিটার সংখ্যা না দিয়ে একটা string দিয়ে দেয়, তখন দেখবি, যোগে ভুল হয়ে গেছে।

const result = sum(5, "7");
console.log(result);

Output: "57";

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

function multiply(num1, num2) {
  const mult = num1 * num2;
  return mult;
}

const result = multiply(5, "seven");
console.log(result);

Output: NaN;

তাহলে কিন্তু আউটপুট NaN দেখাবে। এটা কেন ঘটছে? আবার যদি তুই ফাংশনে প্যারামিটার হিসেবে array দিয়ে দিস, তখন কী হবে?

const result = multiply([5, 1], [7]);

আউটপুট কিন্তু NaN আসবে। আবার তুই যদি এভাবে দিস—

const result = multiply(5 + 7);

এই ক্ষেত্রে কিন্তু কমা দিয়ে যদি প্যারামিটারগুলোকে আলাদা না করিস, তাহলে সে এদেরকে একটা প্যারামিটার হিসেবে চিন্তা করবে।

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

function multiply(num1, num2) {
  if (typeof num1 !== "number" || typeof num2 !== "number") {
    return "Please provide a number";
  }
  const mult = num1 * num2;
  return mult;
}

const result = multiply(5, 7);
console.log(result);

এখানে কিন্তু আমরা typeof ব্যবহার করে প্যারামিটারের datatype চেক করে নিচ্ছি validation-এর জন্য। যখন তোর ফাংশন শুধু নাম্বারের জন্য কাজ করবে, তাই typeOf দিয়ে num1-এর টাইপ যদি number ছাড়া অন্য কিছু হয়, অথবা num2 যদি number ছাড়া অন্য কিছু হয়, তাহলে রিটার্ন করে বলে দিচ্ছে প্যারামিটার হিসেবে সংখ্যা পাঠাতে।

একইভাবে কোনো ফাংশনে যদি স্ট্রিং টাইপের ইনপুট প্যারামিটার থাকে। জাস্ট স্ট্রিং দুইটাকে যোগ করবে।

  function fullName(first, second) {
    const full = first + ' ' + second;
    return full;
  }

  const full = fullName('Rahan', 'Sohan');
  console.log(full);

Output: Rahan Sohan

এটার ক্ষেত্রে যদি ইউজার ইনপুটে কোনো একটা string না দিয়ে সংখ্যা দেয়, তখন validation করতে হবে, অর্থাৎ ফাংশনটা শুধু string-এর জন্য কাজ করবে।

  function fullName(first, second) {
    if (typeof first !== 'string') {
      return "First name should be a String";
    } else if (typeof second !== 'string') {
      return "Second name should be a String";
    }
    const full = first + ' ' + second;
    return full;
  }

  const full = fullName('Rahan', 5);
  console.log(full);

Output: Second name should be a String

কোনো ক্ষেত্রে যদি ফাংশনের শুধু অবজেক্টের জন্য validation করতে হয়, তখন কী করতে হবে?

function getPrice(product) {
  const price = product.price;
  return price;
}

const price = getPrice({ name: "chulkani dandi", price: 35, color: "Blue" });
console.log(price);

Output: 35;

এক্ষেত্রে কোড ঠিকঠাক কাজ করবে। কারণ, এখানে অবজেক্টই প্যারামিটার হিসেবে পাঠানো হয়েছে। কিন্তু যদি কেউ সংখ্যা পাঠিয়ে দেয়, তখন কী হবে? এজন্যই validation করতে হবে।

  function getPrice(product) {
    if (typeof product !== 'object') {
      return 'Please provide an object';
    }
    const price = product.price;
    return price;
  }

  const price = getPrice(35);
  console.log(price);

Output: Please provide an object

যদি array নিয়ে কাজ করিস, তখন validation-এর সময় একটু আলাদা সিস্টেম করতে হবে। কারণ, জাভাস্ক্রিপ্টে array একধরনের object এবং typeof দিয়ে array চেক করা যায় না।

function getSecond(numbers) {
  console.log(typeof numbers);
  const second = numbers[1];
  return second;
}

const second = getSecond([1, 25, 69]);
console.log(second);

Output: object;
25;

এই কোড রান করলে দেখবি, আউটপুট object দেখাচ্ছে। কিন্তু array চেক করার জন্য Array.isArray() মেথড আছে, সেটা দিয়ে অ্যারে কি না, চেক করা যায়।

  function getSecond(numbers) {
    if (Array.isArray(numbers) == false) {
      return 'Please provide an array';
    }
    const second = numbers[1];
    return second;
  }

  const second = getSecond(45);
  console.log(second);

Output: Please provide an array

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

Practice:

1. একটা ফাংশন বানা, যা নামের প্রথম অক্ষর রিটার্ন করবে। ইনপুট যদি string না হয়, তখন validation ম্যাসেজ দিবে।
2. একটা ফাংশন লিখ array-এর শেষ উপাদান দিবে। ইনপুট array না হলে ওয়ার্নিং ম্যাসেজ দিবে।
3. rectangle-এর area বের করার getArea ফাংশন বানা, যেখানে length আর width নাম্বার না হলে validation ম্যাসেজ দিবে। এরিয়া বের করার জন্য length আর width গুণ করে দিলেই হবে।

17-2: JS Error দেখে Mirror

জাভাস্ক্রিপ্ট প্রোগ্রামিং করার সময় বিভিন্ন ধরনের ত্রুটি (error) হতে পারে। এরর হলে কনসাল বা টার্মিনালে error ম্যাসেজ দেখা যায়। ডেভেলপার হিসেবে তোকে এরর মেসেজ পড়তে হবে। বুঝার চেষ্টা করতে হবে। প্রথম প্রথম হয়তো বুঝবি না। তবে করতে করতে একসময় বুঝতে পারবি।

সিনট্যাক্স ত্রুটি (Syntax Error)

Syntax Error হচ্ছে, তুই যদি কোনো কোডে ভুল সিনট্যাক্স লিখিস অর্থাৎ একটা ব্র্যাকেট বা সেমিকোলন না দিলে অথবা বানান ভুল লিখলে এই ধরনের ভুল হয়। অনেক সময় এরর হলে ব্রাউজার কোড রান করে না বা কনসোলে Error ম্যাসেজ দিয়ে দেয়।

নিচে ভ্যারিয়েবল x ঘোষণা করতে গিয়ে কোনো মান দেওয়া হয়নি। তাই এইটা একটা সিনট্যাক্স এরর দিবে।

  const x

Uncaught SyntaxError: Missing initializer in const declaration

নিচের কোডে একটা ব্র্যাকেট দিতে ভুলে গেছি। তাই এইটা একটা সিনট্যাক্স এরর দিবে।

  console.log('Hello!'

Uncaught SyntaxError: missing ) after argument list

আবার স্ট্রিং লিখতে গিয়ে যদি কোটেশন না দিস, তাহলে এইটা লেখার ভুল, তাই এইটা সিনট্যাক্স এরর দিবে।

  const bhai = 'Sal Man Khai

Uncaught SyntaxError: Invalid or unexpected token

অবজেক্টের দুইটা প্রোপার্টির মাঝখানে কমা না দিলে বা অ্যারের দুইটা উপাদানের মাঝখানে কমা না দিলে সিনট্যাক্স এরর দিবে।

  const person = {
    name: "Alice"
    age: 25
  };

ভেরিয়েবলের নামের মধ্যে রিজার্ভ কি-ওয়ার্ড ইউজ করলে সিনট্যাক্স এরর দিবে।

  const for = 0;

ফর লুপের ভিতরে চিপার মধ্যে দেখবি let লিখতে L বড় হাতের হয়ে গেছে এইটা ইনকারেক্ট কীওয়ার্ড এবং একটা সিনট্যাক্স এরর দিবে।

  for (Let i = 0; i < 5; i++){
    console.log(i)
  }

অর্থাৎ কোড টাইপ করতে গেলে বা লিখতে গেলে আমরা খুচরা কিছু ভুল করে ফেলি, যেগুলোকে জাভাস্ক্রিপ্ট ঠিকমতো প্রসেস করতে পারে না, অর্থাৎ যেসব লেখার মধ্যেই ভুল, সেগুলোই সিনট্যাক্স এরর।

TypeError

TypeError ঘটে তখনই, যখন তুই এমন কোনো অপারেশন করার চেষ্টা করিস, যেটা সেই টাইপের ডাটার জন্য প্রযোজ্য নয়। ধর, তুই একটা সংখ্যার ওপর কোনো স্ট্রিং অপারেশন করতে চাইছিস। যেমন, toUpperCase() মেথডটা স্ট্রিংয়ের জন্য, কিন্তু তুই এটা সংখ্যার ওপর ব্যবহার করলে TypeError দিবে।

  const num = 5;
  num.toUpperCase();

Uncaught TypeError: num.toUpperCase is not a function

নিচের user ভেরিয়েবল কোনো অবজেক্ট না। এইটা একটা স্ট্রিং টাইপ ভেরিয়েবল। এখন স্ট্রিং টাইপ ইউজ না করে অবজেক্টের মতো করে ইউজ করতে গেলে এক টাইপের মানকে অন্য টাইপের মানের মতো করে ইউজ করার অপচেষ্টার কারণে টাইপ এরর দিবে।

  const user = 'sagor';
  console.log(user.address.postOffice)

Uncaught TypeError: Cannot read properties of undefined (reading 'postOffice')

নিচে getBonus একটা ভেরিয়েবল এবং সংখ্যা টাইপের ভেরিয়েবল। এখন এইটাকে যদি কেউ ফাংশনের মতো করে ইউজ করতে চায়, তাহলে তো হবে না। কারণ, number-কে ফাংশনের মতো করে ইউজ করা যাবে না। করতে গেলে সে টাইপ error দিবে।

const getBonus = 23;
getBonus();

অর্থাৎ যে টাইপের মান, তাকে সেই টাইপের মতো করে ইউজ না করে অন্য টাইপের মতো ইউজ করতে গেলে Type Error দিবে।

Reference Error

Reference Error তখন ঘটে, যখন তুই এমন কোনো ভ্যারিয়েবল ব্যবহার করিস, যেটা ডিক্লেয়ার করা হয়নি। যেমন, b ভ্যারিয়েবলটি ডিক্লেয়ার না করে ইউজ করতে গেলে রেফারেন্স এরর দিবে। রেফারেন্স এরর মানে এই নামে কিছু খুঁজে পাচ্ছি না।

  const a = 10;
  console.log(b);

ReferenceError: b is not defined

লজিক্যাল ত্রুটি (Logical Error)

লজিক্যাল ত্রুটি হচ্ছে এমন একটি ত্রুটি, যা প্রোগ্রামকে ভুল আউটপুট দেয়, কিন্তু প্রোগ্রাম চলতে থাকে। এই ধরনের ত্রুটি কোডে কোন ভুল কাজ করছে, তা বোঝা কঠিন। কারণ, এগুলো সাধারণত এরর দেয় না; বরং ভুল আউটপুট দেয়।

যেমন, নিচের কোডে যোগ করার কথা। সেটার জন্য প্লাস চিহ্ন (+) ইউজ না করে কেউ ভুল করে মাইনাস চিহ্ন দিয়ে ফেলছে। এখন কোড এরর দিবে না। আউটপুট ভুল দিবে।

const num1 = 10;
const num2 = 5;
const sum = num1 - num2;
console.log("Sum is: " + sum);

এখানে ভুল লজিক প্রয়োগ করা হয়েছে, যা লজিক্যাল ত্রুটি হিসেবে কাজ করবে।

RangeError

RangeError ঘটে তখন, যখন কোনো সংখ্যা তার valid range-এর বাইরে যায়। যেমন, .toFixed() মেথড 0 থেকে 100 পর্যন্ত value নেয়, কিন্তু তুই 101 দিলে সে এইটা ইউজ করতে পারবে না, তখন RangeError দিবে।

  const num = 1;
  num.toFixed(101);

RangeError: toFixed() digits argument must be between 0 and 100

Practice:

1. যদি কোন লাইন শেষে সেমিকোলন না দিস তাহলে কি এরর দিবে?
2. Reference Error কখন দিবে?
3. Syntax Error আর Type Error এর ডিফারেন্স কি?