let, const, var — scope, hoisting আর TDZ

১ · Variable আসলে কী — একটি নাম, একটি মান, মাঝখানে বাঁধন

পর্ব ০৬-এ আপনি দেখেছেন JavaScript-এ কী কী ধরনের মান আছে — number, string, boolean, object ইত্যাদি। কিন্তু একটি মান তৈরি করে ফেলে রাখলে তো আবার খুঁজে পাওয়া যায় না। মানকে পরে ব্যবহার করতে হলে তার একটি নাম দিতে হয়। এই নামটিই variable.

অনেক বইয়ে variable-কে “একটি বাক্স, যার ভেতরে মান রাখা হয়” বলা হয়। শুরুর জন্য ছবিটা চলে, কিন্তু JavaScript-এ এর চেয়ে নির্ভুল ছবি হলো নামের ট্যাগ। মানগুলো মেমরিতে আলাদা থাকে; variable হলো একটি ট্যাগ, যা সুতো দিয়ে একটি মানের সাথে বাঁধা। এই নাম-মানের সংযোগকে বলে binding বা বাঁধন। “Variable-এ নতুন মান বসানো” মানে ট্যাগের সুতো খুলে অন্য মানের সাথে বাঁধা — পুরোনো মানটি নিজে বদলায় না।

ঘোষণা আর মান বসানো

একটি নতুন নাম পরিচয় করিয়ে দেওয়াকে বলে declaration বা ঘোষণা। আধুনিক JavaScript-এ ঘোষণার দুটি প্রধান keyword:

let score;              // ঘোষণা — মান এখনো undefined
score = 10;             // প্রথম মান বসানো (initialization)
score = score + 5;      // নতুন মান বসানো (reassignment) — let-এ চলে

const VAT_RATE = 0.15;  // const-এ ঘোষণা আর মান একসাথে দিতেই হবে
let cartTotal = 0, itemCount = 0;   // এক লাইনে একাধিক

আর তৃতীয় একটি keyword আছে — var. ১৯৯৫ সাল থেকে ২০১৫ পর্যন্ত JavaScript-এ variable বানানোর একমাত্র উপায় ছিল এটিই। ES2015 (ES6) থেকে let আর const এসেছে, কারণ var-এর কিছু আচরণ এক প্রজন্মের প্রোগ্রামারকে বাগে ভুগিয়েছে। এই পর্বের বড় অংশ জুড়ে দেখবেন সেই আচরণগুলো কী, আর কেন। পুরোনো কোড, পুরোনো টিউটোরিয়াল আর AI-এর দেওয়া কোডে var এখনো প্রচুর দেখবেন — তাই এটি পড়তে জানতেই হবে, লিখতে নয়।

২ · const মানে “বাঁধন স্থির” — মান বরফ নয়

নতুনদের সবচেয়ে সাধারণ ভুল ধারণা: “const দিয়ে বানানো জিনিস আর বদলানো যায় না।” এটি আধা-সত্য। নিচের কোডটি কোনো error ছাড়াই চলে:

const cart = [];               // cart নামটি একটি array-এর সাথে বাঁধা
cart.push({ item: "চাল", price: 650 });   // ✔ array-এর ভেতর বদলানো
cart[0].price = 620;           // ✔ ভেতরের object বদলানো

const shop = { name: "রহিম স্টোর" };
shop.name = "করিম স্টোর";      // ✔ property বদলানো

cart = [];                     // ✘ TypeError — নামটিকে নতুন array-এর সাথে বাঁধা যাবে না

তাহলে object-কে সত্যিই বদলের অযোগ্য করতে চাইলে? তার জন্য আছে Object.freeze() (ES5, ২০০৯ থেকে)। Freeze করা object-এ নতুন property যোগ, মোছা বা মান বদলানো যায় না। Strict mode-এ চেষ্টা করলে আসে TypeError: Cannot assign to read only property 'a' of object '#<Object>'; strict mode ছাড়া চেষ্টাটি নীরবে ব্যর্থ হয় — কোনো error নেই, মানও বদলায় না, যা আরও বিপজ্জনক। আর মনে রাখুন, freeze হলো shallow: শুধু ওপরের স্তর জমে, ভেতরের object আলাদা করে freeze না করলে সেটি বদলানো যায়। Object আর reference নিয়ে বিস্তারিত পর্ব ১৪-এ।

