মান, টাইপ আর coercion-এর ফাঁদ

১ · টাইপ থাকে মানের, variable-এর নয়

মডিউল ১-এ দেখেছেন engine কীভাবে কোড চালায়। এবার ভাষার একদম ভেতরে ঢুকি। প্রোগ্রাম যা নিয়ে কাজ করে, তা হলো মান (value) — 42, "ঢাকা", true. প্রতিটি মানের একটি টাইপ আছে: এটি সংখ্যা, এটি লেখা, এটি হ্যাঁ/না। টাইপ ঠিক করে মানটি দিয়ে কী কী করা যায় — সংখ্যা গুণ করা যায়, লেখাকে বড় হাতের অক্ষরে বদলানো যায়।

C বা Java-তে variable ঘোষণার সময়ই টাইপ বলে দিতে হয়: int age = 20;. এরপর age-এ কখনো লেখা রাখা যাবে না — compiler আগেই আটকে দেবে। একে বলে static typing. JavaScript-এ নিয়ম আলাদা:

let box = 42;          // এখন box-এ একটি number
box = "বিয়াল্লিশ";      // এখন string — কোনো error নেই
box = true;            // এখন boolean
box = null;            // এখন null

এর একটি দ্বিতীয় দিক আছে, যা এই পর্বের মূল বিষয়। কোনো কাজে যদি “ভুল” টাইপের মান আসে — যেমন লেখা থেকে সংখ্যা বিয়োগ — অনেক ভাষা সাথে সাথে error দেয়। Python-এ "5" - 3 লিখলে TypeError. JavaScript সাধারণত error দেয় না; সে চুপচাপ মানটিকে অন্য টাইপে বদলে নিয়ে কাজ চালিয়ে যায়। এই স্বয়ংক্রিয় বদলকে বলে type coercion.

২ · আটটি টাইপ — সাতটি primitive আর object

ECMAScript ঠিক ৮টি টাইপ নির্ধারণ করেছে। প্রথম সাতটিকে বলে primitive — একক, ভাঙা যায় না এমন মান। অষ্টমটি object — অনেক মানের একটি সংগ্রহ। Array, function, তারিখ — সবই আসলে object.

কয়েকটি বিষয় খেয়াল করুন। প্রথমত, JavaScript-এ int আর float আলাদা নয় — 5 আর 5.0 একই number. সব number আসলে ৬৪-বিটের floating-point, তাই 0.1 + 0.2 হয় 0.30000000000000004 (কেন — পর্ব ১০-এ)। দ্বিতীয়ত, NaN (“Not a Number”) নিজেই একটি number — “সংখ্যা হওয়ার কথা ছিল, কিন্তু হিসাব ব্যর্থ” বোঝায়। তৃতীয়ত, “খালি” বোঝানোর জন্য JavaScript-এ একটি নয়, দুটি মান আছে।

undefined বনাম null — অনুপস্থিত বনাম ইচ্ছাকৃত খালি

undefined সাধারণত engine নিজে বসায়: মান না দিয়ে ঘোষিত variable, না-পাঠানো argument, object-এ নেই এমন property, কিছু return না করা function — সবই undefined. অর্থাৎ “এখানে কিছু থাকার কথা, কিন্তু কেউ কিছু রাখেনি”।

null engine প্রায় কখনো নিজে বসায় না — প্রোগ্রামার লেখেন। এর অর্থ “আমি জেনেশুনে বলছি, এখানে কোনো মান নেই”। বিয়ের দাওয়াতের তালিকার কথা ভাবুন: কারো নামের পাশে ঘর ফাঁকা থাকলে বোঝা যায় না তিনি আসবেন কি না — উত্তরই আসেনি (undefined). কিন্তু “আসবেন না” লেখা থাকলে সেটি একটি পরিষ্কার উত্তর (null).

[
  { "name": "Rafi", "phone": "01712345678" },
  { "name": "Mim",  "phone": null },
  { "name": "Tanim" }
]

৩ · typeof — টাইপ জিজ্ঞেস করা, আর তার খামখেয়ালি

