লিখিত ও মৌখিক (ভাইভা) প্রশ্ন — JavaScript মডেল উত্তর ও কৌশল

সংজ্ঞা: JavaScript একটি high-level, dynamically typed, garbage-collected ভাষা, যার মান ঠিক করে ECMAScript নির্দেশিকা (TC39 কমিটি প্রতি বছর নতুন সংস্করণ দেয় — ES2015, ES2016 …)। ১৯৯৫ সালে Netscape-এ Brendan Eich এটি বানান। আজ এটি ব্রাউজারে (পাতাকে interactive করতে) আর সার্ভারে (Node.js, ২০০৯ থেকে) দুই জায়গাতেই চলে।

Interpreted না compiled? ভাষা নিজে কোনোটিই নয় — এটা নির্ভর করে engine-এর ওপর। আধুনিক engine (Chrome ও Node-এ V8, Firefox-এ SpiderMonkey, Safari-তে JavaScriptCore) প্রথমে কোড parse করে bytecode বানায়, interpreter দিয়ে চালানো শুরু করে, আর যে function বারবার চলে তাকে JIT compiler দিয়ে machine code-এ রূপান্তর করে। তাই সঠিক উত্তর: “JIT-compiled — interpreter আর compiler দুটোই কাজ করে।”

সীমা যোগ করুন: JIT অনুমানের ওপর চলে (যেমন “এই variable সবসময় number”); অনুমান ভাঙলে deoptimization হয়। তাই একই জায়গায় একই টাইপের মান রাখা পারফরম্যান্সে সাহায্য করে।

ঝালিয়ে নিন: পর্ব ০১, পর্ব ০৫ · engine, JIT আর call stack

Call stack: কোন function এখন চলছে আর শেষ হলে কোথায় ফিরতে হবে, তার তালিকা। প্রতিটি function call-এ একটি frame উপরে চাপে (local variable, ফেরার ঠিকানা), শেষ হলে সরে যায় — শেষে-ঢোকা-আগে-বের (LIFO). JavaScript-এর main thread-এ stack একটিই, তাই একসাথে একটিই কাজ চলে।

Heap: object, array, function-এর মতো মান যেখানে থাকে — বড়, এলোমেলো মেমরি এলাকা। Stack-এ থাকে শুধু সেগুলোর reference. কেউ আর ধরে না থাকা object garbage collector সরিয়ে দেয়।

Stack overflow: শেষ না হওয়া recursion-এ frame জমতেই থাকে। V8-এ তখন ছোড়া হয় RangeError: Maximum call stack size exceeded. সমাধান: base case ঠিক করা, বা গভীর recursion-কে লুপে বা নিজের stack (array) দিয়ে লেখা। JavaScript-এর মানদণ্ডে proper tail call আছে, কিন্তু V8 তা বাস্তবায়ন করে না — তাই tail recursion-এর ওপর ভরসা করবেন না।

ঝালিয়ে নিন: পর্ব ০৫, পর্ব ১৩

মোট আটটি টাইপ। সাতটি primitive: string, number, bigint, boolean, undefined, null, symbol. আর একটি object — array, function, Date, Map সবই এর ভেতরে।

উদাহরণ: {a: 1} === {a: 1} হলো false — দুটি আলাদা object. কিন্তু 'চা' === 'চা' হলো true.

ঝালিয়ে নিন: পর্ব ০৬ · মান, টাইপ আর coercion

সংজ্ঞা: === (strict equality) টাইপ না মিললেই false — কোনো রূপান্তর নেই। == (loose equality) টাইপ আলাদা হলে আগে একটি জটিল নিয়মে coercion করে (সাধারণত number-এর দিকে), তারপর তুলনা করে। Object.is প্রায় ===, শুধু দুই জায়গায় আলাদা: NaN-কে নিজের সমান ধরে, আর 0 ও -0-কে আলাদা ধরে।

const show = v => typeof v === 'string' ? `'${v}'` : Array.isArray(v) ? `[${v}]` : String(v);
const pairs = [[0, ''], [0, '0'], ['', '0'], [null, undefined], [null, 0], [NaN, NaN], [[1], 1], [true, '1']];
for (const [a, b] of pairs) {
  console.log(`${show(a)} == ${show(b)} → ${a == b} | === → ${a === b}`);
}
console.log('Object.is:', Object.is(NaN, NaN), Object.is(0, -0));

উপসংহার: সবসময় ===; একমাত্র প্রচলিত ব্যতিক্রম x == null, যা একসাথে null আর undefined ধরে। ESLint-এর eqeqeq নিয়ম === বাধ্যতামূলক করে (চাইলে null-এর এই ব্যতিক্রমটি রাখা যায়)।

ঝালিয়ে নিন: পর্ব ০৬, পর্ব ০৮

Hoisting: কোড চালানোর আগে engine প্রতিটি scope-এর সব ঘোষণা নিবন্ধন করে নেয়। var-কে সাথে সাথে undefined দিয়ে শুরু করে; function declaration পুরোটাই তৈরি হয়ে যায় (তাই ঘোষণার আগেই ডাকা যায়)। let/const/class-ও নিবন্ধিত হয়, কিন্তু ঘোষণার লাইন পর্যন্ত শুরু হয় না — সেই অংশটির নাম TDZ (temporal dead zone). TDZ-এ পড়লে V8-এর বার্তা: ReferenceError: Cannot access 'x' before initialization.

সতর্কতা: const মানে binding স্থির, object নয় — const cart = []; cart.push(1) বৈধ। object-ই আটকাতে Object.freeze (তাও শুধু উপরের স্তর)। উপসংহার: const ডিফল্ট, বদলাতে হলে let, নতুন কোডে var নয়।

ঝালিয়ে নিন: পর্ব ০৭ · scope, hoisting আর TDZ

undefined মানে “মান এখনো দেওয়া হয়নি” — engine নিজে দেয়: ঘোষিত কিন্তু মানহীন variable, না থাকা property, return ছাড়া function, না পাঠানো parameter. null মানে “ইচ্ছা করে খালি” — প্রোগ্রামার নিজে দেন। typeof undefined → 'undefined', typeof null → 'object'. JSON-এ null আছে, undefined নেই — JSON.stringify এমন property বাদ দেয়। default parameter শুধু undefined-এ কাজ করে, null-এ নয়।

typeof null-এর ইতিহাস: প্রথম বাস্তবায়নে মানের সাথে একটি ছোট type tag থাকত, আর object-এর tag ছিল 0; null উপস্থাপন করা হতো শূন্য pointer দিয়ে, তাই তার tag-ও 0 পড়ত। এটি একটি ভুল, কিন্তু ঠিক করলে পুরোনো ওয়েবসাইট ভেঙে যেত — পরে এমন একটি প্রস্তাব বাতিলও হয়েছে। তাই object চেনার নিরাপদ পরীক্ষা: x !== null && typeof x === 'object'.

ঝালিয়ে নিন: পর্ব ০৬

JavaScript-এর number হলো IEEE 754 64-bit floating-point. 0.1 বা 0.2 বাইনারিতে ঠিকঠাক লেখা যায় না (যেমন দশমিকে ১/৩), তাই যোগফল 0.30000000000000004. তুলনায় Math.abs(a - b) < Number.EPSILON ধরনের সহনসীমা ব্যবহার করুন।

টাকা: পয়সায় পূর্ণসংখ্যা রাখুন (১২০.৫০ টাকা = 12050 পয়সা), দেখানোর সময় ভাগ করুন আর Intl.NumberFormat দিয়ে ফরম্যাট করুন — পর্ব ২১-এর খরচের খাতা ঠিক এভাবেই বানানো। toFixed দেখানোর জন্য, হিসাবের জন্য নয়।

BigInt: number নিরাপদে পূর্ণসংখ্যা রাখতে পারে শুধু Number.MAX_SAFE_INTEGER = 2⁵³ − 1 পর্যন্ত (9007199254740991). এর বাইরে — বড় ID, ক্রিপ্টোগ্রাফি, বড় factorial — 123n আকারের BigInt (ES2020). সীমা: number-এর সাথে সরাসরি মেশানো যায় না (1n + 1 → TypeError), আর JSON.stringify BigInt পেলে TypeError: Do not know how to serialize a BigInt ছোড়ে।

ঝালিয়ে নিন: পর্ব ১০ · number, floating-point আর BigInt

boolean দরকার এমন জায়গায় (if, &&, ||) প্রতিটি মান truthy বা falsy ধরা হয়। falsy মান মাত্র কয়েকটি: false, 0, -0, 0n, '', null, undefined, NaN. বাকি সব truthy — '0', [], {}-ও।

a || b বাঁ দিক falsy হলেই b দেয়; a ?? b (nullish coalescing, ES2020) শুধু null বা undefined হলে। উদাহরণ: const qty = input || 1; ব্যবহারকারী 0 দিলেও 1 করে দেয় — বাগ। input ?? 1 0 রাখে।

?. (optional chaining): user?.address?.city — মাঝের কোনোটি null/undefined হলে error না ছুড়ে পুরো expression undefined দেয়। method-এও চলে: obj.save?.(). সীমা: অতিরিক্ত ব্যবহার আসল বাগ লুকিয়ে ফেলে — যে মান থাকতেই হবে, সেখানে ?. দেবেন না।

ঝালিয়ে নিন: পর্ব ০৮

কখন কোনটি: callback আর ছোট function-এ arrow (বিশেষ করে method-এর ভেতরে, যেখানে বাইরের this দরকার)। object-এর method বা event handler, যেখানে নিজের this দরকার, সেখানে arrow নয়। ES2015-এ arrow, default parameter আর rest parameter এসেছে।

ঝালিয়ে নিন: পর্ব ১৩ · function, পর্ব ২৪ · this

for…of (ES2015) যেকোনো iterable-এর মান দেয় — array, string, Map, Set, generator. for…in একটি object-এর enumerable property-র নাম (string key) দেয় — prototype chain থেকে আসা enumerable property-সহ। array-তে for…in সূচক দেয় string হিসেবে ('0', '1'), কেউ Array.prototype-এ কিছু যোগ করলে সেটিও আসতে পারে, আর ক্রমের ওপর ভরসা করা ঠিক নয়। তাই array-তে for…of বা array method; object-এ Object.entries(obj)-এর ওপর for…of.

ঝালিয়ে নিন: পর্ব ১২ · লুপ