৩ · নাম রাখার নিয়ম আর রীতি

Variable-এর নামকে বলে identifier. এর কিছু নিয়ম আছে, যা না মানলে কোড চলবেই না, আর কিছু রীতি, যা না মানলে কোড চলবে কিন্তু অন্য প্রোগ্রামার (আর ছয় মাস পরের আপনি) বিরক্ত হবেন।

একটি সূক্ষ্ম বিষয়: const দিয়ে ঘোষণা করা সব কিছুই UPPER_CASE নয়। const cart = [] বা const user = getUser() — এগুলো সাধারণ camelCase, কারণ এদের মান চলার সময় তৈরি হয়। UPPER_CASE রাখা হয় শুধু সেই মানের জন্য যা কোড লেখার সময়েই জানা আর পুরো প্রোগ্রামে একই থাকে — যেমন বাংলাদেশে বহু পণ্যে প্রযোজ্য ১৫% VAT হার, const VAT_RATE = 0.15. (হারটি এখানে শুধু উদাহরণ; আসল প্রজেক্টে করের হার আইন অনুযায়ী যাচাই করে নেবেন।)

আরেকটি মজার তথ্য: JavaScript-এর identifier-এ Unicode অক্ষর চলে, তাই const দাম = 650; সম্পূর্ণ বৈধ কোড — চালালে ঠিকই চলে। তবে বাস্তব প্রজেক্টে নাম ইংরেজিতেই রাখা রীতি: কীবোর্ডে টাইপ করা সহজ, সব টুল ও দলের সবাই পড়তে পারে। বাংলা থাকুক string-এ আর comment-এ।

৪ · Scope — কোন নাম কোথা থেকে দেখা যায়

একটি বড় প্রোগ্রামে হাজার হাজার নাম থাকে। সব নাম যদি সব জায়গা থেকে দেখা যেত, তাহলে এক function-এর total আরেক function-এর total-কে নষ্ট করে দিত। তাই প্রতিটি নামের একটি এলাকা আছে, যার বাইরে সেটি অদৃশ্য। এই এলাকাকে বলে scope.

JavaScript-এ চার রকম scope আছে:

• Block scope: যেকোনো { } — if, for, while-এর শরীর, বা শুধু একজোড়া বন্ধনী। let, const আর class এখানে আটকে থাকে।
• Function scope: একটি function-এর পুরো শরীর। Parameter আর var দিয়ে ঘোষিত নাম এখানে থাকে — var ভেতরের কোনো block-এ লেখা হলেও।
• Module scope: একটি ES module ফাইলের top level. এখানকার নাম শুধু ওই ফাইলে দেখা যায়, export না করলে বাইরে যায় না (পর্ব ৪৫)।
• Global scope: সবচেয়ে বাইরের স্তর। এখানকার নাম সব জায়গা থেকে দেখা যায় — সুবিধাজনক, কিন্তু ঠিক এজন্যই বিপজ্জনক।

Scope chain — নাম খোঁজার পথ

কোড যখন কোনো নাম ব্যবহার করে, engine সেটি খোঁজে একটি নির্দিষ্ট পথে: আগে চলতি scope-এ, না পেলে তাকে ঘিরে থাকা scope-এ, এভাবে একদম global পর্যন্ত। এই পথকে বলে scope chain. প্রথম যেখানে নামটি পায়, সেখানেই খোঁজা থামে। কোথাও না পেলে ReferenceError. নিচে একটি দোকানের হিসাবের function-এ চারটি নাম খোঁজা দেখুন:

1const VAT_RATE = 0.15;2function checkout(prices) {3  let total = 0;4  for (const p of prices) {5    total += p + p * VAT_RATE;6  }7  return total + deliveryFee;8}

Shadowing — ভেতরের নাম বাইরেরটিকে আড়াল করে

ভেতরের scope-এ যদি বাইরের একটি নামের সমান নাম ঘোষণা করা হয়, তাহলে খোঁজা ভেতরেই থেমে যায় — বাইরের variable-টি সেই এলাকায় আড়ালে পড়ে যায়। একে বলে shadowing:

const discount = 50;           // বাইরের discount