কোনো মানের টাইপ জানতে আছে typeof অপারেটর। এটি সবসময় একটি string ফেরত দেয়: typeof 42 → "number", typeof "hi" → "string". কিন্তু টাইপ ৮টি হলেও typeof-এর উত্তরের তালিকা হুবহু সেই ৮টি নয়। নিচের ডায়াগ্রামে দেখুন typeof কীভাবে সিদ্ধান্ত নেয়:

typeof null          // "object"  ← ভুল, কিন্তু স্থায়ী
// null একটি primitive, তবু উত্তর "object"

typeof "ঢাকা"        // "string"
typeof 42            // "number"
typeof 10n           // "bigint"
typeof false         // "boolean"
typeof undefined     // "undefined"
typeof Symbol()      // "symbol"

typeof function(){}  // "function"
typeof (() => 1)     // "function"
typeof class {}      // "function"
// function আলাদা টাইপ নয় — ডাকা যায় এমন object

typeof {}            // "object"
typeof [1, 2]        // "object"  ← "array" নয়!
typeof new Date(0)   // "object"
typeof new Map()     // "object"

typeof NaN           // "number"
typeof notDeclared   // "undefined" — ReferenceError নয়
// তাই নিশ্চিত যাচাইয়ে আলাদা টুল লাগে (নিচের টেবিল)

নিশ্চিতভাবে টাইপ যাচাই — কোন কাজে কোন টুল

৪ · Primitive বনাম object — মান বনাম reference

Primitive আর object-এর পার্থক্য শুধু তালিকার নয় — আচরণেও। দুটি বড় পার্থক্য আছে।

let a = 5;
let b = a;       // মান 5 কপি হলো
b = b + 1;       // a এখনো 5, b হলো 6

let s = "abc";
s[0] = "X";      // কিছুই হয় না — string বদলানো যায় না
// s এখনো "abc"

const p = { score: 5 };
const q = p;     // একই object-এর ঠিকানা
q.score = 6;     // p.score-ও এখন 6

একটি প্রশ্ন জাগতে পারে: primitive যদি object না হয়, তাহলে "abc".length বা "abc".toUpperCase() কাজ করে কীভাবে? Property তো object-এর থাকে! উত্তর: engine মুহূর্তের জন্য string-টিকে একটি String wrapper object-এ মুড়ে নেয়, method চালায়, তারপর wrapper ফেলে দেয়। একে বলে autoboxing. এজন্য primitive-কেও object-এর মতো ব্যবহার করা যায়, অথচ সেগুলো হালকা আর অপরিবর্তনীয় থাকে। নিজে কখনো new String("a") লিখবেন না — এটি সত্যিকারের object বানায়, আর new String("a") === "a" হয় false.

৫ · নিজে হাতে রূপান্তর — Number, String, Boolean, parseInt

Coercion-এর নিয়ম শেখার আগে দেখি সবচেয়ে নিরাপদ পথ: নিজে স্পষ্ট করে রূপান্তর (explicit conversion). এতে কোড পড়েই বোঝা যায় কী হচ্ছে।

⚠️ চিহ্নগুলোতে মনোযোগ দিন। খালি string থেকে Number দেয় 0, NaN নয় — তাই form-এর খালি ঘর চুপচাপ শূন্য হয়ে যেতে পারে। "0" লেখাটি boolean-এ true, কারণ খালি নয় এমন সব string true. খালি array-ও true, কারণ সব object true.

parseInt আর parseFloat — শুরু থেকে যতটুকু পড়া যায়

Number() কড়া: পুরো string সংখ্যা না হলে NaN. parseInt আর parseFloat নমনীয়: শুরু থেকে যতক্ষণ সংখ্যা পায় পড়ে, বাকিটা ফেলে দেয়। parseInt("42px", 10) → 42, parseFloat("3.5kg") → 3.5. CSS-এর "16px" থেকে সংখ্যা বের করতে এটি কাজের।