immutable মানে string তৈরি হওয়ার পর তার কোনো অক্ষর বদলানো যায় না; toUpperCase, replace, slice সবাই নতুন string ফেরত দেয়। s[0] = 'x' sloppy mode-এ চুপচাপ উপেক্ষিত হয়, strict mode-এ TypeError.

length গোনে UTF-16 code unit, মানুষের চোখে দেখা অক্ষর নয়। “বাংলা” = ব + া + ং + ল + া — পাঁচটি code point, প্রতিটি একটি code unit, তাই 5. চোখে দেখা অক্ষর (grapheme cluster) গুনতে Intl.Segmenter: “বাংলা”-তে তা 2 (বাং + লা)। emoji-তে আরও পার্থক্য — '😀'.length 2, কারণ এটি একটি surrogate pair. উপসংহার: ইনপুটের দৈর্ঘ্য সীমা, কার্সর বা কাটাকাটিতে length নয়, grapheme ধরে হিসাব করুন।

ঝালিয়ে নিন: পর্ব ০৯ · string আর বাংলা Unicode

উত্তর: সবসময় pass-by-value — কিন্তু object-এর ক্ষেত্রে যে “মান” কপি হয় তা হলো reference. একে বলে pass-by-sharing. ফলে function-এর ভেতরে object-এর property বদলালে বাইরে দেখা যায়, কিন্তু parameter-কে নতুন object দিলে বাইরের variable বদলায় না।

function addItem(cart) { cart.push('চা'); }          // একই object বদলায়
function reset(cart)   { cart = []; }                // শুধু local কপি বদলায়
const myCart = [];
addItem(myCart); reset(myCart);
console.log(myCart);   // আউটপুট: [ 'চা' ]

উপসংহার: C++-এর & reference-এর মতো আসল pass-by-reference JavaScript-এ নেই। ভেতরে object বদলানো (mutation) বাগের বড় উৎস — তাই নতুন object ফেরত দেওয়া (immutable update) ভালো অভ্যাস।

ঝালিয়ে নিন: পর্ব ১৪ · object আর reference

সংজ্ঞা: shallow copy ({...obj}, Object.assign, [...arr], arr.slice()) শুধু উপরের স্তরের property কপি করে; ভেতরের object আগের মতোই ভাগ করা থাকে। deep copy প্রতিটি স্তর আলাদা করে কপি করে। পদ্ধতি: primitive হলে যেমন আছে ফেরত; object হলে নতুন খালি object বা array বানাই, প্রতিটি property-র ওপর নিজেকে আবার ডাকি (recursion). আগে দেখা object একটি WeakMap-এ মনে রাখি — তাতে circular reference-এ অসীম recursion হয় না, আর একই object দুই জায়গায় থাকলে কপিতেও একটিই থাকে।

function deepClone(value, seen = new WeakMap()) {
  if (value === null || typeof value !== 'object') return value; // primitive
  if (seen.has(value)) return seen.get(value);                     // circular
  if (value instanceof Date) return new Date(value.getTime());
  if (value instanceof Map) {
    const m = new Map();
    seen.set(value, m);
    for (const [k, v] of value) m.set(deepClone(k, seen), deepClone(v, seen));
    return m;
  }
  const copy = Array.isArray(value) ? [] : Object.create(Object.getPrototypeOf(value));
  seen.set(value, copy);
  for (const key of Object.keys(value)) copy[key] = deepClone(value[key], seen);
  return copy;
}

const order = { id: 7, items: [{ name: 'চা', qty: 2 }], at: new Date(0) };
order.self = order;                       // নিজের দিকেই reference
const c = deepClone(order);
c.items[0].qty = 5;
console.log(order.items[0].qty, c.items[0].qty);
console.log(c.self === c, c.at instanceof Date, c.at !== order.at);

const shallow = { ...order };
console.log(shallow.items === order.items);
const s = structuredClone(order);
console.log(s.self === s, s.items[0].qty);

ঝালিয়ে নিন: পর্ব ১৪, পর্ব ১৭, পর্ব ১৯ · structuredClone

প্রথম তিনটি মূল array বদলায় না, তাই chain করা যায়: items.filter(i => i.inStock).map(i => i.price).reduce((s, p) => s + p, 0). reduce-এ সবসময় initial value দিন — খালি array-তে initial value ছাড়া TypeError: Reduce of empty array with no initial value. forEach-এর ভেতরে break চলে না আর await করলে অপেক্ষা হয় না — সেখানে for…of.

ঝালিয়ে নিন: পর্ব ১৬ · map, filter, reduce

comparator না দিলে sort প্রতিটি উপাদানকে string-এ রূপান্তর করে UTF-16 code unit-এর ক্রমে সাজায় — '10' আসে '2'-এর আগে, কারণ প্রথম অক্ষর '1' < '2'. সংখ্যায় সাজাতে comparator দিন: arr.sort((a, b) => a - b) — ঋণাত্মক ফল মানে a আগে। বাংলা নাম সাজাতে a.localeCompare(b, 'bn') বা Intl.Collator.

আরও দুটি কথা লিখুন: sort মূল array বদলায় (in-place) — না বদলাতে চাইলে ES2023-এর toSorted. আর ES2019 থেকে sort stable — সমান উপাদানের আগের ক্রম বজায় থাকে, তাই প্রথমে নামে আর পরে দামে সাজালে একই দামের পণ্য নামের ক্রমে থাকে।

ঝালিয়ে নিন: পর্ব ১৬, পর্ব ১৫

পদ্ধতি: flatten — প্রতিটি উপাদান দেখি; array হলে আর গভীরতা বাকি থাকলে নিজেকে depth - 1 দিয়ে ডাকি, না হলে সরাসরি যোগ করি। groupBy — প্রতিটি উপাদানের key বের করি, সেই key-এর তালিকায় যোগ করি। ভাষার নিজস্ব (built-in) সমতুল্য দুটির কথাও লিখুন: Array.prototype.flat (ES2019) আর Object.groupBy (ES2024).

function flatten(arr, depth = Infinity) {
  const out = [];
  for (const item of arr) {
    if (Array.isArray(item) && depth > 0) out.push(...flatten(item, depth - 1));
    else out.push(item);
  }
  return out;
}
console.log(flatten([1, [2, [3, [4]]], 5]));
console.log(flatten([1, [2, [3, [4]]]], 1));
console.log([1, [2, [3, [4]]]].flat(Infinity));

function groupBy(list, keyFn) {
  const groups = Object.create(null);     // prototype নেই: '__proto__' key-ও নিরাপদ
  for (const item of list) {
    const k = keyFn(item);
    (groups[k] ??= []).push(item);
  }
  return groups;
}
const sales = [{ cat: 'খাবার', tk: 120 }, { cat: 'যাতায়াত', tk: 60 }, { cat: 'খাবার', tk: 80 }];
const g = groupBy(sales, s => s.cat);
console.log(Object.keys(g), g['খাবার'].map(s => s.tk));

ঝালিয়ে নিন: পর্ব ১৫, পর্ব ১৬

Set: অনন্য মানের সংগ্রহ — [...new Set(arr)] দিয়ে duplicate সরানো, “দেখা হয়েছে কি না” গড়ে O(1)-এ। WeakMap: key শুধু object, আর key-কে GC থেকে আটকায় না — DOM node বা object-এর সাথে বাড়তি ডেটা (cache, private ডেটা) জুড়তে, যাতে object মুছে গেলে ডেটাও মুছে যায়, memory leak ছাড়া। সীমা: WeakMap-এ লুপ চালানো বা size জানা যায় না।

ঝালিয়ে নিন: পর্ব ১৮ · Map, Set, WeakMap

object-এর property-তে undefined, function আর symbol মান থাকলে সেই property বাদ যায় (array-র ভেতরে এরা null হয়); NaN আর Infinity হয় null; Date হয় ISO string (toJSON ডাকার কারণে) — parse করলে আর Date থাকে না; Map ও Set হয় {}; BigInt-এ TypeError; circular reference-এ TypeError: Converting circular structure to JSON. উদাহরণ: JSON.stringify({a: undefined, c: NaN, d: new Date(0)}) → {"c":null,"d":"1970-01-01T00:00:00.000Z"}. সমাধানের পথ: replacer/reviver function, নিজের toJSON, আর নেটওয়ার্ক থেকে আসা JSON সবসময় schema দিয়ে যাচাই।

ঝালিয়ে নিন: পর্ব ১৯ · JSON

Destructuring (ES2015) object বা array থেকে মান খুলে variable-এ রাখে: const { name, price = 0 } = product;, const [first, second] = list;. ... অবস্থানভেদে দুই কাজ করে: মান যেখানে দরকার সেখানে spread (ছড়ানো) — [...a, ...b], {...defaults, ...options}, Math.max(...nums); আর যেখানে মান গ্রহণ করা হয় সেখানে rest (জড়ো করা) — function sum(...nums), const { password, ...safeUser } = user;. শেষ উদাহরণটি API-র উত্তর থেকে গোপন field বাদ দেওয়ার পরিচিত কৌশল। সতর্কতা: spread shallow copy করে।

ঝালিয়ে নিন: পর্ব ১৭

ফাঁদ ১ — মাস ০ থেকে: new Date(2026, 0, 31) হলো ৩১ জানুয়ারি; ডিসেম্বর হলো 11. ফাঁদ ২ — overflow চুপচাপ: new Date(2026, 1, 30) error দেয় না, গড়িয়ে ২ মার্চ হয়ে যায়। ফাঁদ ৩ — time zone: Date আসলে একটি UTC মুহূর্ত (epoch থেকে মিলিসেকেন্ড); getHours দেখায় যন্ত্রের লোকাল সময়ে, toISOString দেখায় UTC-তে — সার্ভার আর ব্রাউজারের time zone আলাদা হলে তারিখ একদিন সরে যেতে পারে।

বাংলায় দেখাতে: new Intl.DateTimeFormat('bn-BD', { dateStyle: 'long', timeZone: 'Asia/Dhaka' }).format(d). সংরক্ষণে UTC (ISO 8601 string বা timestamp), দেখানোয় লোকাল — এটাই নিয়ম।

ঝালিয়ে নিন: পর্ব ২০ · তারিখ, সময় আর Intl

