JavaScript Hoisting: ভ্যারিয়েবল ও ফাংশনের সিক্রেট বিহেভিয়ার

JavaScript Hoisting: ভ্যারিয়েবল ও ফাংশনের সিক্রেট বিহেভিয়ার JavaScript-এ কোড লিখতে গিয়ে অনেক সময় এমন পরিস্থিতির মুখোমুখি হই, যেখানে কোনো ভ্যারিয়েবল বা ফাংশন আমরা আগে ব্যবহার করছি, অথচ সেটা নিচে ডিক্লেয়ার করা! এটা কীভাবে সম্ভব?

এর পেছনে রয়েছে এক জাদুময় বৈশিষ্ট্য Hoisting।

Hoisting বলতে বুঝায়, JavaScript ইন্টারপ্রেটার যখন আপনার কোড চালায়, তখন প্রথমেই সব ভ্যারিয়েবল এবং ফাংশনের declaration (ঘোষণা) তাদের স্কোপের একদম উপরে নিয়ে যায়। অর্থাৎ আপনি কোডে উপরে না লিখলেও, JavaScript মনে করে যেন আপনি উপরে লিখেছেন!

এটাই Hoisting-এর মূলে।

উদাহরণ দিয়ে বুঝি

var দিয়ে Hoisting

console.log(a); // Output: undefined
var a = 10

এখানে প্রথম লাইনেই a ব্যবহার করা হয়েছে, অথচ a তো নিচে ডিক্লেয়ার করা! তাহলে undefined আসলো কেন?

কারণ, JavaScript এটাকে ভেতরে এমনভাবে দেখে:

var a;
console.log(a); // undefined
a = 10;

মানে, শুধু ঘোষণা উপরে যায়, মান দেওয়া (initialization) যায় না।

let এবং const এর ক্ষেত্রে ভিন্ন আচরণ

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

এখানে let বা const দিয়েও Hoisting হয়, তবে পার্থক্য হলো: JavaScript এগুলোকে Hoist করলেও, Initialization করে না, আর এ সময় যদি অ্যাক্সেস করা হয়, তাহলে ReferenceError দেয়।

এই সময়টাকে বলা হয় Temporal Dead Zone (TDZ)।

TDZ কাকে বলে?

যেই সময়টাতে ভ্যারিয়েবল স্কোপে ঢুকেছে কিন্তু এখনও Initialize হয়নি, সেই সময়টাকেই TDZ বলা হয়।

উদাহরণ:

{
  // TDZ শুরু
  console.log(myName); // ReferenceError
  let myName = "Arif";
  // TDZ শেষ
}

ফাংশন Hoisting

JavaScript-এ Function Declaration সম্পূর্ণভাবে স্কোপের শীর্ষে নিয়ে যায়।

greet(); // Output: Hello!

function greet() {
  console.log("Hello!");
}

এখানে greet() কল করার আগেই এটা কাজ করে যাচ্ছে কারণ, ফাংশনটি পুরোপুরি উপরে নিয়ে গিয়েছে JavaScript ইঞ্জিন।

কিন্তু ফাংশন এক্সপ্রেশন এর ক্ষেত্রে?

sayHi(); // TypeError: sayHi is not a function

var sayHi = function() {
  console.log("Hi!");
};

এখানে যদিও sayHi কে উপরে নিয়ে গেছে, কিন্তু সেটা undefined হিসেবে ইনিশিয়ালাইজ হয়েছে। তাই যখন কল করা হয়, তখন sayHi() আসলে ফাংশন না, বরং undefined ফলে TypeError।

এভাবে const বা let দিয়ে ফাংশন এক্সপ্রেশন ডিক্লেয়ার করলে আবার ReferenceError হবে।

কোনটা কখন কিভাবে ব্যবহার করবেন?

ভালো অভ্যাস গুলো কী?

1. সব ভ্যারিয়েবল ও ফাংশন স্কোপের শুরুতেই ডিক্লেয়ার করুন।
   এতে কোড পড়তে ও বুঝতে সহজ হয়।
2. let এবং const ব্যবহার করুন var এর বদলে।
   কারণ, var ফাংশন স্কোপ ফলো করে, কিন্তু let এবং const ব্লক স্কোপ অনুসরণ করে এবং TDZ ব্যবহার করে কোডকে নিরাপদ রাখে।
3. ফাংশন এক্সপ্রেশন ব্যবহার করলে, ডিক্লারেশনের পরে তবেই কল করুন।
   কারণ JavaScript এগুলো Hoist করে না।

Hoisting-এর চিত্র কল্পনা:

চলুন একটা সহজ উদাহরণ কল্পনা করি:

মনে করুন, আপনি কোনো রেস্টুরেন্টে গিয়েছেন। ওয়েটারকে আপনি বললেন, “একটা চা দাও।” অথচ আপনি মেনু দেখেননি, অর্ডার দেননি!

যদি আপনি var ব্যবহার করেন, ওয়েটার বলবে “আচ্ছা, তোমার অর্ডার বুঝি নাই, তাই আপাতত তোমাকে খালি কাপ দিলাম (undefined)!”

আর let বা const ব্যবহার করলে, ওয়েটার চটে গিয়ে বলবে “অর্ডার দেওয়ার আগেই চা চাইছো? এ তো ReferenceError!”

কখন কী ভুল হয়?

ভুল:

console.log(age);
var age = 25;

সঠিক:

var age = 25;
console.log(age);

ভুল:

sayHello();

var sayHello = function() {
  console.log("Hello!");
}

সঠিক:

var sayHello = function() {
  console.log("Hello!");
}

sayHello();

JavaScript এর Hoisting ফিচারটি যেমন শক্তিশালী, তেমনি বিভ্রান্তিকরও হতে পারে। যদি আপনি ঠিকভাবে বুঝে কোড লেখেন, তাহলে এই সমস্যাগুলো এড়ানো সম্ভব।

🎯 সবসময় চেষ্টা করুন:

• কোডের শুরুতেই ভ্যারিয়েবল ও ফাংশন ডিক্লার করা।
• let ও const ব্যবহারে অভ্যস্ত হওয়া।
• ফাংশন এক্সপ্রেশন ব্যবহার করলে, কল করার আগে ডিক্লার করা।

Technology এর সকল আপডেট সবার আগে বিস্তারিত পেতে চেক করুন