Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

জাভাস্ক্রিপ্ট Hoisting



Hoisting কি?

JavaScript-এ Hoisting হলো execution শুরু হওয়ার আগে কিছু declaration-এর তথ্য JavaScript engine-এর scope-এর শুরুতে প্রস্তুত করে রাখার আচরণ। এর ফলে কিছু ক্ষেত্রে declaration লেখার আগেই variable বা function ব্যবহার করা সম্ভব হয়।

তবে সব declaration একইভাবে hoist হয় না। বিশেষ করে var, let, const এবং function declaration-এর আচরণের মধ্যে গুরুত্বপূর্ণ পার্থক্য রয়েছে।

Hoisting = Execution-এর আগে declaration-এর জন্য JavaScript-এর প্রস্তুতিমূলক আচরণ।

Hoisting বোঝার জন্য declaration এবং initialization-এর পার্থক্য জানা গুরুত্বপূর্ণ।

উদাহরণ


console.log(message);

var message = "Hello JavaScript";

কোড এডিটর


var Hoisting

var দিয়ে declare করা variable hoist হয়। তবে variable-এর declaration উপরে প্রস্তুত হলেও তার assigned value execution সেই assignment statement-এ পৌঁছানোর আগে পাওয়া যায় না। তাই declaration-এর আগে var variable ব্যবহার করলে সাধারণত undefined পাওয়া যায়।

এখানে মনে রাখতে হবে, var-এর declaration এবং initialization একই বিষয় নয়। Hoisting-এর কারণে declaration আগে প্রস্তুত থাকে, কিন্তু value পরে assign হয়।

var declaration hoist হয়, কিন্তু initialization তার নির্দিষ্ট line-এই ঘটে।

নিচের উদাহরণে message-এর declaration আগে থেকেই scope-এ প্রস্তুত থাকায় প্রথম console.log-এ undefined দেখা যাবে।

উদাহরণ


console.log(message);

var message = "Hello";
console.log(message);

কোড এডিটর


let ও Hoisting

let declaration-ও JavaScript-এর execution context-এ hoist হয়, কিন্তু declaration-এর আগে সেটিকে access করা যায় না। declaration এবং initialization-এর মাঝের অংশকে Temporal Dead Zone বা TDZ বলা হয়।

তাই let variable declaration-এর আগে ব্যবহার করলে ReferenceError তৈরি হয়।

let + Declaration-এর আগে access = Temporal Dead Zone (TDZ)

নিচের code-এ message declaration-এর আগে access করার চেষ্টা করা হয়েছে।

উদাহরণ


console.log(message);

let message = "Hello";

কোড এডিটর


const ও Hoisting

const declaration-এর ক্ষেত্রেও let-এর মতো declaration-এর আগে variable access করা যায় না। const variable declaration-এর আগে access করলে Temporal Dead Zone-এর কারণে ReferenceError হতে পারে।

const variable-কে declaration-এর সময় value দিতে হয়। তাই declaration এবং initialization একই statement-এ থাকে।

const variable = Declaration-এর আগে access করা যায় না এবং declaration-এর সময় value প্রয়োজন।

নিচের উদাহরণে number declaration-এর আগে access করা হয়েছে।

উদাহরণ


console.log(number);

const number = 100;

কোড এডিটর


Function Declaration Hoisting

Function declaration JavaScript-এ hoisting-এর একটি গুরুত্বপূর্ণ উদাহরণ। সাধারণ function declaration-এর ক্ষেত্রে function-এর নাম এবং তার function body execution-এর আগে প্রস্তুত থাকে। তাই declaration-এর আগে function call করা সম্ভব।

এই আচরণ function declaration এবং function expression-এর মধ্যে পার্থক্য বোঝার ক্ষেত্রেও গুরুত্বপূর্ণ।

Function Declaration = Declaration-এর আগে function call করা সম্ভব হতে পারে।

নিচের উদাহরণে greet() function-কে declaration-এর আগে call করা হয়েছে।

উদাহরণ


greet();

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

কোড এডিটর


Function Expression ও Hoisting

Function expression-এর ক্ষেত্রে variable declaration এবং function value assignment আলাদাভাবে বিবেচনা করতে হয়। var দিয়ে function expression তৈরি করলে variable declaration hoist হতে পারে, কিন্তু function value assignment execution-এর নির্দিষ্ট line-এ হয়।