সংজ্ঞা: closure হলো একটি function আর তার জন্মস্থানের variable-গুলোর (lexical scope) সংযোগ — বাইরের function শেষ হলেও ভেতরের function সেগুলো পড়তে ও বদলাতে পারে। closure মান নয়, variable ধরে রাখে।

function makeCounter() {
  let count = 0;                         // বাইরে থেকে সরাসরি ছোঁয়া যায় না
  return { inc: () => ++count, get: () => count };
}
const a = makeCounter();
const b = makeCounter();
a.inc(); a.inc(); b.inc();
console.log('a:', a.get(), 'b:', b.get());

for (var i = 0; i < 3; i++) setTimeout(() => console.log('var:', i));
for (let j = 0; j < 3; j++) setTimeout(() => console.log('let:', j));

সুবিধা ও সীমা: private state, function factory, memoization, debounce — সবই closure. কিন্তু closure যা ধরে রাখে তা GC হয় না; বড় DOM বা ডেটা ধরে রাখা event listener না সরালে memory leak হয়।

ঝালিয়ে নিন: পর্ব ২২ · scope chain আর closure, পর্ব ০৭

সংজ্ঞা: currying হলো অনেক আর্গুমেন্টের একটি function-কে এমন রূপ দেওয়া, যাতে আর্গুমেন্টগুলো এক এক করে (বা ভাগে ভাগে) দেওয়া যায়: f(a, b, c) → f(a)(b)(c). memoization হলো একই ইনপুটের ফল cache-এ রেখে পরেরবার আবার হিসাব না করা — শুধু pure function-এর জন্য নিরাপদ। পদ্ধতি: curry জমানো আর্গুমেন্ট গোনে; fn.length-এর সমান হলে আসল function ডাকে, নইলে আরও আর্গুমেন্টের জন্য নতুন function ফেরত দেয় (closure-এ আগেরগুলো জমা থাকে)। memoize একটি Map-কে closure-এ রাখে।

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) return fn.apply(this, args);
    return (...more) => curried.apply(this, [...args, ...more]);
  };
}
const bill = (rate, qty, discount) => rate * qty - discount;
const cb = curry(bill);
console.log(cb(50)(3)(20), cb(50, 3)(20), cb(50)(3, 20));
const teaBill = cb(15);                  // দাম আটকে রাখা হলো
console.log(teaBill(4)(0));

