জাভাস্ক্রিপ্ট হয়েস্টিং নিয়ে যাবতীয় কনফিউশন

Hoisting হলো জাভাস্ক্রিপ্টের একটা গুরুত্বপূর্ণ কনসেপ্ট, অনেক সিনিয়র জাভাস্ক্রিপ্ট প্রোগ্রামরকেও টিউটোরিয়ালে এটা নিয়ে ভুল ব্যাখ্যা দিতে শুনেছি, তাই আজকে hoisting নিয়ে যাবতীয় কনফিউশন দূর করবো।

সহজ ভাষায়, Hoisting হলো জাভাস্ক্রিপ্টের Default Behaviour যা ফাংশন বা ভ্যারিয়বলের declaration অংশকে উপরে নিয়ে যায়।

var এর ক্ষেত্রে hoisting হয়ে value = undefined হয়ে যায়, অথ্যাৎ মেমরিতে একটা reference তৈরী হয়।

a = 10;

var a;

console.log(a) // 10

উপরের কোডটি লক্ষ্য করে দেখুন, ভ্যারিয়বল a এর ভ্যালু ডিক্লেয়ার করার আগে value a= 10 assign করা হয়েছে। তাহলে কি মনে হয় console log এ আমার কি output পাবো। চলুন কোডটি রান করি এখন:

আরে, output ত 10 পাচ্ছি! আমরা ত ভ্যালু assign করেছি ভ্যারিয়েবর ডিক্লেয়ার করার আগে, output ত reference error আসার কথা ছিলো। তাহলে সঠিক output পাচ্ছি কিভাবে? সঠিকভাবে output পাচ্ছি কারন জাভাস্ক্রিপ্টের এই hoisting.

এখানে কোড এক্সিকিউশনে যেটা ঘটবে, তা হলো Global contex এ var a ডিক্লেয়ারেশন অংশটুকু একদম উপরে চলে যাবে এবং value = undefined হবে, অর্থ্যাৎ memory তে একটা স্পেস allocated হবে।

এবং পরবর্তীতে যখন কোড এক্সিকিউশন Global phase থেকে function phase যাবে, তখন ভ্যালু a = 10 assign হবে।এবং ফাইনালি আমারা কনসোল লগে সঠিক output দেখতে পারবো।

এবার জানবো, Let এর ক্ষেত্রে কি hoisting হয় কিনা?

• একদম সোজাসোপ্টা উত্তর, Let এর ক্ষেত্রেও hoisting হয়। চলুন জানি কিভাবে।

b = 20;

let b ;

console.log(a);

Let এর ক্ষেত্রেও hoisting হয়, অর্থ্যাৎ let দিয়ে ডিক্লেয়ার করা ভ্যারিয়বলেরও, ডিক্লেয়ার অংশটুকু কোড এক্সিকিউশনে একদম উপরে চলে যাবে, কিন্তু value = undefined বা memeroy তে reference তৈরী হয় না। তাই উপরের কোডটি রান করলে কনসোল লগে reference error পাবো।

const এর ক্ষেত্রে syntax error হবে, কারন hoisting ত দূরের কথা const আলাদা করে declare করে assign করা যায় না , তাই কনসোলে syntax error দেখতে পাচ্ছি।

const a;

a = 10; // which is wrong

console.log(a);

নিচের উদাহরণ লক্ষ্য করুন মনোযোগ দিয়ে,

var x = 5

console.log(x,y) // 5, undefined

var y = 7

বিহেন্ড দ্যা সিন যা ঘটবে,

var x; var y; //hoisted x = 5;

console.log(x,y)

y = 7;

এখানে লক্ষ্য করুন ভ্যারিয়েবল y এর ডিক্লেয়ারেশন অংশটুকু শুধু hoisted হচ্ছে। তাই আমারা y = undefined পাচ্ছি।

নোট: জাভাস্ক্রিপ্টের initialization aren't hoisted

উৎসাহ পেলে জাভাস্ক্রিপ্টের এডভান্স টপিক যেমন, event loop কিভাবে কাজ করে, জাভাস্ক্রিপ্ট স্কোপ, জাভাস্ক্রিপ্টের V8 Engine Process, জাভাস্ক্রিপ্ট ক্লোজার, জাভাস্ক্রিপ্টের কোড কিভাবে run হয় ব্রাউজারে এসব টপিক নিয়ে বিস্তারিত লেখার ইচ্ছা আছে।