তাই assignment-এর আগে function expression call করার চেষ্টা করলে প্রত্যাশিত function পাওয়া যায় না এবং TypeError হতে পারে।

Function Expression = Variable hoist হতে পারে, কিন্তু Function Assignment পরে হয়।

নিচের উদাহরণে greet-এর function value পরে assign করা হয়েছে।

উদাহরণ


greet();

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

কোড এডিটর


Hoisting ও Scope

Hoisting বুঝতে scope-এর ধারণাও গুরুত্বপূর্ণ। var function scope-এ কাজ করে, আর let ও const block scope-এ কাজ করে। কোনো declaration যে scope-এর মধ্যে তৈরি হয়েছে, hoisting-এর আচরণও সেই execution context-এর সঙ্গে সম্পর্কিত।

একই নামের variable ভিন্ন scope-এ থাকলে কোন variable ব্যবহার হচ্ছে তা বোঝার জন্য scope এবং declaration-এর অবস্থান লক্ষ্য করতে হবে।

Hoisting বুঝতে Declaration + Scope + Execution Order একসঙ্গে বিবেচনা করুন।

নিচের উদাহরণে block-এর ভিতরের let variable এবং বাইরের variable আলাদা scope তৈরি করেছে।

উদাহরণ


let message = "Outside";

{
  let message = "Inside";
  console.log(message);
}

console.log(message);

কোড এডিটর


Hoisting ও Temporal Dead Zone

let এবং const-এর declaration scope-এর শুরুতে প্রস্তুত থাকলেও declaration-এর আগে access করা যায় না। এই সময়টিকে Temporal Dead Zone বা TDZ বলা হয়।

TDZ-এর কারণে declaration-এর আগে variable ব্যবহার করলে JavaScript ReferenceError দেখাতে পারে।

TDZ = let বা const declaration-এর আগে access করা নিষিদ্ধ থাকার সময়কাল।

নিচের উদাহরণে declaration-এর আগে userName access করা হয়েছে, তাই code error তৈরি করবে।

উদাহরণ


console.log(userName);

let userName = "Anik";

কোড এডিটর


Hoisting-এর সুবিধা ও অসুবিধা

Hoisting JavaScript-এর execution model-এর একটি স্বাভাবিক অংশ। Function declaration-এর ক্ষেত্রে এটি code organization-এ সুবিধা দিতে পারে। তবে variable declaration-এর আগে ব্যবহার করলে code বোঝা কঠিন হতে পারে এবং বিশেষ করে var-এর ক্ষেত্রে undefined বা অন্য runtime সমস্যা তৈরি হতে পারে।

আধুনিক JavaScript code-এ let ও const ব্যবহার এবং variable declaration-এর আগে ব্যবহার না করার অভ্যাস code-কে আরও পরিষ্কার ও predictable রাখতে সাহায্য করে।

মনে রাখুন: Hoisting-এর উপর নির্ভর না করে Declaration আগে এবং Usage পরে রাখা ভালো coding practice।

নিচের উদাহরণে variable আগে declare করে পরে ব্যবহার করা হয়েছে।

উদাহরণ


const price = 500;
const quantity = 2;

const total = price * quantity;
console.log(total);

কোড এডিটর


Hoisting সম্পর্কে গুরুত্বপূর্ণ বিষয়

JavaScript Hoisting বোঝার সময় মনে রাখতে হবে যে JavaScript code line-by-line লেখার order অনুযায়ী সরাসরি সব declaration execute করে না। Execution context তৈরি হওয়ার সময় declaration-এর জন্য প্রয়োজনীয় প্রস্তুতি সম্পন্ন হয়।

var, let, const এবং function declaration-এর আচরণ এক নয়। তাই declaration-এর আগে variable ব্যবহার না করে পরিষ্কারভাবে declaration ও initialization সম্পন্ন করার পর ব্যবহার করা নিরাপদ ও সহজবোধ্য পদ্ধতি।

মনে রাখুন: var, let, const এবং function declaration-এর Hoisting আচরণ আলাদা।

নিচের উদাহরণে variable declaration ও initialization আগে সম্পন্ন করে তারপর function-এর ভিতরে সেটি ব্যবহার করা হয়েছে।

উদাহরণ


const name = "Anik";

function showName() {
  console.log(name);
}

showName();

কোড এডিটর