function memoize(fn, keyFn = (...a) => JSON.stringify(a)) {
  const cache = new Map();
  return function (...args) {
    const key = keyFn(...args);
    if (cache.has(key)) return cache.get(key);
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}
let calls = 0;
const slowSquare = n => { calls++; return n * n; };
const fastSquare = memoize(slowSquare);
console.log(fastSquare(9), fastSquare(9), fastSquare(4), 'calls:', calls);

ঝালিয়ে নিন: পর্ব ২৩ · currying আর composition, পর্ব ২২ · memoization

this-এর মান ঠিক হয় function কীভাবে ডাকা হলো তা দিয়ে, কোথায় লেখা হলো তা দিয়ে নয় (arrow বাদে)। অগ্রাধিকার অনুযায়ী:

1. new binding: new Shop() — নতুন তৈরি object.
2. explicit: f.call(obj), f.apply(obj), f.bind(obj) — obj.
3. implicit: cart.total() — ডটের বাঁ দিকের object, cart.
4. default: সাধারণ f() — strict mode-এ (module ও class-এর ভেতরে সবসময় strict) undefined; sloppy mode-এ global object (ব্রাউজারে window).

Arrow: নিজের this নেই; যেখানে লেখা হয়েছে সেখানকার বাইরের this নেয় (lexical this), আর call/bind দিয়েও বদলানো যায় না। ক্লাসিক ফাঁদ: const f = cart.total; f(); — method আলাদা করে ডাকলে implicit binding হারায় (lost this); একইভাবে setTimeout(cart.total, 0). সমাধান: cart.total.bind(cart) বা () => cart.total().

ঝালিয়ে নিন: পর্ব ২৪ · this, call, apply আর bind

মনে রাখার সহজ সূত্র: Apply = Array. bind একবার বাঁধলে আবার bind বা call দিয়ে this বদলায় না (তবে new দিয়ে ডাকলে নতুন object পায়)। আজকাল spread থাকায় apply কম লাগে: Math.max(...nums).

ঝালিয়ে নিন: পর্ব ২৪

সংজ্ঞা: প্রতিটি object-এর একটি লুকানো সংযোগ থাকে আরেকটি object-এর দিকে — তার prototype ([[Prototype]], পড়া যায় Object.getPrototypeOf দিয়ে)। কোনো property পড়লে engine প্রথমে object-এর নিজের property খোঁজে; না পেলে prototype-এ, তারপর তার prototype-এ … যতক্ষণ না null-এ পৌঁছায়। এই শিকলই prototype chain.

class Product { constructor(n) { this.name = n; } label() { return '#' + this.name; } }
const tea = new Product('চা');

 tea  { name: 'চা' }                         ← নিজের property
  │ [[Prototype]]
  ▼
 Product.prototype { label(), constructor }  ← class-এর method এখানে
  │ [[Prototype]]
  ▼
 Object.prototype { toString(), hasOwnProperty(), … }
  │ [[Prototype]]
  ▼
 null                                        ← খোঁজা শেষ: undefined

tea.label()     → Product.prototype-এ পাওয়া গেল
tea.toString()  → Object.prototype-এ পাওয়া গেল → '[object Object]'
tea.price       → কোথাও নেই → undefined

আরও লিখুন: property লিখলে শিকল ধরে ওঠে না — নিজের property তৈরি হয় (shadowing). method prototype-এ থাকায় হাজারটি object একটিই function ভাগ করে — মেমরি বাঁচে। instanceof শিকলে Product.prototype আছে কি না দেখে। Object.create(null) শিকলহীন object বানায়। সীমা: লম্বা শিকল খোঁজা ধীর করে, আর Object.prototype-এ কিছু যোগ করা (বা prototype pollution আক্রমণ) সব object-কে প্রভাবিত করে।

ঝালিয়ে নিন: পর্ব ২৫ · prototype chain

মূলত হ্যাঁ — class (ES2015) ভেতরে সেই prototype ব্যবস্থাই ব্যবহার করে; typeof Product হলো 'function'. কিন্তু শুধু চেহারার পার্থক্য নয়: class new ছাড়া ডাকলে TypeError: Class constructor Product cannot be invoked without 'new'; class-এর ভেতর সবসময় strict mode; method-গুলো non-enumerable; class ঘোষণা TDZ মানে (ঘোষণার আগে ব্যবহার করা যায় না); আর extends/super দিয়ে built-in (যেমন Error, Array) থেকে ঠিকভাবে উত্তরাধিকার নেওয়া যায়।

Private field (ES2022): #balance — class-এর বাইরে থেকে পড়ার চেষ্টা SyntaxError (কোড চালানোর আগেই), রানটাইমে ফাঁকি দেওয়ার উপায় নেই। আগের প্রথা _balance ছিল শুধু একটি সম্মতি, আর closure বা WeakMap দিয়ে আসল গোপনীয়তা বানাতে হতো। static member আর static {} block-ও আছে। সীমা: subclass-ও parent-এর #field দেখতে পায় না।

ঝালিয়ে নিন: পর্ব ২৬ · class আর private field

একটি object iterable হয়, যদি তার [Symbol.iterator]() method থাকে, যা একটি iterator ফেরত দেয়; iterator হলো এমন object যার next() প্রতিবার { value, done } দেয়। for…of, spread, destructuring, Array.from — সবাই এই চুক্তি মানে।

Generator (function*) এই চুক্তি নিজে বানিয়ে দেয়: প্রতিটি yield-এ function থেমে একটি মান দেয়, পরের next()-এ ঠিক সেখান থেকে চলে। উদাহরণ: function* ids() { let n = 1; while (true) yield n++; } — অসীম ক্রম, কিন্তু মান তৈরি হয় চাওয়ামাত্র (lazy), তাই মেমরি লাগে না। ব্যবহার: পাতায় পাতায় ডেটা আনা, বড় ফাইল লাইন ধরে পড়া, async generator ও for await…of.

ঝালিয়ে নিন: পর্ব ২৭

Proxy (ES2015) একটি object-এর চারপাশে মোড়ক, যা property পড়া, লেখা, মোছা, in পরীক্ষা ইত্যাদি মৌলিক কাজ মাঝপথে ধরে নিজের নিয়ম চালাতে দেয়: new Proxy(target, { get(t, key, r) {…}, set(t, key, v, r) {…} }). handler-এর এই method-গুলোকে trap বলে, আর trap-এর ভেতরে আসল কাজটি করতে Reflect-এর একই নামের method (Reflect.get, Reflect.set) ব্যবহার করা হয়।

ব্যবহার: validation (ঋণাত্মক দাম লিখতে না দেওয়া), লগিং, ডিফল্ট মান, আর framework-এর reactivity — Vue 3 পরিবর্তন টের পেতে Proxy ব্যবহার করে। সীমা: প্রতিটি কাজে বাড়তি function call, তাই hot path-এ ধীর; #private field আছে এমন class instance বা Map-এর মতো built-in মোড়ালে method ভেঙে যেতে পারে; আর proxy !== target, তাই পরিচয় তুলনায় বিভ্রান্তি।

ঝালিয়ে নিন: পর্ব ২৮ · Symbol, Proxy আর Reflect

try-এ error ছুড়লে বাকি অংশ বাদ দিয়ে catch-এ যায়; finally সবসময় চলে — try-এ return থাকলেও (আর finally-তে return দিলে তা আগের return বা error-কে চাপা দেয় — তাই সেখানে return দেবেন না)। try/catch শুধু synchronous error বা await করা Promise ধরে; setTimeout-এর callback-এর ভেতরের error বাইরের try ধরতে পারে না।

class PaymentError extends Error {
  constructor(message, options) {
    super(message, options);           // options-এ { cause } যায় (ES2022)
    this.name = 'PaymentError';
  }
}
try {
  try { JSON.parse('{bad'); }
  catch (err) { throw new PaymentError('পেমেন্টের উত্তর পড়া গেল না', { cause: err }); }
} catch (e) {
  console.log(e.name, e instanceof PaymentError, e.cause.name);
}
// আউটপুট: PaymentError true SyntaxError

কেন cause: নিচের স্তরের আসল কারণ না হারিয়ে উপরের স্তরে অর্থবহ বার্তা দেওয়া যায় — log-এ দুটোই থাকে। নিয়ম: শুধু Error (বা তার subclass) ছুড়ুন, string নয় — নইলে stack trace থাকে না; error গিলে ফেলবেন না (খালি catch); যে error সামলাতে পারেন না, তা আবার ছুড়ুন।

ঝালিয়ে নিন: পর্ব ২৯ · custom error আর cause

greedy quantifier (*, +, {n,}) যতটা পারে তত বেশি মেলায়, তারপর দরকার হলে পিছিয়ে আসে; lazy (*?, +?) যতটা পারে তত কম। উদাহরণ: '<b>চা</b><b>পান</b>'-এ /<b>.*<\/b>/ পুরো string মেলায়, /<b>.*?<\/b>/ শুধু প্রথম <b>চা</b>.

ReDoS: JavaScript-এর regex engine backtracking করে। /^(a+)+$/-এর মতো nested quantifier-এ মেলে না এমন ইনপুট ('aaaa…a!') দিলে চেষ্টার সংখ্যা ইনপুটের দৈর্ঘ্যের সাথে সূচকীয় হারে বাড়ে (catastrophic backtracking) — একটি অনুরোধেই সার্ভারের একমাত্র thread আটকে যেতে পারে। প্রতিরোধ: nested quantifier এড়ানো, ইনপুটের দৈর্ঘ্য সীমিত করা, আর সম্ভব হলে regex-এর বদলে সাধারণ parsing.

ঝালিয়ে নিন: পর্ব ৩০ · regular expression

সংজ্ঞা: JavaScript একটি thread-এ চলে — একটিই call stack. event loop হলো সেই ব্যবস্থা, যা stack খালি হলে অপেক্ষমাণ কাজের সারি থেকে পরের কাজ এনে চালায়। timer, নেটওয়ার্ক, click — এসবের অপেক্ষা করে ব্রাউজার (Web API) বা Node (libuv), JavaScript নিজে নয়।

 ┌──────────────┐   setTimeout, fetch,   ┌──────────────────────┐
 │  Call stack  │ ──── addEventListener ─►│ Web API / libuv      │
 │ (একটিই)      │                         │ (timer, network, I/O)│
 └──────▲───────┘                         └──────────┬───────────┘
        │ stack খালি হলে                             │ কাজ শেষ হলে callback
        │                                            ▼
 ┌──────┴───────────────┐  আগে সব ──►  ┌───────────────────────────┐
 │ Microtask queue      │              │ Task queue                │
 │ Promise.then, await, │  তারপর একটি ►│ setTimeout, click, message│
 │ queueMicrotask       │              └───────────────────────────┘
 └──────────────────────┘
 প্রতি ঘূর্ণন: একটি task → microtask queue পুরো খালি → (দরকার হলে) render

console.log('1: sync শুরু');
setTimeout(() => console.log('8: setTimeout — task'), 0);
Promise.resolve()
  .then(() => console.log('4: then ১ — microtask'))
  .then(() => console.log('7: then ২ — microtask'));
queueMicrotask(() => console.log('5: queueMicrotask'));
(async () => {
  console.log('2: async function-এর শুরু — এখনো sync');
  await null;
  console.log('6: await-এর পরের অংশ — microtask');
})();
console.log('3: sync শেষ, stack খালি হলো');

ঝালিয়ে নিন: পর্ব ৩১ · event loop, পর্ব ০৫ · call stack

একটি async কাজের পর আরেকটি, তারপর আরেকটি — প্রতিটি আগেরটির callback-এর ভেতরে লিখলে কোড ডানে সরতে থাকে (“pyramid of doom”), প্রতিটি স্তরে আলাদা error পরীক্ষা লাগে, আর কে কখন callback ডাকবে তার নিয়ন্ত্রণ অন্যের হাতে চলে যায় (inversion of control) — একে বলে callback hell. বিবর্তন: named function-এ ভাগ করা → Promise (ES2015) দিয়ে .then chain, একটি .catch-এ সব error → async/await (ES2017) দিয়ে প্রায় synchronous চেহারার কোড, সাধারণ try/catch. Node-এর error-first callback API-কে util.promisify বা fs/promises দিয়ে Promise-এ আনা যায়।

ঝালিয়ে নিন: পর্ব ৩২ · callback hell

একটি Promise প্রথমে pending; তারপর একবারই fulfilled (মান নিয়ে) বা rejected (কারণ নিয়ে) হয় — দুটিকে একসাথে বলে settled. একবার settled হলে আর বদলায় না।

সতর্কতা: Promise.all reject হলেও বাকি কাজগুলো থামে না — শুধু তাদের ফল উপেক্ষিত হয়; থামাতে AbortController লাগে। খালি array পেলে all ও allSettled সাথে সাথে [] দেয়, any সাথে সাথে AggregateError-এ reject হয়, আর race চিরকাল pending থাকে।

ঝালিয়ে নিন: পর্ব ৩৩ · Promise আর combinator

চুক্তি: iterable নেয়; সব fulfilled হলে মানের array — ইনপুটের ক্রমে, শেষ হওয়ার ক্রমে নয়; প্রথম rejection-এ reject; সাধারণ মান (Promise নয়) এলে তাকে fulfilled ধরা; খালি ইনপুটে সাথে সাথে []. পদ্ধতি: একটি নতুন Promise ফেরত দিই; প্রতিটি উপাদানকে Promise.resolve দিয়ে মুড়ে then লাগাই; ফল রাখি তার সূচকে; একটি counter দিয়ে গুনি কয়টি বাকি।

function promiseAll(iterable) {
  return new Promise((resolve, reject) => {
    const items = Array.from(iterable);
    const results = new Array(items.length);
    let left = items.length;
    if (left === 0) return resolve(results);       // খালি ইনপুট: সাথে সাথে []
    items.forEach((item, i) => {
      Promise.resolve(item).then(value => {        // সাধারণ মানও চলবে
        results[i] = value;                        // ক্রম ঠিক রাখে সূচক, সময় নয়
        if (--left === 0) resolve(results);
      }, reject);                                  // প্রথম ব্যর্থতাতেই reject
    });
  });
}
const wait = (ms, v, fail) =>
  new Promise((res, rej) => setTimeout(() => (fail ? rej(new Error(v)) : res(v)), ms));

promiseAll([wait(60, 'ক'), 42, wait(10, 'খ')]).then(r => console.log('all:', r));
promiseAll([wait(40, 'ok'), wait(5, 'নেটওয়ার্ক বিকল', true)])
  .catch(e => console.log('rejected:', e.message));
promiseAll([]).then(r => console.log('empty:', r));
Promise.allSettled([wait(20, 'x'), wait(25, 'y', true)])
  .then(r => console.log('allSettled:', r.map(s => s.status)));

ঝালিয়ে নিন: পর্ব ৩৩

async function (ES2017) সবসময় একটি Promise ফেরত দেয়; ভেতরে await একটি Promise settled হওয়া পর্যন্ত শুধু ওই function-কে থামায় — thread নয়, বাকি পাতা চলতে থাকে। rejected হলে await সেই কারণ ছুড়ে দেয়, তাই সাধারণ try/catch কাজ করে।

// sequential: মোট সময় ≈ a + b — শুধু তখনই, যখন b-এর জন্য a-এর ফল লাগে
const user = await getUser(id);
const orders = await getOrders(user.id);

// parallel: মোট সময় ≈ max(a, b) — একে অপরের ওপর নির্ভর না করলে
const [products, offers] = await Promise.all([getProducts(), getOffers()]);

ফাঁদ: forEach-এর ভেতরে await অপেক্ষা করে না — for…of (একটি একটি করে) বা Promise.all + map (একসাথে) ব্যবহার করুন। catch ছাড়া rejected Promise হলো unhandled rejection; Node 15 থেকে ডিফল্টে এতে process বন্ধ হয়ে যায়। Module-এ top-level await চলে (ES2022).

ঝালিয়ে নিন: পর্ব ৩৪ · async/await

না। fetch reject করে শুধু নেটওয়ার্ক ব্যর্থ হলে (সংযোগ নেই, DNS ব্যর্থ, CORS আটকালে) বা abort হলে। সার্ভার যেকোনো উত্তর দিলেই — 404, 500-সহ — Promise fulfilled হয়; তখন res.ok (status 200–299) নিজে পরীক্ষা করতে হয়।

async function getJSON(url, { signal } = {}) {
  const res = await fetch(url, { signal, headers: { Accept: 'application/json' } });
  if (!res.ok) throw new Error(`HTTP ${res.status} — ${url}`);
  return res.json();                 // এটিও Promise; ভুল JSON-এ SyntaxError
}

আরও লিখুন: body একবারই পড়া যায় (res.json() দুবার ডাকলে TypeError); POST-এ JSON.stringify আর Content-Type: application/json header লাগে; fetch নিজে কোনো timeout দেয় না — AbortSignal.timeout(5000) দিন।

ঝালিয়ে নিন: পর্ব ৩৫ · fetch আর HTTP

debounce: ঘটনা থামার পর নির্দিষ্ট সময় চুপ থাকলে তবেই একবার চালায় — শেষ ঘটনাটি গোনে। উদাহরণ: search box-এ টাইপ থামার পরে API call. throttle: ঘটনা যত ঘন ঘনই আসুক, নির্দিষ্ট সময়ে সর্বোচ্চ একবার চালায় — নিয়মিত বিরতিতে। উদাহরণ: scroll-এর সময় অবস্থান হালনাগাদ। লিফটের উপমা: debounce হলো দরজা — কেউ ঢুকলে আবার অপেক্ষা শুরু; throttle হলো মেট্রোর সময়সূচি — যত যাত্রীই আসুক, নির্দিষ্ট বিরতিতে একটি ট্রেন।

function debounce(fn, wait) {
  let timer;
  return function (...args) {
    clearTimeout(timer);                              // আগের অপেক্ষা বাতিল
    timer = setTimeout(() => fn.apply(this, args), wait);
  };
}
const search = debounce(q => console.log('API call:', q), 150);

// ব্যবহারকারী দ্রুত টাইপ করছেন: প্রতি ৩০ ms-এ একটি করে অক্ষর
['d', 'dh', 'dha', 'dhak', 'dhaka'].forEach((q, i) => setTimeout(() => search(q), i * 30));
// একটু থেমে আবার টাইপ
setTimeout(() => search('sylhet'), 600);

ঝালিয়ে নিন: পর্ব ৩৬ · debounce আর throttle

AbortController একটি async কাজ বাতিলের সংকেত দেয়: const ac = new AbortController(); fetch(url, { signal: ac.signal }); ac.abort(); — fetch তখন AbortError নামের DOMException দিয়ে reject করে। ব্যবহার: পাতা বদলালে পুরোনো অনুরোধ বাতিল, timeout (AbortSignal.timeout(ms)), নতুন search এলে পুরোনোটি বাতিল। একই signal দিয়ে event listener-ও একসাথে সরানো যায়।

retry নীতি: (১) শুধু সাময়িক ব্যর্থতায় — নেটওয়ার্ক ভাঙা, 503, 429; 400 বা 404-এ নয়। (২) শুধু idempotent অনুরোধে (GET, PUT, DELETE), অথবা POST-এ idempotency key থাকলে — নইলে দুবার অর্ডার বা দুবার টাকা কাটা। (৩) exponential backoff — অপেক্ষা ২০০, ৪০০, ৮০০ ms… — সাথে এলোমেলো jitter, যাতে হাজার client একসাথে আবার আঘাত না করে। (৪) সর্বোচ্চ চেষ্টার সীমা, আর Retry-After header মানা। (৫) ব্যবহারকারী বাতিল করলে retry-ও থামানো (signal পরীক্ষা)।

ঝালিয়ে নিন: পর্ব ৩৬ · AbortController আর retry

সংজ্ঞা: DOM (Document Object Model) হলো ব্রাউজারের বানানো HTML পাতার জীবন্ত গাছ-আকৃতির object মডেল — প্রতিটি element, লেখা আর attribute একটি node. JavaScript এই গাছ পড়ে আর বদলায়, আর ব্রাউজার বদল দেখে পাতা নতুন করে আঁকে। DOM JavaScript-এর অংশ নয়; এটি ব্রাউজারের Web API (Node.js-এ নেই)।

উপসংহার: ব্যবহারকারীর দেওয়া লেখা দেখাতে textContent; কাঠামো বানাতে createElement বা <template>; HTML সত্যিই লাগলে আগে sanitize (যেমন DOMPurify).

ঝালিয়ে নিন: পর্ব ৩৭ · DOM, পর্ব ০২

একটি click হলে event তিন ধাপে চলে: capture — window থেকে নেমে target-এর দিকে; target — যে element-এ ঘটেছে; bubble — target থেকে আবার উপরে window পর্যন্ত। addEventListener-এর তৃতীয় আর্গুমেন্ট true (বা {capture: true}) দিলে listener capture ধাপে চলে, নইলে bubble ধাপে।

          window ──────────────────────────► window
            │  ১ capture (নামা)            ▲  ৩ bubble (ওঠা)
          document                       document
            │                              ▲
          div#outer                      div#outer
            │                              ▲
            └──────► button#buy ───────────┘
                     ২ target

const outer = document.getElementById('outer');
const btn = document.getElementById('buy');
document.addEventListener('click', () => console.log('1 document — capture'), { capture: true, once: true });
outer.addEventListener('click', () => console.log('2 div — capture'), true);
btn.addEventListener('click', e => console.log('3 button — target, eventPhase =', e.eventPhase));
outer.addEventListener('click', e =>
  console.log('4 div — bubble · target =', e.target.id, '· currentTarget =', e.currentTarget.id));
document.addEventListener('click', () => console.log('5 document — bubble'), { once: true });
btn.click();

// delegation: পুরো তালিকার জন্য একটিই listener — পরে যোগ হওয়া বোতামেও কাজ করে
const menu = document.getElementById('menu');
menu.addEventListener('click', e => {
  const b = e.target.closest('button[data-item]');
  if (b && menu.contains(b)) console.log('অর্ডার:', b.dataset.item);
});
menu.insertAdjacentHTML('beforeend', '<li><button type="button" data-item="সিঙ্গারা">সিঙ্গারা</button></li>');
menu.querySelectorAll('button')[1].click();

ঝালিয়ে নিন: পর্ব ৩৮ · bubbling আর delegation

IndexedDB: বড়, গঠনযুক্ত ডেটা (object, Blob), index দিয়ে খোঁজা, transaction, asynchronous API — অফলাইন অ্যাপ বা হাজার রেকর্ডের জন্য। নিরাপত্তার নিয়ম: login token localStorage-এ রাখলে XSS হলে যেকোনো script তা চুরি করতে পারে; সেশনের জন্য HttpOnly; Secure; SameSite cookie ভালো। পছন্দের থিম বা খসড়ার মতো ক্ষতিহীন ডেটা localStorage-এ ঠিক আছে — সবসময় try/catch-এ, কারণ private mode বা ভরা storage-এ error আসতে পারে।

ঝালিয়ে নিন: পর্ব ৪০ · localStorage, cookie আর IndexedDB

client-side validation (required, type="email", pattern, Constraint Validation API, নিজের JavaScript) ব্যবহারকারীর সুবিধার জন্য — সাথে সাথে বার্তা, অপ্রয়োজনীয় request কম। কিন্তু এটি নিরাপত্তা নয়: কেউ DevTools-এ JavaScript বন্ধ করে, HTML বদলে, বা curl দিয়ে সরাসরি API ডেকে সব এড়াতে পারে। তাই server-side validation বাধ্যতামূলক — দাম, পরিমাণ, অনুমতি সার্ভারেই আবার যাচাই হবে, আর দাম কখনো client থেকে নেওয়া হবে না। নিয়মটি মনে রাখুন: “client-কে বিশ্বাস নয়; client-এর যাচাই শুধু UX”.

ঝালিয়ে নিন: পর্ব ৩৯ · form আর validation

সংজ্ঞা: XSS (cross-site scripting) হলো আক্রমণকারীর দেওয়া লেখা পাতায় script হিসেবে চলে যাওয়া — তখন সেটি ব্যবহারকারীর নামে যা খুশি করতে পারে (ডেটা পড়া, request পাঠানো)। ধরন: stored (ডেটাবেসে রাখা মন্তব্য সবার পাতায় চলে), reflected (URL-এর অংশ সার্ভার উত্তরে ফিরিয়ে দেয়), DOM-based (ব্রাউজারের JavaScript নিজেই location.hash-এর মতো উৎস থেকে innerHTML-এ লেখে)।

প্রতিরোধ (স্তরে স্তরে): (১) ব্যবহারকারীর লেখা textContent দিয়ে বসানো, বা প্রসঙ্গ অনুযায়ী escape — framework (React, Vue) এটি ডিফল্টে করে, যতক্ষণ না আপনি dangerouslySetInnerHTML বা v-html ব্যবহার করেন; (২) HTML সত্যিই লাগলে sanitize; (৩) CSP (Content-Security-Policy header) — কোন উৎসের script চলতে পারবে তা ব্রাউজারকে বলে দেয়, inline script ডিফল্টে আটকায়; কোনো ফাঁক থেকে গেলেও ক্ষতি সীমিত করে; (৪) session cookie HttpOnly, যাতে script পড়তে না পারে। উপসংহার: CSP দ্বিতীয় দেয়াল, প্রথম দেয়াল সঠিক output encoding.

ঝালিয়ে নিন: পর্ব ৪৩ · XSS আর CSP

পটভূমি: same-origin policy অনুযায়ী এক origin-এর (scheme + host + port) পাতার JavaScript অন্য origin-এর উত্তর পড়তে পারে না। CORS হলো সার্ভারের পক্ষ থেকে নিয়ন্ত্রিত ছাড় — উত্তরে Access-Control-Allow-Origin header দিয়ে সার্ভার বলে “এই origin আমার উত্তর পড়তে পারবে”। “সাধারণ” নয় এমন request-এ (যেমন PUT/DELETE, Content-Type: application/json, বা Authorization-এর মতো নিজের header) ব্রাউজার আগে একটি preflight পাঠায়:

 ব্রাউজার (https://shop.example)              API (https://api.example)
   │ ১ OPTIONS /orders                            │
   │   Origin: https://shop.example               │
   │   Access-Control-Request-Method: PUT         │
   │   Access-Control-Request-Headers: content-type│
   │ ────────────────────────────────────────────►│
   │ ২ 204                                        │
   │   Access-Control-Allow-Origin: https://shop.example
   │   Access-Control-Allow-Methods: GET, PUT     │
   │   Access-Control-Allow-Headers: content-type │
   │   Access-Control-Max-Age: 600                │
   │ ◄────────────────────────────────────────────│
   │ ৩ আসল PUT /orders (অনুমতি মিললে)             │
   │ ────────────────────────────────────────────►│
   │ ৪ 200 + Access-Control-Allow-Origin          │
   │ ◄──────────────────────────────────────────── │  → JavaScript উত্তর পড়তে পারে

মূল কথাগুলো: “simple request” (GET/HEAD/POST, সাধারণ header, আর form বা text/plain ধরনের Content-Type) preflight ছাড়াই যায়। cookie পাঠাতে credentials: 'include' দিলে সার্ভারকে Access-Control-Allow-Credentials: true আর নির্দিষ্ট origin দিতে হয় — * চলবে না। Max-Age preflight-এর ফল কিছুক্ষণ মনে রাখে। ভুল ধারণা: CORS সার্ভারকে রক্ষা করে না — এটি ব্রাউজার প্রয়োগ করে; curl বা অন্য সার্ভার সরাসরি API ডাকতে পারে। তাই authentication আর authorization আলাদা করে লাগবেই। CORS error সারাতে হয় সার্ভারের header ঠিক করে, client-এ mode: 'no-cors' দিয়ে নয় (তাতে উত্তর পড়াই যায় না)।

ঝালিয়ে নিন: পর্ব ৪৩ · CORS, পর্ব ৩৫

JavaScript-এর কোড একটি thread-এ চলে (main thread), কিন্তু ব্রাউজার নিজে বহু thread আর process ব্যবহার করে (নেটওয়ার্ক, rendering; Chrome-এর মতো ব্রাউজারে সাধারণত প্রতিটি সাইট আলাদা process-এ)। Web Worker একটি আলাদা thread-এ আলাদা JavaScript পরিবেশ চালায় — নিজের event loop, কিন্তু DOM নেই; main thread-এর সাথে কথা হয় postMessage-এ (ডেটা কপি হয় structured clone দিয়ে, বা transfer হয়)। ভারী হিসাব (ছবি প্রক্রিয়া, বড় CSV) worker-এ দিলে পাতা জমে না। Node-এ সমতুল্য: worker_threads; আলাদা process চাইলে child_process.

ঝালিয়ে নিন: পর্ব ৪২ · Web Worker, পর্ব ৪৯ · process

service worker হলো পাতা আর নেটওয়ার্কের মাঝখানে বসা একটি বিশেষ worker script — পাতার fetch request ধরে নিজের নিয়মে উত্তর দিতে পারে (cache থেকে, নেটওয়ার্ক থেকে, বা দুটি মিলিয়ে)। পাতা বন্ধ থাকলেও push বা background sync-এর জন্য জাগতে পারে। শুধু HTTPS-এ চলে (localhost ব্যতিক্রম); জীবনচক্র: register → install (precache) → activate (পুরোনো cache মোছা) → fetch ধরা।

কৌশল: cache-first — আগে cache, না পেলে নেটওয়ার্ক; দ্রুত আর অফলাইনে চলে, কিন্তু পুরোনো ডেটা দেখাতে পারে — ফন্ট, লোগো, version-যুক্ত CSS/JS-এর জন্য। network-first — আগে নেটওয়ার্ক, ব্যর্থ হলে cache; সবসময় সর্বশেষ ডেটা, ধীর নেটওয়ার্কে দেরি — দাম, অর্ডারের অবস্থার জন্য। stale-while-revalidate — cache থেকে সাথে সাথে দেখায়, পেছনে নেটওয়ার্ক থেকে হালনাগাদ করে রাখে। ভুল কৌশলের বিপদ: পুরোনো service worker পুরোনো অ্যাপ আটকে রাখতে পারে — তাই cache-এর নামে version রাখুন।

ঝালিয়ে নিন: পর্ব ৪৪ · PWA আর service worker

CSRF (cross-site request forgery): ব্রাউজার cookie নিজে থেকে request-এর সাথে জুড়ে দেয়, request অন্য সাইটের পাতা থেকে শুরু হলেও। তাই আপনি ব্যাংকে লগইন থাকা অবস্থায় একটি খারাপ সাইট লুকানো form দিয়ে ব্যাংকে “টাকা পাঠাও” POST পাঠালে, সেটি আপনার cookie নিয়েই যায়। প্রতিরোধ: session cookie-তে SameSite=Lax বা Strict — অন্য সাইট থেকে শুরু হওয়া POST-এ cookie যায় না (আধুনিক Chromium ব্রাউজারে SameSite না দিলে Lax ধরা হয়); অবস্থা বদলানো কাজ কখনো GET-এ নয়; দরকার হলে CSRF token; আর সার্ভারে Origin header যাচাই। token যদি Authorization header-এ যায় (cookie-তে নয়), ব্রাউজার তা নিজে জোড়ে না, তাই CSRF-এর ঝুঁকি থাকে না — কিন্তু তখন token রাখার জায়গা XSS থেকে বাঁচাতে হয়।

ঝালিয়ে নিন: পর্ব ৪৩ · CSRF, পর্ব ৪০ · cookie attribute

ESM ES2015-এ মানদণ্ডে এসেছে; CommonJS এসেছিল Node-এর শুরুর দিনে, যখন ভাষায় কোনো module ছিল না। ESM-এ __dirname নেই — import.meta.url (নতুন Node-এ import.meta.dirname). নতুন প্রজেক্টে ESM ডিফল্ট ধরুন।

ঝালিয়ে নিন: পর্ব ৪৫ · ESM বনাম CommonJS

dependencies — অ্যাপ চালাতে যা লাগে (express, zod). devDependencies — শুধু বানাতে ও পরীক্ষায় (vitest, eslint, vite, typescript). semver: MAJOR.MINOR.PATCH — MAJOR-এ ভাঙা পরিবর্তন, MINOR-এ নতুন সুবিধা, PATCH-এ bug fix. ^1.4.2 মানে ≥1.4.2 কিন্তু <2.0.0; ~1.4.2 মানে ≥1.4.2 কিন্তু <1.5.0. (০.x-এ ^0.4.2 মানে <0.5.0.)

lockfile (package-lock.json) প্রতিটি প্যাকেজের — পরোক্ষগুলোরও — ঠিক কোন সংস্করণ বসেছে তা লিখে রাখে। commit করলে সবার যন্ত্রে আর CI-তে হুবহু একই গাছ বসে (npm ci), “আমার মেশিনে চলে” সমস্যা কমে, আর হঠাৎ কোনো দূষিত নতুন সংস্করণ নিজে থেকে ঢুকে পড়ে না।

ঝালিয়ে নিন: পর্ব ৪৬ · npm, Vite, ESLint

TypeScript হলো JavaScript-এর ওপর static type যোগ করা একটি superset; type-checker কোড চালানোর আগে ভুল ধরে — ভুল property-র নাম, undefined হতে পারে এমন মান, ভুল আর্গুমেন্ট। বড় কোডবেসে refactor নিরাপদ হয়, editor-এ ভালো autocomplete আসে। কিন্তু type রানটাইমে থাকে না — compile-এর পর মুছে যায় (type erasure). তাই API থেকে আসা ডেটা TypeScript নিজে যাচাই করে না; সেখানে zod-এর মতো রানটাইম যাচাই লাগে।

any type-checking বন্ধ করে দেয় — যা খুশি করা যায়, ভুলও। unknown মানে “কী জানি না” — ব্যবহারের আগে typeof, instanceof বা যাচাই দিয়ে টাইপ সংকুচিত (narrow) করতে হয়। তাই বাইরের ডেটা আর catch (e)-এর জন্য unknown নিরাপদ পছন্দ।

ঝালিয়ে নিন: পর্ব ৪৭ · TypeScript-এর শুরু

unit test একটি ছোট অংশ (একটি function) আলাদা করে পরীক্ষা করে — দ্রুত, অনেকগুলো; যেমন calcTotal(cart). integration test কয়েকটি অংশ একসাথে — যেমন Express route + আসল test ডেটাবেস (supertest দিয়ে)। end-to-end test আসল ব্রাউজারে ব্যবহারকারীর মতো পুরো পথ — যেমন Playwright দিয়ে “লগইন → কার্টে যোগ → অর্ডার”; সবচেয়ে বাস্তব, কিন্তু ধীর আর মাঝে মাঝে অস্থির (flaky). প্রচলিত পরামর্শ: অনেক unit, তার চেয়ে কম integration, অল্প কয়েকটি গুরুত্বপূর্ণ e2e (testing pyramid). এই কোর্সে Vitest আর Playwright দেখানো হয়েছে।

ঝালিয়ে নিন: পর্ব ৪৮ · Vitest আর Playwright

Node-এ আপনার JavaScript একটি thread-এ চলে, কিন্তু I/O-এর অপেক্ষা সে নিজে করে না। নেটওয়ার্কের কাজ OS-এর asynchronous ব্যবস্থায় (Linux-এ epoll, macOS-এ kqueue, Windows-এ IOCP) দেওয়া হয়; ফাইল, dns.lookup, crypto-র কিছু কাজ আর zlib যায় libuv-এর thread pool-এ (ডিফল্ট ৪টি thread, UV_THREADPOOL_SIZE দিয়ে বদলানো যায়)। কাজ শেষ হলে callback event loop-এর সারিতে আসে। একটি request ডেটাবেসের উত্তরের অপেক্ষায় থাকার সময় thread অন্য request সামলায় — রান্নাঘরে একজন বাবুর্চি, কিন্তু চুলা অনেক।

কখন আটকায়: CPU-ভারী synchronous কাজে — বড় JSON parse, ছবি বা PDF বানানো, জটিল regex (ReDoS), readFileSync, লম্বা লুপ। তখন সব request অপেক্ষা করে। সমাধান: কাজ ছোট টুকরোয় ভাগ, worker_threads, আলাদা সার্ভিস বা queue, আর একাধিক process (cluster বা কয়েকটি instance + load balancer). মাপার উপায়: event loop lag পর্যবেক্ষণ।

ঝালিয়ে নিন: পর্ব ৪৯ · Node.js, পর্ব ৩১, পর্ব ৪২

পদ্ধতি: EventEmitter হলো observer pattern: event-এর নাম থেকে listener-এর তালিকার একটি Map. on তালিকায় যোগ করে, off সরায়, emit সবাইকে ক্রমে ডাকে আর listener ছিল কি না ফেরত দেয়। once একটি মোড়ক বসায়, যা প্রথমবার চলেই নিজেকে সরিয়ে নেয়।

const { EventEmitter } = require('node:events');
class MiniEmitter {
  #handlers = new Map();                               // event-এর নাম → listener-এর তালিকা
  on(evt, fn) {
    if (!this.#handlers.has(evt)) this.#handlers.set(evt, []);
    this.#handlers.get(evt).push(fn);
    return this;                                       // chaining-এর জন্য
  }
  off(evt, fn) {
    const list = this.#handlers.get(evt) ?? [];
    this.#handlers.set(evt, list.filter(h => h !== fn && h.orig !== fn));
    return this;
  }
  once(evt, fn) {
    const wrapper = (...args) => { this.off(evt, wrapper); fn(...args); };
    wrapper.orig = fn;                                 // off(evt, fn) দিয়েও সরানো যাবে
    return this.on(evt, wrapper);
  }
  emit(evt, ...args) {
    const list = this.#handlers.get(evt) ?? [];
    for (const h of [...list]) h(...args);             // কপির ওপর লুপ: চলার মাঝে তালিকা বদলালেও নিরাপদ
    return list.length > 0;
  }
}
for (const E of [MiniEmitter, EventEmitter]) {
  const shop = new E();
  const log = id => console.log(`${E.name}: order ${id}`);
  shop.on('order', log).once('order', id => console.log(`${E.name}: first-order bonus ${id}`));
  console.log(shop.emit('order', 101), shop.emit('order', 102));
  shop.off('order', log);
  console.log(shop.emit('order', 103));
}

ঝালিয়ে নিন: পর্ব ৪৯, পর্ব ৩২, পর্ব ৩৮ · custom event

সংজ্ঞা: middleware হলো (req, res, next) আকারের function, যা একটি সারিতে সাজানো থাকে। প্রতিটি হয় উত্তর দিয়ে শেষ করে (res.json(…)), নয়তো next() ডেকে পরেরটিকে দেয়। next(err) ডাকলে বাকি সাধারণ middleware বাদ দিয়ে সরাসরি error middleware-এ যায় — Express-এ যার চারটি parameter: (err, req, res, next).

 request ─► [logger] ─► [json parser] ─► [auth] ─► [validate] ─► [route handler] ─► response
                                           │ token নেই                 │ next(err)
                                           ▼                           ▼
                                       401 response              [error middleware] ─► 500

নিচে Express ছাড়া, Node-এর http module দিয়ে একই ব্যবস্থার ছোট নকল — আসল সার্ভার, আসল request:

const http = require('node:http');
const stack = [];                                      // Express-এর app.use()-এর ছোট নকল
const use = fn => stack.push(fn);
use((req, res, next) => { console.log('  [1] logger:', req.method, req.url); next(); });
use((req, res, next) => {
  if (req.headers.authorization !== 'Bearer demo') return res.writeHead(401).end('token নেই'); // next() নয়
  console.log('  [2] auth: ঠিক আছে'); next();
});
use((req, res, next) => (req.url === '/boom' ? next(new Error('DB বন্ধ')) : next()));
use((req, res) => {
  console.log('  [3] route handler');
  res.writeHead(200, { 'Content-Type': 'application/json' }).end(JSON.stringify({ ok: true }));
});
const onError = (err, req, res) => {
  console.log('  [E] error middleware:', err.message);
  res.writeHead(500).end('সার্ভারে সমস্যা');
};
const server = http.createServer((req, res) => {
  let i = 0;
  (function next(err) { err ? onError(err, req, res) : stack[i++]?.(req, res, next); })();
});
const get = (path, headers) => new Promise(done => {
  http.get({ host: '127.0.0.1', port: server.address().port, path, headers }, res => {
    let body = '';
    res.setEncoding('utf8').on('data', c => (body += c)).on('end', () => done(`${res.statusCode} ${body}`));
  });
});
server.listen(0, '127.0.0.1', async () => {
  for (const [path, auth] of [['/products', 'Bearer demo'], ['/products', ''], ['/boom', 'Bearer demo']]) {
    console.log('GET', path, auth ? '(token সহ)' : '(token ছাড়া)');
    console.log('  ->', await get(path, auth ? { authorization: auth } : {}));
  }
  server.close();
});

ঝালিয়ে নিন: পর্ব ৫০ · Express দিয়ে REST API, পর্ব ৪৯

REST-এর নিয়ম: GET পড়া (নিরাপদ, idempotent), POST নতুন তৈরি (idempotent নয়), PUT পুরোটা বদল (idempotent), PATCH আংশিক বদল, DELETE মোছা (idempotent). status code: 200 ঠিক আছে, 201 তৈরি হলো (সাথে Location), 204 উত্তরে কিছু নেই, 400 ভুল অনুরোধ, 401 পরিচয় নেই, 403 অনুমতি নেই, 404 পাওয়া যায়নি, 409 সংঘর্ষ (যেমন স্টক শেষ), 422 যাচাই ব্যর্থ, 429 খুব বেশি অনুরোধ, 500 সার্ভারের ভুল। উপসংহার: ছোট-মাঝারি API আর সর্বজনীন API-তে REST সহজ; অনেক ধরনের client আর জটিল nested ডেটায় GraphQL সুবিধা দেয়।

ঝালিয়ে নিন: পর্ব ৫০, পর্ব ৩৫

SQL injection: ব্যবহারকারীর ইনপুট string জোড়া দিয়ে SQL বানালে ইনপুটটিই SQL-এর অংশ হয়ে যায়। `SELECT * FROM users WHERE email = '${email}'`-এ কেউ ' OR '1'='1 দিলে শর্ত সবসময় সত্য। parameterized query-তে SQL আর মান আলাদা যায় — db.query('SELECT * FROM users WHERE email = $1', [email]) — ডেটাবেস মানকে কখনো SQL হিসেবে পড়ে না। সীমা: table বা column-এর নাম parameter দিয়ে দেওয়া যায় না — সেগুলো allowlist থেকে বাছুন। ORM বা query builder সাধারণত নিজে parameter ব্যবহার করে, কিন্তু raw query-তে আবার দায় আপনার।

transaction: কয়েকটি কাজ একসাথে — হয় সব হবে, নয় কিছুই না (অর্ডার তৈরি + স্টক কমানো)। ACID: Atomicity (সব বা কিছু না), Consistency (নিয়ম ভাঙে না), Isolation (একসাথে চলা transaction একে অপরকে বিভ্রান্ত করে না), Durability (commit হলে বিদ্যুৎ গেলেও থাকে)।

ঝালিয়ে নিন: পর্ব ৫২ · Node.js আর ডেটাবেস

polling: client কিছুক্ষণ পরপর জিজ্ঞেস করে “নতুন কিছু?” — সহজ, কিন্তু বেশিরভাগ request খালি আর দেরি থাকে। SSE (EventSource): সার্ভার থেকে client-এ একমুখী ধারা, সাধারণ HTTP-র ওপর; সংযোগ ভাঙলে ব্রাউজার নিজেই আবার যোগ করে (Last-Event-ID দিয়ে)। শুধু লেখা (text) পাঠায়। অর্ডারের অবস্থা, নোটিফিকেশন, লাইভ স্কোরের জন্য যথেষ্ট — ক্যাপস্টোনে অর্ডারের লাইভ অবস্থা SSE-তে। WebSocket: একটি দীর্ঘস্থায়ী দুমুখী (full-duplex) সংযোগ, HTTP থেকে upgrade করে; text ও binary — চ্যাট, যৌথ সম্পাদনা, multiplayer গেম। খরচ: সংযোগ ধরে রাখা, পুনঃসংযোগ, heartbeat আর একাধিক সার্ভারে ছড়ানোর ব্যবস্থা নিজেকে করতে হয়। নিয়ম: সার্ভার থেকে শুধু পাঠানো → SSE; দুই দিক থেকে ঘন ঘন → WebSocket; খুব বিরল হালনাগাদ → polling-ই যথেষ্ট।

ঝালিয়ে নিন: পর্ব ৫১ · WebSocket আর SSE

garbage collector শুধু সেই object মোছে, যাতে root (global, stack) থেকে আর পৌঁছানো যায় না। memory leak মানে অপ্রয়োজনীয় object কোনো এক reference-এর কারণে পৌঁছানো যায় — তাই মুছতে পারে না। সাধারণ উৎস: (১) সরানো হয়নি এমন event listener বা setInterval, যার closure বড় ডেটা ধরে আছে; (২) চিরকাল বাড়তে থাকা cache বা global array/Map; (৩) DOM থেকে সরানো, কিন্তু JavaScript-এর variable-এ রাখা node (detached DOM); (৪) SPA-তে পাতা বদলের পরও চলতে থাকা subscription (WebSocket, observer). খোঁজা: DevTools-এর Memory প্যানেলে একই কাজ কয়েকবার করে heap snapshot নিন, তুলনা করুন — যে object বাড়তেই থাকে তার retaining path দেখায় কে তাকে ধরে আছে। প্রতিরোধ: removeEventListener বা AbortController-এর signal, আকার-সীমিত cache, WeakMap.

ঝালিয়ে নিন: পর্ব ৫৩ · memory leak আর DevTools

SSG (static site generation): build-এর সময়ই HTML বানিয়ে রাখা — সবচেয়ে দ্রুত আর সস্তা, কিন্তু ডেটা বদলালে আবার build লাগে (ব্লগ, ডকুমেন্টেশন)। hydration: SSR বা SSG-এর HTML ব্রাউজারে পৌঁছানোর পর framework-এর JavaScript সেই HTML-এ event listener আর state জুড়ে তাকে interactive করে। খরচ: লেখা দেখা যায়, কিন্তু hydration শেষ না হওয়া পর্যন্ত বোতাম কাজ নাও করতে পারে — তাই islands বা streaming SSR-এর মতো কৌশল এসেছে। বাস্তবে আধুনিক meta-framework একই অ্যাপে পাতাভেদে কৌশল মেশায়।

ঝালিয়ে নিন: পর্ব ৫৪ · React, Vue, Svelte, পর্ব ০২

তিন অংশ: এখন — “আমি JavaScript দিয়ে web অ্যাপ বানাই, মূলত front end, Node-এ ছোট API-ও লিখেছি।” প্রমাণ — একটি প্রজেক্ট আর তার একটি সংখ্যা বা ফল (“দোকানঘর: ৭টি মাইলস্টোন, টেস্ট ও CI-সহ deploy করা”)। সামনে — এই পদের সাথে মিল (“আপনাদের দলে আসল ব্যবহারকারীর জন্য পণ্য বানাতে চাই”)। জীবনী নয়, সিভি পড়ে শোনানো নয়।

একটি সত্যিকারের কারণ, একটি টেকনিক্যাল যুক্তি: “ব্যবহারকারী সাথে সাথে ফল দেখেন, সেটা আমাকে টানে; আর এক ভাষায় ব্রাউজার, সার্ভার, এমনকি মোবাইলেও কাজ করা যায়।” সাথে সীমাও স্বীকার করুন — “dynamic typing-এর ঝুঁকির জন্য TypeScript শিখছি” — এতে পরিপক্বতা বোঝা যায়।

STAR মেনে: লক্ষণ (“search-এ মাঝে মাঝে পুরোনো ফল দেখাত”), কীভাবে পুনরুৎপাদন করলেন (Network প্যানেলে throttling), কারণ (ধীর পুরোনো উত্তর নতুনটির পরে আসছিল — race condition), সমাধান (debounce + AbortController দিয়ে পুরোনো অনুরোধ বাতিল), আর শিক্ষা (এখন async UI-তে প্রথমেই এই প্রশ্ন করি)। প্রমাণভিত্তিক debugging-এর পদ্ধতি দেখানোই এখানে আসল।

একটি পদ্ধতি বলুন: অফিসিয়াল ডকুমেন্টেশন আর tutorial → একটি ছোট নিজের প্রজেক্ট → যে অংশ বুঝিনি তার মূল ধারণায় ফেরা (React শিখতে গিয়ে closure আর immutable update). যোগ করুন, ভাষার ভিত্তি — event loop, closure, HTTP — বদলায় না, তাই নতুন framework দ্রুত ধরা যায়। সাম্প্রতিক একটি উদাহরণ দিলে উত্তর বিশ্বাসযোগ্য হয়।

সৎ ও দায়িত্বশীল উত্তর: “কাঠামো, টেস্টের খসড়া, অপরিচিত API বুঝতে ব্যবহার করি; কিন্তু প্রতিটি লাইন পড়ি, চালাই, টেস্ট দিয়ে যাচাই করি, আর কোনো secret বা গ্রাহকের ডেটা দিই না। প্রতিষ্ঠানের নীতি থাকলে সেটাই মানি।” একটি উদাহরণ দিন যেখানে AI ভুল করেছিল আর আপনি ধরেছেন — যেমন সন্দেহজনক বা অস্তিত্বহীন npm প্যাকেজের নাম প্রস্তাব করা।

ভারসাম্যের উত্তর: আগে দলকে জানানো — কী সময়ে হবে, কী বাদ দিলে হবে। নিরাপত্তা, ডেটার সঠিকতা আর টেস্ট-ছাড়া টাকার হিসাব — এগুলোতে আপস নয়। সৌন্দর্যের refactor পরে করা যায়, কিন্তু সেটা লিখিত “technical debt” হিসেবে ticket-এ রাখি, যাতে হারিয়ে না যায়।

সমালোচনা কোডের, আমার নয় — এই মনোভাব দেখান। কারণ জিজ্ঞেস করি, যুক্তি ঠিক হলে বদলাই আর ধন্যবাদ দিই; দ্বিমত থাকলে প্রমাণ দিয়ে (benchmark, ডকুমেন্টেশন, টেস্ট) আলোচনা করি, আর দলের সিদ্ধান্ত মানি। একটি বাস্তব উদাহরণ দিন, যেখানে review থেকে কিছু শিখেছেন।

“না” বলবেন না। কাজ নিয়ে দু–একটি আন্তরিক প্রশ্ন: দলে code review আর টেস্ট কীভাবে হয়? নতুন যোগ দেওয়া ডেভেলপারের প্রথম তিন মাস কেমন যায়? কোন stack-এ কাজ, আর কোন সমস্যাটি এখন সবচেয়ে বড়? এগুলো আগ্রহ আর পেশাদারি দেখায়।

না — দুটি আলাদা ভাষা; ১৯৯৫ সালে Java-র জনপ্রিয়তার সময় বাজারজাতকরণের কারণে নাম রাখা হয়েছিল। “JavaScript” একটি trademark (এখন Oracle-এর), তাই মানদণ্ডের নাম ECMAScript — Ecma International-এর ECMA-262 নথি। পর্ব ০১

ঘোষণা ছাড়া variable-এ মান দিলে global না বানিয়ে ReferenceError; সাধারণ function call-এ this হয় undefined; চুপচাপ ব্যর্থ হওয়া কাজ (read-only property-তে লেখা) TypeError দেয়; with নিষিদ্ধ। ES module আর class-এর ভেতর নিজে থেকেই strict. পর্ব ০৭

error নয় — 'undefined' দেয়; feature detection-এ এটি কাজে লাগে। ব্যতিক্রম: let/const-এর TDZ-এর ভেতরে typeof x দিলে ReferenceError. পর্ব ০৭

পুরোনো global isNaN আগে number-এ রূপান্তর করে, তাই isNaN('চা') true. Number.isNaN (ES2015) রূপান্তর করে না — শুধু সত্যিকারের NaN মানে true. পর্ব ১০

'53' আর 2. +-এর এক পাশে string থাকলে জোড়া লাগায় (concatenation); - শুধু সংখ্যার অপারেটর, তাই '5'-কে number-এ রূপান্তর করে। পর্ব ০৬

strict তুলনা (===) — তাই case 1 string '1'-এর সাথে মেলে না। break না দিলে পরের case-গুলোও চলতে থাকে (fall-through); ইচ্ছাকৃত হলে মন্তব্যে লিখুন। পর্ব ১১

const শুধু variable-কে নতুন মান দেওয়া আটকায়; সে যে array-কে দেখায় তার ভেতর বদলানো আটকায় না। cart = [] লিখলে তখন TypeError. পর্ব ০৭, পর্ব ১৫

arr.length = 0 একই array-কে খালি করে — অন্য যে variable ওই array দেখে, সেও খালি দেখে। arr = [] নতুন array বানায় (variable let হতে হবে); পুরোনো reference-গুলো পুরোনো ডেটাই দেখে। পর্ব ১৫

duplicate সরায়; Set ঢোকানোর ক্রম রাখে, তাই প্রতিটি মানের প্রথম উপস্থিতির ক্রম থাকে। তুলনা SameValueZero দিয়ে — NaN-ও একবারই থাকে, কিন্তু একই রকম দেখতে দুটি object আলাদা। পর্ব ১৮

typeof [] হলো 'object'. Array.isArray(x) ব্যবহার করুন — এটি অন্য iframe-এ তৈরি array-ও চেনে, যেখানে instanceof Array ব্যর্থ হয়। পর্ব ১৫

সাথে সাথে ডাকা function expression — (() => { … })() — আলাদা scope বানাতে, যাতে variable global-এ না ছড়ায়। এখন block scope (let/const) আর ES module সেই কাজ করে। পর্ব ২২

একই ইনপুটে সবসময় একই ফল, আর বাইরের কিছু বদলায় না (side effect নেই)। (a, b) => a + b pure; Math.random() বা global counter বাড়ানো function নয়। সুবিধা: টেস্ট সহজ, memoize করা যায়। পর্ব ২৩

arrow-এর নিজের this নেই; object literal-এ লেখা arrow method-এর this object নয়, বাইরের scope-এর this (module-এ undefined). তাই { total: () => this.items } ভাঙে; method shorthand total() {…} লিখুন। পর্ব ২৪

const variable আটকায়, Object.freeze object-এর property আটকায় (যোগ, বদল, মোছা — strict mode-এ TypeError, নইলে চুপচাপ উপেক্ষা)। freeze shallow — ভেতরের object বদলানো যায়; গভীরে আটকাতে recursive freeze লাগে। পর্ব ১৪

x instanceof C দেখে C.prototype x-এর prototype chain-এ কোথাও আছে কি না — class-এর নাম নয়। তাই prototype বদলালে ফলও বদলায়, আর ভিন্ন realm-এর (iframe) object-এ ব্যর্থ হতে পারে। পর্ব ২৫

synchronous — new Promise(fn) লেখার মুহূর্তেই fn চলে। শুধু then/catch-এর callback পরে (microtask হিসেবে) চলে। পর্ব ৩৩

না — সবসময় asynchronous, বর্তমান synchronous কোড শেষ হওয়ার পর microtask হিসেবে। এই নিশ্চয়তা আছে বলেই callback কখনো “কখনো sync, কখনো async” আচরণ করে না। পর্ব ৩৩, পর্ব ৩১

কোথাও ধরা পড়ে না — rejected Promise হয়ে থাকে, যাকে বলে unhandled rejection. ব্রাউজারে unhandledrejection event আর console-এ error; Node 15 থেকে ডিফল্টে process বন্ধ হয়ে যায়। পর্ব ৩৪

debounce — search box, window resize শেষ হলে layout হিসাব, form-এর autosave. throttle — scroll-এ অবস্থান হালনাগাদ, infinite scroll-এর পরীক্ষা, গেমে বোতাম চাপার সীমা। পর্ব ৩৬

DOMContentLoaded — HTML parse শেষ, DOM তৈরি (defer করা script চলার পর); ছবি বা stylesheet-এর অপেক্ষা নেই। load — ছবি, ফন্ট, iframe-সহ সব resource নামা শেষ। পর্ব ৩৭

preventDefault ব্রাউজারের নিজস্ব আচরণ থামায় (form submit হয়ে পাতা reload, link-এ যাওয়া); event ওঠা-নামা চলতে থাকে। stopPropagation event-কে পরের element-এ যেতে দেয় না; ডিফল্ট আচরণ ঘটে। পর্ব ৩৮

দুটিই HTML parse না থামিয়ে নামায়। defer চলে parse শেষে, লেখার ক্রমে — নিজের অ্যাপের script-এর জন্য। async নামা শেষ হলেই চলে, ক্রমের নিশ্চয়তা নেই — analytics-এর মতো স্বাধীন script-এর জন্য। type="module" ডিফল্টে defer-এর মতো। পর্ব ০২

origin = scheme + host + port. scheme আলাদা (http বনাম https), তাই আলাদা origin — port-ও আলাদা (80 বনাম 443). api.shop.example-ও আলাদা origin. পর্ব ৪৩

npm install range মেনে প্যাকেজ বসায় আর দরকার হলে lockfile হালনাগাদ করে। npm ci lockfile হুবহু মেনে পরিষ্কার করে বসায়, lockfile আর package.json না মিললে ব্যর্থ হয় — CI আর deploy-এর জন্য। পর্ব ৪৬

কোডে নয় — environment variable-এ (process.env), লোকালে .env ফাইলে যা .gitignore-এ থাকে, আর সার্ভারে host-এর secret ব্যবস্থায়। front-end bundle-এ রাখা কোনো কিছু গোপন নয় — যে কেউ পড়তে পারে। পর্ব ৪৯, পর্ব ৫৫

readFile পুরো ফাইল একবারে মেমরিতে তোলে — ২ GB লগে মেমরি ফুরিয়ে যেতে পারে। stream ছোট ছোট chunk-এ পড়ে-লেখে, মেমরি প্রায় স্থির থাকে; pipeline backpressure সামলায় আর error হলে সব বন্ধ করে। পর্ব ৪৯

কখনো সরাসরি বা উল্টানো যায় এমন এনক্রিপশনে নয় — bcrypt বা argon2-এর মতো ধীর, salt-যুক্ত password hashing-এ। লগইনে আবার hash করে মেলানো হয়। SHA-256 একা যথেষ্ট নয় — খুব দ্রুত, তাই অনুমান করে ভাঙা সহজ। পর্ব ৫০

না — payload শুধু base64url-এ লেখা, যে কেউ পড়তে পারে; স্বাক্ষর শুধু নিশ্চিত করে যে কেউ বদলায়নি। তাই JWT-তে password বা ব্যক্তিগত তথ্য রাখবেন না, আর মেয়াদ (exp) ছোট রাখুন। পর্ব ৫০, পর্ব ৪০