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

আমার শেষ লেখায় জাভাস্ক্রিটের Execution Context এবং Scope নিয়ে লিখেছিলাম। আজকে আলোচনা করবো জাভাস্ক্রিপ্টের আরেকটি মহা গুরুত্বপূর্ণ বিষয় Hoisting নিয়ে। এটি একটি খুবই সহজ বিষয় হলেও অনেকের কাছে খুবই কঠিন এবং যখন প্রথমবার এটির সাথে পরিচয় হয় তখন অনেকের ঘুম হারামের কারণও হয়ে দাড়ায়। যাইহোক, আমি চেষ্টা করবো যতটা সহজভাবে আলোচনা করা যায়। এই লেখাটি পড়ার আগে আমার Execution Context এবং Scope নিয়ে লেখা দুটি আর্টিকেল পড়ে আসতে বলবো। তাহলে Hoisting বুঝতে আপনার জন্যে অনেক সহজ হয়ে যাবে।

১। Execution Context

২। Scope

Hoisting কি?

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

উদাহরণস্বরূপঃ

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

hoisting(); // Ouput: undefined

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

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

জাভাস্ক্রিপ্টে Hoisting হচ্ছে দুই প্রকার। ১. Variable Hoisting এবং ২. Function Hoisting।

১. Variable Hoisting

    console.log(hoistingIntro); // Outpur: 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();

আজকের জন্যে বিদায় নিচ্ছি পরবর্তী লেখা পড়ার আমন্ত্রণ জানিয়ে। যদি কোন প্রশ্ন বা মতামত থাকে তাহলে অবশ্যই জানাবেন।