parseInt-এর দ্বিতীয় argument হলো radix — কোন ভিত্তির সংখ্যা: parseInt("101", 2) → 5 (binary), parseInt("ff", 16) → 255. Radix না দিলে "0x" দিয়ে শুরু হওয়া string-কে hexadecimal ধরে। পুরোনো engine-এ "08"-কে octal ধরার সমস্যাও ছিল, যা ES5 বন্ধ করে। তাই নিয়ম: সবসময় radix দিন, সাধারণত 10.

আরেকটি ছোট পথ হলো unary plus: +"42" → 42. এটি প্রায় হুবহু Number()-এর মতো কাজ করে, শুধু ছোট (ব্যতিক্রম BigInt: Number(10n) দেয় 10, কিন্তু +10n দেয় TypeError). তবে নতুনদের জন্য Number(x) পড়তে বেশি পরিষ্কার।

এবার একটি বাস্তব বাগ দেখুন। একটি অনলাইন দোকানের form-এ দাম আর ডেলিভারি চার্জ লেখা থাকে। HTML input-এর value সবসময় string — এমনকি type="number" হলেও (পর্ব ৩৯)।

// form থেকে আসা মান — input.value সবসময় string
const priceInput = "500";
const deliveryInput = "50";

console.log("ভুল মোট:", priceInput + deliveryInput);
console.log("ঠিক মোট:", Number(priceInput) + Number(deliveryInput));

// রূপান্তরের নিয়ম
console.log(Number(""), Number(" 42 "), Number("42px"));
console.log(parseInt("42px", 10), parseFloat("3.5kg"));
console.log(Number(null), Number(undefined), Number(true));
console.log(String(null), String([1, 2]), String({}));
console.log(Boolean(""), Boolean("0"), Boolean([]), Boolean(0));

// ফোন নম্বর: number বানালে শুরুর 0 হারায়
const phone = "01712345678";
console.log(parseInt(phone, 10), Number(phone));
console.log(typeof phone, phone.length);

৬ · নিজে থেকে রূপান্তর — coercion-এর চার নিয়ম

আপনি রূপান্তর না লিখলেও অপারেটর যখন ভিন্ন টাইপ চায়, engine নিজে রূপান্তর করে। ECMAScript-এ এর জন্য কয়েকটি ভেতরের “abstract operation” আছে। সরল করে চারটি জানলেই বেশিরভাগ ক্ষেত্র বোঝা যায়:

ToBoolean-এর ওই ৮টি মানকে বলে falsy, বাকি সবকে truthy — এর ব্যবহার আর ফাঁদ পর্ব ০৮-এ বিস্তারিত দেখবেন।

+ অপারেটর — দুই কাজের এক চিহ্ন

বেশিরভাগ চমকের কেন্দ্রে আছে +. অন্য গাণিতিক অপারেটরের একটাই কাজ — সংখ্যার হিসাব। কিন্তু + দুটি কাজ করে: সংখ্যা যোগ আর string জোড়া লাগানো (concatenation). কোনটা করবে, তা ঠিক হয় এক সরল নিয়মে: দুই পাশকে primitive বানানোর পর যেকোনো এক পাশ string হলে, string জেতে। ধাপে ধাপে দেখুন:

বাম থেকে ডানে হিসাব হয় বলে ক্রমও গুরুত্বপূর্ণ: 1 + 2 + "3" → আগে 1 + 2 = 3, তারপর 3 + "3" → "33". কিন্তু "1" + 2 + 3 → "12", তারপর "123". Template literal (`মোট: ${a + b}`) ব্যবহার করলে কোন অংশ লেখা আর কোন অংশ হিসাব, তা পরিষ্কার থাকে (পর্ব ০৯)।

৭ · == বনাম === — ঢিলেঢালা আর কড়া সমতা

JavaScript-এ সমতা যাচাইয়ের দুটি অপারেটর। strict equality === কখনো রূপান্তর করে না: টাইপ আলাদা হলেই false. loose equality == টাইপ আলাদা হলে আগে coercion করে, তারপর তুলনা করে। ==-এর নিয়ম (সরল রূপে):