function eidPrice(price) {
  const discount = 200;        // ভেতরের discount — বাইরেরটিকে আড়াল করে
  return price - discount;     // এখানে 200
}

eidPrice(1000);                // 800
discount;                      // 50 — বাইরেরটি অক্ষত

Lexical scope — কোথায় লেখা, সেটাই আসল

একটি গুরুত্বপূর্ণ প্রশ্ন: function-এর ভেতরে বাইরের কোন discount দেখা যাবে — যেখানে function লেখা হয়েছে তার চারপাশেরটি, না যেখান থেকে ডাকা হয়েছে তার চারপাশেরটি? JavaScript-এর উত্তর: যেখানে লেখা হয়েছে। একে বলে lexical scope (বা static scope). কোডের দিকে তাকিয়েই আপনি বলে দিতে পারেন কোন নাম কোন variable-কে বোঝায় — প্রোগ্রাম চালাতে হয় না। এই নিয়মটিই closure-এর ভিত্তি: একটি function তার জন্মস্থানের scope সাথে নিয়ে ঘোরে, অন্য কোথাও চললেও। Closure-এর পুরো গল্প পর্ব ২২-এ; এই পর্বের ৭ নম্বর অংশে তার প্রথম ঝলক দেখবেন।

৫ · Global object — window, globalThis আর var-এর লুকোনো property

প্রতিটি runtime একটি বিশেষ object দেয়, যাকে বলে global object. এর property-গুলো সব জায়গা থেকে শুধু নাম দিয়েই পাওয়া যায়। ব্রাউজারে এর নাম window — তাই setTimeout আর window.setTimeout একই জিনিস। Node.js-এ এর নাম global, Web Worker-এ self. সব জায়গায় চলে এমন কোড লেখার জন্য ES2020 যোগ করেছে একটি সাধারণ নাম: globalThis.

এখানেই var-এর একটি পুরোনো অভ্যাস চোখে পড়ে। ব্রাউজারের সাধারণ (classic) <script>-এর top level-এ var দিয়ে ঘোষণা করলে সেটি global object-এর একটি property-ও হয়ে যায়। let আর const top level-এ global scope-এ থাকে ঠিকই — অন্য script থেকেও দেখা যায় — কিন্তু window-এর property হয় না।

Module আর Node.js-এর ফাইল নিজেই একটি আলাদা scope-এ মোড়া থাকে, তাই সেখানে var-ও global object-এ পৌঁছায় না। নিচের প্রথম runnable উদাহরণে আপনি এই পার্থক্য নিজের চোখে দেখবেন।

ঘোষণা ছাড়া variable — accidental global

আরও খারাপ একটি পুরোনো আচরণ: কোনো ঘোষণা ছাড়াই একটি নামে মান বসালে, আর নামটি কোথাও না পাওয়া গেলে, sloppy mode-এ JavaScript চুপচাপ global object-এ একটি নতুন property বানিয়ে দেয়। একে বলে implicit global বা accidental global.

function addToCart(price) {
  totl = price;      // টাইপো! total নয়, totl — কোনো ঘোষণা নেই
}
addToCart(500);
console.log(window.totl);   // sloppy mode-এ 500 — function থেকে global-এ ফাঁস হয়ে গেল

৬ · Hoisting আর TDZ — কোড চলার আগেই নামগুলো তৈরি

পর্ব ০৫-এ দেখেছেন, একটি function ডাকা হলে engine তার জন্য একটি execution context তৈরি করে। এখন সেই কথার ভেতরে একটু ঢুকি। একটি scope-এর কোড চালানো দুই ধাপে হয়:

1. তৈরির ধাপ (creation phase): একটি লাইনও চলার আগে engine পুরো scope-টি দেখে নেয় এবং সেখানে ঘোষিত প্রতিটি নাম নিবন্ধন করে।
2. চলার ধাপ (execution phase): এরপর কোড ওপর থেকে নিচে লাইন ধরে চলে।

তৈরির ধাপে কী হয়, তা নির্ভর করে ঘোষণার ধরনের ওপর:

• Function declaration (function greet() {}): পুরোপুরি তৈরি — ঘোষণার আগের লাইন থেকেই ডাকা যায়।
• var: নাম তৈরি, মান undefined. আগে পড়লে কোনো error নেই, শুধু undefined.
• let, const, class: নাম তৈরি, কিন্তু “অপ্রস্তুত” (uninitialized) অবস্থায়। ঘোষণার লাইন না চলা পর্যন্ত একে পড়া বা লেখা যায় না।

