2.7 জাভাস্ক্রিপ্টে হইস্টিং

 

Hoisting হচ্ছে জাভাস্ক্রিপ্ট এমন একটি পদ্ধতি যেখানে কোড এক্সিকিউশন করার আগে ভ্যারিয়েবল এবং ফাংশন ডিক্লেয়ারেশনগুলোকে তার বর্তমান Scope – এর শুরুতে নিয়ে যায়। উদাহরণস্বরূপঃ

function hoisting() {
   console.log(message);
   var message='Hi there, We are learning Hoisting!'
}

hoisting();   // Output: undefined

উদাহরণের ব্যাখ্যা দেওয়ার আগে Hoisting সম্পর্কে কিছু কথা বলে নেই। যখন আমরা কাউকে Hoisting বুঝায় উপরের সংজ্ঞাটা দিয়েই বুঝায়। কিন্তু আসলেই কি জাভাস্ক্রিপ্ট তার সকল ভ্যারিয়েবলস এবং ফাংশন ডিক্লেয়ারেশনগুলোকে তার স্কোপের উপরে নিয়ে যায়? না, জাভাস্ক্রিপ্ট এমনটা কখনো করে না। যখন আপনি জাভাস্ক্রিপ্টের কোন কোড এক্সিকিউট করেন, জাভাস্ক্রিপ্ট ইঞ্জিন গ্লোবাল এক্সিকিউশন কন্টেক্সট তৈরি করে।

গ্লোবাল এক্সিকিউশন কন্টেক্সট এর দুটি phase আছে: creation এবং execution। creation phase চলার সময়, জাভাস্ক্রিপ্ট ইঞ্জিন সকল ভ্যারিয়েবলকে undefined হিসাবে ইনিশিয়ালাইজ করে। এবার চলুন আমরা Hoisting-এ ফিরে যাই।

জাভাস্ক্রিপ্টে Hoisting হচ্ছে দুই প্রকার।

  • Variable Hoisting
  • Function Hoisting

১. Variable Hoisting

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

var hoistingIntro = "Hi there, I am a string one.";

উপরের console.log এর আউটপুট কি হবে? একটু চিন্তা করুন সময় নিয়ে। যাইহোক, উপরের কোডে কোন ভুল নেই। কারণ আমরা জানি জাভাস্ক্রিপ্ট ইঞ্জিন Creation phase-এ ভ্যারিয়েবল ডিক্লেয়ারেশনকে undefined হিসাবে ইনিশিয়ালাইজ করে। তাই, Execution phase-এ আউটপুট undefined হচ্ছে কারণ আমরা তার ভ্যালু ইনিশিয়ালাইজ হওয়ার আগেই log করে ফেলেছি। টেকনিক্যালি, কোডটি Execution phase-এ নিম্নলিখিত কোডের মত দেখাবেঃ

var hoistingIntro = undefined;

console.log(hoistingIntro); // output: undefined
hoistingIntro = "Hi there, I am a string one.";

২. Functions Hoisting

ভ্যারিয়েবলের মত ফাংশনও Hoisted হয়। তাই আপনি আগে ফাংশন কল করে পরে ফাংশন ডিক্লেয়ার করতে পারবেন।

hoistedFunc();    // Hoisted

function hoistedFunc() {
    console.log("Hoisted.");
}
 

বিঃ দ্রঃ একটি কথা ভাল করে মনে রাখবেন যে জাভাস্ক্রিপ্ট ফাংশন এক্সপ্রেশনের ক্ষেত্রে কোন Hoisting করে না।

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

var hoistedFunEx = function() {
   console.log("Hoisted.");
}

আপনাদের জন্যে একটি হোম টাস্ক। নিচের কোডের দুইটা console.log এর আউটপুট কি হবে?

var hoistingIntro = "Hi there, I am a string one.";

function hoistingFunc() {
  console.log(hoistingIntro);
  var hoistingIntro = "Hi there, I am a string two";
  console.log(hoistingIntro);
}

hoistingFunc();

 

উদাহরন
  • Variable Hoisting 
    console.log(x); // Uncaught ReferenceError: x is not defined
let x = 5;

console.log(x); // Uncaught ReferenceError: x is not defined
const x = 5;

console.log(x); // undefined
var x = 5;
  • Functions Hoisting 
    hoistedSuccess(); // Hoisted

function hoistedSuccess() {
  console.log('This is Function Statement and it is hoisted');
}
    hoistedFailed(); // Not Hoisted

const hoistedFailed = () => {
  console.log('This function expression so it is not hoisteed.');
};

     

এসো নিজে করি
  •  জাভাস্ক্রিপ্টে হইস্টিং কি?
  • নিচের কোডের আউটপুট কি হবে?
    function add() {
  console.log(answer);
  var answer = 2;
}
add();
  • নিচের কোডের আউটপুট কি হবে? 
    var temp = 'hi';
function display() {
  console.log(temp);
  var temp = 'bye';
}
display();
  • নিচের কোডের আউটপুট কি হবে? 
    function codeHoist() {
  a = 10;
  let b = 50;
}
codeHoist();

console.log(a);
console.log(b);
  • নিচের কোডের আউটপুট কি হবে? 
    var x = 10;
console.log(x);

function test() {
  var x = 20;
  console.log(x);

  if (x > 10) {
    let x = 30;
    console.log(x);
  }

  console.log(x);
}

test();
console.log(x);
2.6 জাভাস্ক্রিপ্টে স্কোপ
2.8 জাভাস্ক্রিপ্টে ক্লোজার