1. টাইপ একই হলে → ===-এর মতোই তুলনা।
2. null আর undefined একে অপরের সমান; অন্য কোনো কিছুর সমান নয় — এখানে কোনো রূপান্তর হয় না।
3. number বনাম string → string-কে number বানাও।
4. কোনো পাশে boolean থাকলে → আগে সেটিকে number বানাও (true → 1, false → 0).
5. object বনাম primitive → object-কে ToPrimitive করো, তারপর আবার শুরু থেকে।

এই নিয়মগুলো থেকে আসে কুখ্যাত ফলাফল: "" == 0 true, "0" == 0 true, অথচ "" == "0" false (দুটোই string, তাই সরাসরি তুলনা)। অর্থাৎ == transitive-ও নয়। [] == false true, আবার [] নিজে truthy. এমনকি [] == ![]-ও true!

ব্যতিক্রমটি কেন? নিয়ম ২ অনুযায়ী x == null সত্য হয় শুধু যখন x null বা undefined — আর কোনো মানে নয় (0, "", false নয়)। তাই “মানটি আছে কি না” দেখতে x === null || x === undefined-এর ছোট ও নির্ভরযোগ্য রূপ এটি। অনেক দল ESLint-এর eqeqeq নিয়ম চালু করে == নিষেধ করে, শুধু এই একটি ব্যবহারের অনুমতি রেখে (পর্ব ৪৬)।

NaN — নিজের সমানও নয়

NaN একমাত্র মান যা নিজের সমান নয়: NaN === NaN → false. এটি JavaScript-এর খামখেয়ালি নয় — floating-point-এর আন্তর্জাতিক মানদণ্ড IEEE 754 এভাবেই বলে, C, Java, Python-এও একই। যুক্তি: দুটি ব্যর্থ হিসাবের ফল “একই” বলা যায় না। তাই NaN খুঁজতে === NaN কাজ করে না।

• isNaN(x) (পুরোনো, global) আগে x-কে number বানায়, তারপর দেখে। তাই isNaN("abc") → true, যদিও "abc" NaN নয়, একটি string.
• Number.isNaN(x) (ES2015) কোনো রূপান্তর করে না: শুধু সত্যিকারের NaN-এর জন্য true. Number.isNaN("abc") → false. এটিই ব্যবহার করুন।

Object.is — তৃতীয় সমতা

ES2015 আরেকটি তুলনা যোগ করে: Object.is(a, b). এটি প্রায় ===-এর মতো, শুধু দুটি কোণার ক্ষেত্রে আলাদা: Object.is(NaN, NaN) → true, আর Object.is(0, -0) → false (যেখানে 0 === -0 true). প্রতিদিনের কোডে কমই লাগে, কিন্তু React-এর মতো লাইব্রেরি state বদলেছে কি না দেখতে এটি ব্যবহার করে।

৮ · বিখ্যাত ধাঁধা — নিয়ম দিয়ে খুলে দেখা

ইন্টারনেটে “JavaScript পাগল ভাষা” প্রমাণে কিছু উদাহরণ ঘুরে বেড়ায়। এখন আপনার কাছে নিয়ম আছে — প্রতিটি খুলে দেখা যায়।

• [] + [] → "": দুটি array ToPrimitive হয়ে "" আর ""; string জেতে, জোড়া লেগে খালি string.
• [] + {} → "[object Object]": "" + "[object Object]".
• true + true → 2: কোনো পাশে string নেই, তাই দুটোই ToNumber → 1 + 1.
• 0.1 + 0.2 → 0.30000000000000004: এটি coercion নয়, binary floating-point-এর সীমা (পর্ব ১০)।
• {} + [] → প্রেক্ষাপটের ওপর নির্ভর করে! নিচে দেখুন।

সবচেয়ে মজারটি হলো ("b" + "a" + +"a" + "a").toLowerCase(), যা দেয় "banana". কীভাবে?

{} + [] — console-এ এক, কোডে আরেক

