== কখন, কখন না, আর বাকি judgement call-গুলো

Amara Kenji-কে একটা pull request পাঠায়, মানে দোকানের code-এ একটা বদল, review-এর জন্য। if (discount == null) লাইনে Kenji একটাই comment লেখে: "never use =="। Amara-র লাইনটা ঠিক ছিল, আবার Kenji-র নিয়মটাও ভালো। দুটোই সত্যি হতে পারে, কারণ ভালো একটা default মানেই আইন না। এই lesson আগে নিয়মটার পেছনের chart-টা আঁকে, তারপর পাঁচটা judgement call নেয়, প্রতিটার জন্য একটা করে program।

"সমান?" জিজ্ঞেস করার তিন উপায়

JavaScript-এ সমান কিনা দেখার উপায় তিনটা। ===, মানে strict equality, true হয় যখন দুই দিকের type এক আর value-ও এক, কোনো convert ছাড়াই। ==, মানে loose equality, type আলাদা হলে আগে convert করে, lesson 01 আর 02-এ দেখা নিয়মে। Object.is(a, b) এসেছে ES2015-এ, কাজ করে ===-এর মতোই, শুধু দুইটা ব্যতিক্রম বাদে। এই module বারবার যে বারো জোড়ায় ফিরে আসে, তিনটা check সেগুলোর উপর এখানে।

এর চারটা সারি তুমি নিজেই run করে দেখতে পারো। row এক লাইনের একটা arrow function, যেটা এক জোড়ার তিনটা উত্তর print করে।

const out = [];
const row = (label, x, y) => out.push(label + ": " + (x == y) + " " + (x === y) + " " + Object.is(x, y));

row("1 and \"1\"", 1, "1");
row("null and undefined", null, undefined);
row("NaN and NaN", NaN, NaN);
row("0 and -0", 0, -0);

console.log(out.join("\n"));

1 and "1": true false false
null and undefined: true false false
NaN and NaN: false false true
0 and -0: true true false

Chart-টা পড়া

প্রথম দুইটা ফলের কলাম দিয়ে শুরু করো। ছয়টা সারিতে == আর ===-এর মত মেলে না, আর প্রতিটাতেই দুই দিকের type আলাদা, তাই == convert করেছে। Type এক হলে standard বলে দিয়েছে, == হুবহু ===-এর কাজটাই করবে।

এবার সারি 2, 3 আর 4। 0 == "" true, 0 == "0"-ও true, অথচ "" == "0" false। সারি 4-এর দুই দিকই string, তাই কিছুই convert হয় না, আর দুইটা আলাদা text সমান না। মানে == transitive না: a যদি b-র সমান হয় আর b যদি c-র সমান হয়, তাতে a আর c সমান হয়ে যায় না। একে এড়ানোর আসল কারণ এটাই, speed-ও না, style-ও না।

সারি 5, 6 আর 7-এ আছে ব্যতিক্রমটা। ==-এর হিসাবে null আর undefined শুধু একে অন্যের সমান, আর কারও না, 0-এরও না। সারি 8 আর 9 হলো একমাত্র জায়গা, যেখানে Object.is আর === আলাদা পথে যায়। তাই === কখনো চমকে দেয় না, আর == চমকে দেয় ঠিক সেই সারিগুলোতে, যেগুলো তুমি মুখস্থ করোনি।

value == null
Object.is(a, b)

x == null, একমাত্র == যেটা লেখার মতো

একটা value দুইভাবে না থাকতে পারে। undefined মানে কেউ সেটা set-ই করেনি, যেমন object-এ কখনো না থাকা একটা property। null মানে কেউ ইচ্ছে করে খালি করে রেখেছে। Setting পড়ার code সাধারণত দুটোকেই "নেই" ধরতে চায়, আর কিছুকে না।

const out = [];
const row = (label, value) => out.push(label + ": == null " + (value == null) + ", === null " + (value === null) + ", !value " + !value);

row("null", null);
row("undefined", undefined);
row("0", 0);
row("empty string", "");
row("false", false);
row("NaN", NaN);

console.log(out.join("\n"));

null: == null true, === null true, !value true
undefined: == null true, === null false, !value true
0: == null false, === null false, !value true
empty string: == null false, === null false, !value true
false: == null false, === null false, !value true
NaN: == null false, === null false, !value true

বেশিরভাগ team সিদ্ধান্তটা linter-কে দেয়, আর সেটাই ঠিক

Linter এমন একটা program, যেটা তোমার code পড়ে ঝুঁকির জায়গাগুলো দাগিয়ে দেয়; Module 1-এ নাম এসেছিল ESLint-এর, JavaScript-এর একটা linter। এর eqeqeq নিয়মটা প্রতিটা == আর !=-কে দাগায়। { "null": "ignore" } option দিলে == null ছাড় পায়, আর "smart" option-ও এটাকে ছাড় দেয়। Airbnb-র style guide হুবহু এই setting-টাই দেয়:

module.exports = [
  {
    rules: {
      eqeqeq: ["error", "always", { null: "ignore" }],
    },
  },
];

এটা একটা ESLint configuration file, eslint.config.js। এটা কিছু print করে না, তাই এর কোনো output নেই। jQuery-র style guide-ও কথায় একই কথা বলে: সবসময় ===, একমাত্র ব্যতিক্রম null দিয়ে null আর undefined একসাথে check করা।