কোড দেখে মনে হয় যেন ঘোষণাগুলো scope-এর মাথায় তুলে আনা হয়েছে — তাই এর নাম hoisting (hoist মানে টেনে ওপরে তোলা, যেমন পতাকা)। আসলে কোড কোথাও সরে না; শুধু নামগুলো আগেভাগে নিবন্ধিত হয়। আর scope শুরু হওয়া থেকে let/const-এর লাইন চলা পর্যন্ত যে সময়ে নামটি আছে কিন্তু ছোঁয়া যায় না, তার নাম temporal dead zone (TDZ). “Temporal” মানে সময়গত — এটি কোডের জায়গা দিয়ে নয়, সময় দিয়ে মাপা।

1console.log(greet());2console.log(count);3var count = 1;4let total = 10;5console.log(total);6function greet() { return "হ্যালো"; }

এবার নিজে চালিয়ে দেখুন — hoisting, TDZ, const-এর mutation আর global object-এর পার্থক্য, সব একসাথে। এখানে একটি দোকানের কার্টের মোট দাম VAT সহ হিসাব করা হয়েছে:

console.log(typeof greet);   // function — পুরোটা আগেই তৈরি
console.log(oldCount);       // var — নাম আছে, মান undefined
try {
  console.log(total);        // let — TDZ-এ, ছোঁয়া যায় না
} catch (e) {
  console.log(e.name + ": " + e.message);
}
var oldCount = 5;
let total = 0;
function greet() { return "হ্যালো"; }
const VAT_RATE = 0.15;
const cart = [250, 120];
cart.push(80);               // ভেতরের মান বদলানো যায়
for (const price of cart) total += price;
console.log("মোট:", total * (1 + VAT_RATE));

try {
  VAT_RATE = 0.2;            // নতুন মান বসানো যায় না
} catch (e) {
  console.log(e.name + ": " + e.message);
}
console.log("var global-এ?", "oldCount" in globalThis);
console.log("let global-এ?", "total" in globalThis);

৭ · লুপে var-এর বিখ্যাত বাগ — 3 3 3 বনাম 0 1 2

JavaScript ইন্টারভিউতে সবচেয়ে বেশি জিজ্ঞাসিত প্রশ্নগুলোর একটি এটি, আর এক প্রজন্মের ওয়েব ডেভেলপার বাস্তব প্রজেক্টে এই বাগে পড়েছেন। ধরুন একটি পাতায় তিনটি বোতাম, আর প্রতিটির ক্লিকে তার নম্বর দেখাতে চান। লুপ দিয়ে তিনটির জন্য callback বানালেন — কিন্তু যেকোনো বোতাম চাপলেই দেখায় “3”! নিচে একই সমস্যা setTimeout দিয়ে, কারণ callback পরে চলার ব্যাপারটি দুই জায়গাতেই এক।

মূল কথা: callback তৈরি হয় লুপের সময়, কিন্তু চলে লুপ শেষ হওয়ার পরে (পর্ব ০৫-এর event loop মনে করুন)। তখন সে variable-টির যে মান দেখে, সেটাই ছাপে। প্রশ্ন হলো — তিনটি callback কি একই variable দেখে, না আলাদা আলাদা?

1for (var i = 0; i < 3; i++) {2  setTimeout(() => console.log(i), 10);3}4for (let j = 0; j < 3; j++) {5  setTimeout(() => console.log(j), 20);6}

নিজে চালিয়ে দেখুন। শেষে strict mode-এ accidental global-এর পরীক্ষাও আছে:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log("var:", i), 10);
}

for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log("let:", j), 20);
}

console.log("লুপ শেষ, var i এখনো আছে:", i);
console.log("let j আছে?", typeof j);

function strictCount() {
  "use strict";
  try {
    counter = 1;             // ঘোষণা ছাড়া মান বসানো
  } catch (e) {
    console.log(e.name + ": " + e.message);
  }
}
strictCount();

let আসার আগে মানুষ কী করত — IIFE