লাইনের শুরুতে { থাকলে parser সেটিকে object নয়, একটি খালি block (যেমন if-এর { }) হিসেবে পড়ে। তখন বাকি থাকে +[] — unary plus, ফল 0. কিন্তু {} + [] যদি কোনো expression-এর ভেতরে থাকে (const x = {} + []; বা বন্ধনীতে), {} হয় object, আর ফল "[object Object]".

এখানে টুলের পার্থক্যও আছে। Chrome/Edge DevTools-এর console আর Node.js-এর REPL — দুটিই আজকাল { দিয়ে শুরু হওয়া ইনপুটকে আগে বন্ধনীতে মুড়ে expression হিসেবে চেষ্টা করে, তাই সেখানে {} + [] লিখলে দেখায় '[object Object]'. কিন্তু eval("{} + []") বা script-এর একটি statement হিসেবে এটি block-এর নিয়মে চলে, ফল 0. ২০১২ সালের বিখ্যাত “Wat” বক্তৃতায় যে 0 দেখানো হয়েছিল, তা এই statement-প্রেক্ষাপট থেকেই। নিচে চালিয়ে মিলিয়ে নিন:

const fmt = v => typeof v === "string" ? `"${v}"` : String(v);
const show = (code, v) => console.log(code.padEnd(20), "→", fmt(v));

show('"5" + 3', "5" + 3);
show('"5" - 3', "5" - 3);
show("[] + []", [] + []);
show("[] + {}", [] + {});
show("true + true", true + true);
show('"b"+"a"+ +"a"+"a"', "b" + "a" + +"a" + "a");
show("eval('{} + []')", eval("{} + []"));
show("({} + [])", ({} + []));
show("0 == ''", 0 == "");
show("null == 0", null == 0);
show("NaN === NaN", NaN === NaN);
show("Object.is(NaN, NaN)", Object.is(NaN, NaN));
show("typeof null", typeof null);

নিয়ম জানাই কি যথেষ্ট? — TypeScript কেন এল

নিয়ম জানলে ধাঁধা বোঝা যায়, কিন্তু বড় প্রজেক্টে হাজার হাজার লাইনে প্রতিটি মানের টাইপ মাথায় রাখা অসম্ভব। price + delivery লাইনটি দেখে বোঝা যায় না দুটিই number কি না। এই সমস্যার সমাধানে Microsoft ২০১২ সালে আনে TypeScript — JavaScript-এর ওপর টাইপের একটি স্তর, যা কোড চালানোর আগেই বলে দেয় “এখানে string আর number যোগ হচ্ছে”। চালানোর সময় টাইপ মুছে সাধারণ JavaScript হয়ে যায়, তাই এই পর্বের সব নিয়ম তখনো খাটে। TypeScript শুরু হবে পর্ব ৪৭-এ; তার আগে নিয়মগুলো জানা জরুরি, কারণ TypeScript-এর error বুঝতেও এগুলো লাগে।

৯ · AI-এর যুগে — টাইপের ভুল ধরার চোখ

AI কোড লেখে লাখো পুরোনো উদাহরণ থেকে শিখে — আর পুরোনো JavaScript কোডে ==, radix ছাড়া parseInt, আর “ইনপুট সবসময় ঠিক টাইপে আসবে” ধরনের অনুমান প্রচুর। ফলে AI-এর লেখা কোড প্রায়ই সাধারণ পরীক্ষায় ঠিক চলে, কিন্তু খালি ঘর, null বা অদ্ভুত ইনপুটে চুপচাপ ভুল ফল দেয় — error ছাড়াই, যা সবচেয়ে বিপজ্জনক।

AI-এর কোড হাতে পেলে — টাইপের চেকলিস্ট

• সব == খুঁজে দেখেছি — x == null ছাড়া বাকিগুলো === করেছি
• form, URL, localStorage, ফাইল থেকে আসা মান string ধরে নিয়ে স্পষ্ট রূপান্তর আছে কি না দেখেছি
• খালি string, null, undefined, NaN আর 0 দিয়ে নিজে চালিয়ে দেখেছি
• API-র ঘর null হলে আর পুরো ঘর না থাকলে — দুই অবস্থাতেই কোড টিকে থাকে
• ফোন নম্বর, আইডি, পোস্ট কোডের মতো “লেবেল” string হিসেবেই আছে