সিদ্ধান্তটা একটা নিয়মের হাতে ছেড়ে দেওয়া ঠিক আছে, review comment-এর চেয়ে বরং ভালো। কাউকে chart মনে রাখতে হয় না, আর review-তে operator নিয়ে না, design নিয়ে তর্ক হয়। Airbnb-র মতো করে সাজানো থাকলে linter Amara-র লাইনটা পাস করিয়ে দিত, Kenji-কে আর comment লিখতে হতো না।

পুরো string-এর জন্য Number, সামনের অংশের জন্য parseInt

Lesson 03-এ দুই রকম পাঠক দেখেছ: Number() চায় পুরো text, parseInt পড়ে সামনের অংশ। কোনটা নেবে, সেটা নির্ভর করে text-টার কী হওয়ার কথা তার উপর। এই module-এর সব converter নিচের flowchart-এ এক পাতায়।

const out = [];
const both = (label, text) => out.push(label + " " + text + ": Number " + Number(text) + ", parseInt " + parseInt(text, 10));

both("quantity", "12");
both("quantity", "2O");
both("quantity", "");
both("width", "250px");
both("version", "22.16.0");

console.log(out.join("\n"));

quantity 12: Number 12, parseInt 12
quantity 2O: Number NaN, parseInt 2
quantity : Number 0, parseInt NaN
width 250px: Number NaN, parseInt 250
version 22.16.0: Number NaN, parseInt 22

0 আর খালি text যখন আসল উত্তর, তখন ??

Lesson 02 দেখিয়েছে, || যেকোনো falsy value পেলেই default-এ চলে যায়, আর ?? যায় শুধু null আর undefined-এ। সিদ্ধান্তটা আসলে data-র ব্যাপার। এখানে 0 কি আসল একটা উত্তর, আর ""?

const out = [];
const saved = { volume: 0, separator: "", theme: undefined };

out.push("volume with ||: " + (saved.volume || 50));
out.push("volume with ??: " + (saved.volume ?? 50));
out.push("separator with ||: [" + (saved.separator || ", ") + "]");
out.push("separator with ??: [" + (saved.separator ?? ", ") + "]");
out.push("theme with ??: " + (saved.theme ?? "light"));

console.log(out.join("\n"));

volume with ||: 50
volume with ??: 0
separator with ||: [, ]
separator with ??: []
theme with ??: light

toFixed দেখানোর জন্য, হিসাবের জন্য কখনো না

Lesson 03 বলেছিল: আগে হিসাব, শেষে text। এবার এমন একটা bill, যেখানে শুধু ক্রম ঠিক রাখলেও চলে না। 48.50-এর 15 শতাংশ হলো 7.275, আর total 55.775। দুটোই শেষ হয় 5-এ, আর toFixed গোল করে store করা binary value-টাকে, যেটা আসল সংখ্যার চুল পরিমাণ উপরে বা নিচে বসে থাকে।

const out = [];
const bill = 48.5;
const percent = 15;

const tip = bill * percent / 100;
out.push("in decimals: tip " + tip.toFixed(2) + ", total " + (bill + tip).toFixed(2));

const billCents = Math.round(bill * 100);
const tipCents = Math.round(billCents * percent / 100);
const totalCents = billCents + tipCents;
out.push("in cents:    tip " + (tipCents / 100).toFixed(2) + ", total " + (totalCents / 100).toFixed(2));

console.log(out.join("\n"));

in decimals: tip 7.28, total 55.77
in cents:    tip 7.28, total 55.78

NaN আর -0-এর জন্য Object.is

=== দুইটা জায়গায় জেনেশুনেই ভুল বলে, standard এভাবেই বানিয়েছে। NaN === NaN false, lesson 01-এ Zara-র সেই test। 0 === -0 true, অথচ -0 একটা আসল value, যেটা screen-এ এসে হাজির হতে পারে।

const out = [];
const reading = Number("n/a");

out.push("reading === NaN: " + (reading === NaN));
out.push("Number.isNaN(reading): " + Number.isNaN(reading));
out.push("Object.is(reading, NaN): " + Object.is(reading, NaN));

const rounded = Math.round(-0.4);
out.push("rounded: " + rounded);
out.push("rounded === 0: " + (rounded === 0));
out.push("Object.is(rounded, -0): " + Object.is(rounded, -0));
out.push("(-0.4).toFixed(0): " + (-0.4).toFixed(0));

console.log(out.join("\n"));

reading === NaN: false
Number.isNaN(reading): true
Object.is(reading, NaN): true
rounded: 0
rounded === 0: true
Object.is(rounded, -0): true
(-0.4).toFixed(0): -0

const order = { price: 200 };
const discount = order.discount;
const final = discount === null ? order.price : order.price * (1 - discount);
console.log("final: " + final);

final: NaN

const score = Number("ten");
console.log(score === NaN ? "bad input" : "score " + score);

score NaN

const quantity = 0;
console.log(!quantity ? "missing" : "quantity " + quantity);

missing

console.log("abc" < "abd");
console.log("Z" < "a");

const out = [];
const row = (label, x, y) => out.push(label + ": " + (x == y) + " " + (x === y) + " " + Object.is(x, y));

row("1 and \"1\"", 1, "1");
// add rows 2 to 12 of the chart here, in the chart's order

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const lines = input.split("\n");
let at = 0;
const next = () => lines[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

এরপর lesson 05 engine-এর ভিতরটা খোলে, আর chart-এর প্রতিটা == সারির পেছনের algorithm-টা এক ধাপ এক ধাপ করে হেঁটে দেখায়।