২০১৫-র আগে let ছিল না। তখন প্রতিটি পুনরাবৃত্তির জন্য নতুন scope বানাতে মানুষ একটি function লিখে সাথে সাথে ডেকে ফেলত — যার নাম IIFE:

for (var i = 0; i < 3; i++) {
  (function (n) {                                 // প্রতিবার নতুন function scope
    setTimeout(() => console.log(n), 10);         // n এই scope-এর নিজের
  })(i);                                          // সাথে সাথে ডাকা, i-এর এখনকার মান দিয়ে
}
// প্রত্যাশিত আউটপুট: 0 1 2

৮ · ভালো অভ্যাস — const আগে, let দরকারে, var কখনো না

আধুনিক JavaScript কমিউনিটির প্রায় সর্বসম্মত নিয়ম এখন তিন লাইনের:

কেন const ডিফল্ট? কারণ এটি পাঠককে একটি প্রতিশ্রুতি দেয়: “এই নাম পুরো scope জুড়ে একই জিনিস দেখাবে।” ২০০ লাইনের একটি function পড়ার সময় প্রতিটি const আপনার মাথা থেকে একটি চিন্তা সরিয়ে দেয়। আর যে কয়েকটি let থাকে, সেগুলো আলাদা করে চোখে পড়ে — “সাবধান, এটি বদলায়।” বাস্তব কোডে দেখবেন, বেশিরভাগ variable আসলে কখনো নতুন মান পায় না।

কখন let? যখন মান সত্যিই ধাপে ধাপে বদলায় — যেমন কার্টের মোট দাম জমানো, গণনার counter, বা একটি অবস্থা যা পরে ঠিক হয়:

const VAT_RATE = 0.15;                     // কখনো বদলায় না → const, UPPER_CASE
const prices = [650, 120, 80];             // array নিজে বদলায় না → const

let subtotal = 0;                          // ধাপে ধাপে বাড়বে → let
for (const price of prices) {              // প্রতিবার নতুন price → const চলে
  subtotal += price;
}

let label;                                 // পরে ঠিক হবে → let
if (subtotal > 500) label = "ফ্রি ডেলিভারি";
else label = "ডেলিভারি ৬০ টাকা";

আর var কেন কখনো নয়? কারণ var এমন কোনো কাজ করে না যা let পারে না, কিন্তু বাড়তি চারটি ফাঁদ আনে: block না মানা, ঘোষণার আগে নীরব undefined, একই নামে আবার ঘোষণা করলে চুপ থাকা, আর top level-এ window-এ ঢুকে পড়া। একটি বাস্তব counter বাগ দেখুন:

var count = 0;                       // পাতার ভিজিটর গণনা

function resetCartBadge() {
  if (true) {
    var count = 0;                   // লেখক ভাবলেন: শুধু এই block-এর
  }
  count++;                           // কোন count? function-এর! global-টি নয়
  return count;
}
// প্রত্যাশিত আউটপুট: resetCartBadge() দেয় 1, আর global count থাকে 0

৯ · AI-এর যুগে — পুরোনো টিউটোরিয়ালের var আর অদৃশ্য global

AI কোড লেখা শিখেছে ইন্টারনেটের কোটি কোটি লাইন থেকে, আর তার বড় অংশ লেখা হয়েছিল ২০১৫-র আগে — যখন var ছাড়া উপায় ছিল না। তাই AI-এর দেওয়া JavaScript-এ, বিশেষত ছোট snippet বা পুরোনো jQuery-ধাঁচের কোডে, এই পর্বের সমস্যাগুলো প্রায়ই ফিরে আসে:

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

• কোডে var খুঁজেছি (Ctrl+F) — থাকলে কেন আছে বুঝে const/let-এ বদলেছি
• প্রতিটি let দেখে নিশ্চিত হয়েছি যে সত্যিই কোথাও নতুন মান বসে
• লুপের ভেতরে তৈরি callback (setTimeout, event listener, Promise) কোন variable দেখে — পরীক্ষা করেছি
• ঘোষণা ছাড়া কোনো নাম নেই, আর কোড strict mode বা module-এ চলে — ESLint-এর no-undef, no-var, prefer-const চালিয়েছি
• const object-কে কোথাও “বদলাবে না” ধরে নেওয়া হয়নি — দরকার হলে freeze বা কপি