JavaScript Hoisting এর সম্পূর্ণ গাইড

JavaScript-এ Hoisting এমন একটি ধারণা যা ভ্যারিয়েবল এবং ফাংশন ডিক্লেয়ারেশন কিভাবে ব্যবহৃত হয় তা বোঝাতে সাহায্য করে। JavaScript ইঞ্জিন কোডট...

JavaScript-এ Hoisting এমন একটি ধারণা যা ভ্যারিয়েবল এবং ফাংশন ডিক্লেয়ারেশন কিভাবে ব্যবহৃত হয় তা বোঝাতে সাহায্য করে। JavaScript ইঞ্জিন কোডটি রান করার আগে সমস্ত ভ্যারিয়েবল এবং ফাংশনকে কোডের শুরুর দিকে নিয়ে আসে। এই বৈশিষ্ট্যের কারণে আপনি আপনার কোডে ভ্যারিয়েবল এবং ফাংশন ডিক্লেয়ারের আগে তাদের ব্যবহার করতে পারেন, যদিও এতে কখনো কখনো বিভ্রান্তিতে পরতে হয় আজকের ব্লগে এসকল বিভ্রান্তি নিয়ে বিস্তারিত আলোচনা করা হল।

Hoisting এর মূল ধারণা:

Hoisting হল এমন একটি প্রসেস যা ভ্যারিয়েবল এবং ফাংশন ডিক্লেয়ারেশনকে কোডের শুরুর দিকে নিয়ে আসে। কিন্তু, বিভিন্ন ধরনের ডিক্লেয়ারের জন্য এটি ভিন্নভাবে কাজ করে:

• var দিয়ে ডিক্লেয়ার করা ভ্যারিয়েবলগুলোতে প্রাথমিকভাবে undefined সেট করে।
• let এবং const এর জন্য Hoisting হলেও সেগুলি "Temporal Dead Zone" এ থাকে এবং ইনিশিয়ালাইজ না হওয়া পর্যন্ত অ্যাক্সেস করা যায় না।

 

var এর উদাহরণ -

console.log(price); // Output: undefined
var price = 50;
console.log(price); // Output: 50

ব্যাখ্যা: প্রথম console.log(price) এর আগে price ভ্যারিয়েবল টি Hoisting হয়েছে, এবং প্রাথমিকভাবে এর মান undefined হয়েছে। এরপর price এর মান 50 সেট করা হয়েছে।

 

let এবং const এর উদাহরণ -

console.log(amount);
// ReferenceError: Cannot access 'amount' before initialization
let amount = 100;
console.log(amount);
// Output: 100
console.log(discount);
// ReferenceError: Cannot access 'discount' before initialization
const discount = 20;
console.log(discount);
// Output: 20

ব্যাখ্যা: let এবং const দিয়ে ডিক্লেয়ার করা ভ্যারিয়েবলগুলো Hoisting হয়, কিন্তু এদের ব্যবহার করতে চাইলে "Temporal Dead Zone" এর কারণে ReferenceError আসে। ভ্যারিয়েবলগুলো ইনিশিয়ালাইজ হওয়া পর্যন্ত এদের অ্যাক্সেস করা যায় না।

 

ফাংশন Hoisting -

ফাংশন ডিক্লেয়ারেশনের ক্ষেত্রে পুরো ফাংশনকেই কোডের শুরুর দিকে নিয়ে যাওয়া হয়, যা আপনাকে ফাংশন ডিক্লেয়ারের আগে এক্সিকিউট করতে দেয়।

greet(); // Output: "Hello, World!"

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

ব্যাখ্যা: greet() ফাংশন ডিক্লেয়ারের আগে কল করা হলেও এটি ঠিকমতো কাজ করে কারণ JavaScript ফাংশনকে পুরোপুরি শুরুর দিকে নিয়ে এসেছে।

 

ফাংশন এক্সপ্রেশন Hoisting -

ফাংশন এক্সপ্রেশন (যেখানে ফাংশনকে একটি ভ্যারিয়েবলে অ্যাসাইন করা হয়) ভিন্নভাবে কাজ করে কারণ এটি ভ্যারিয়েবল Hoisting এর নিয়ম অনুসরণ করে।

console.log(sayHello); // Output: undefined

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

sayHello(); // Output: "Hello!"

ব্যাখ্যা: ফাংশন এক্সপ্রেশনের ক্ষেত্রে শুধুমাত্র ভ্যারিয়েবল Hoisting হয়, তাই প্রথম console.log(sayHello) লাইনটি undefined দেখায় এবং তখন ফাংশনটি অ্যাক্সেস করা যায় না।

 

Hoisting এর সাথে Temporal Dead Zone -

let এবং const ভ্যারিয়েবলগুলি "Temporal Dead Zone" (TDZ) এ থাকে এবং ইনিশিয়ালাইজ না হওয়া পর্যন্ত তাদের অ্যাক্সেস করা যায় না। এটি একটি সুরক্ষা ব্যবস্থা যা অনিচ্ছাকৃতভাবে না জানা ভ্যারিয়েবল ব্যবহারকে রোধ করে।

let amount = 100;
console.log(price);
// ReferenceError: Cannot access 'price' before initialization
const price = 50;

 

Hoisting এর বিভ্রান্তি এড়াতে, কিছু টিপস অনুসরণ করা যায়:

• সম্ভব হলে, ভ্যারিয়েবল এবং ফাংশন ডিক্লেয়ারেশন কোডের শুরুর দিকেই করুন।
• let এবং const ব্যবহার করুন, কারণ এগুলো ব্লক-স্কোপড এবং নিরাপদ।
• ফাংশন এক্সপ্রেশন ব্যবহার করলে মনে রাখুন, সেগুলো ভ্যারিয়েবল Hoisting এর নিয়ম অনুসরণ করে।

 

JavaScript-এ Hoisting ভ্যারিয়েবল ও ফাংশনের ব্যবহারে বড় ভূমিকা রাখে। let ও const ব্যবহার করে ভ্যারিয়েবলগুলো আগে ডিক্লেয়ার করলে কোড আরও নিরাপদ হয়। Temporal Dead Zone নিশ্চিত করে যে ভ্যারিয়েবলগুলো ইনিশিয়ালাইজ হওয়ার আগে ব্যবহার করা যাবে না, যা ভুল কমাতে সাহায্য করে।