JavaScript Hoisting Explained With Examples

JavaScript Hoisting

জাভাস্ক্রিপ্টের বেসিক গুরুত্বপূর্ন বিষয়ের মধ্যে হোইস্টিং (Hoisting ) অন্যতম। একজন ডেভেলপার হিসাবে হোইস্টিং (Hoisting ) সম্পর্কে বিস্তারিত জানা জরুরী। আমি সহজ ভাষায় হোইস্টিং সম্পর্কে আলোচানা করার চেষ্টা করবো।

এই আর্টিকেল এর মাধ্যমে উদাহরণ সহ কিভাবে হোইস্টিং (Hoisting ) কাজ করে, সেটি জানবো।

জাভাস্ক্রিপ্ট হোইস্টিং (Hoisting ) কি?
হোইস্টিং শব্দের অর্থ উত্তোলন। সহজ ভাবে বলা যায়, Hoisting হলো জাভাস্ক্রিপ্টের Default Behaviour যা ফাংশন বা ভ্যারিয়বলের declaration অংশকে উপরে নিয়ে যায়। var এর ক্ষেত্রে hoisting হয়ে value = undefined হয়ে যায়, অথ্যাৎ মেমরিতে একটা reference তৈরী হয়।

Know about variable declaration and assignment

var a; //declaration
a = 10; // assignment or initialization
console.log(a); // output

// javascript hoisting is a concept of moving variable and function declarations to the top of their scope.

We follow tow things of hoisting

before hoisting

var a = 10;
console.log(a); // output 10

var b = 20;
console.log(b); // output 20

after hoisting

var a;
var b;
a = 10;
console.log(a); // output 10
console.log(b); // output undefined
b = 20;

// JavaScript Initializations are Not Hoisted

জাভাস্ক্রিপ্টে var, let, const কিভাবে Hoisting হয় নিম্নে দেওয়া হলো।

var এর ক্ষেত্রে সে নিজের স্কোপের ভিতর সমস্ত ভেরিয়েবল ও ফাংশনের ডিক্লেয়ারেশনকে উপরে নিয়ে যায়। সেই সাথে var বা ফাংশনের মান হিসাবে মেমরির রেফারেন্সে undefined প্রথমিক ভাবে ইনিশিয়ালাইজ হয়। তাই আমরা কোন ভেরিয়েবল এর মান ইনিশিয়ালাইজ না করে সেই ভেরিয়েবলকে অ্যাক্সেস করতে চাইলে সেটিকে undefined দেখায়।

Get M Asadullah’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example

// Example : 1
console.log(a); // undefined
var a = 10; // declaration and assignment

// Example : 2
console.log(b); // undefined
b = 20; // assignment
var b; // declaration

let এর ক্ষেত্রে একইভাবে তার সকল ডিক্লেয়ারেশন কে উপরে উঠায়, কিন্তু প্রথমিক ভাবে মেমরিতে কোন রেফারেন্স তৈরি করেনা, তাই এ ক্ষেত্রে আমাকে রেফারেন্স Error দিবে। তবে আমরা সেই স্থানে ডিক্লেয়ারেশন করি, সেই স্থানে সে রেফারেন্স তৈরি করে এবং undefined হয়। পরবর্তীতে assignement করতে সে তার মান পেয়ে যায়।

Example

// Example -1:
let a;
console.log(a); // output undefined
a = 10;


// Example -2:
b = 10;
console.log(b); // output Reference error
let b; 
// Since, let doesn't create any space in memory. It will come be Reference error.


// Example -3:
let c;
c = 10;
console.log(c); // output 10

// Variables defined with let and const are hoisted to the top of the block, but not initialized.

const এর ক্ষেত্রে একই ভাবে সকল declaration কে উত্তোলন করে, But not initialized. যেহেতু const এর ভ্যালুকে পুনরায় অ্যাসাইন করা যায়না। তাই এটিকে Reference error অথবা let, var এর মত করে চিন্তা করলে Syntax error দেখাবে।

// Example -1:
console.log(a); // Reference error
const a = 10;

// Example -2:
a = 10;
console.log(a); // Syntax error
const a;

//finally var, let and const can be hoisted. but let and const doesn't initialize.

উপসংহার, পরিশেষে বলা যায় Javascript এর মধ্যে Hoisting মাধ্যমে নিজস্ব স্কোপের সকল ডিক্লেয়ারেশনকে উত্তলন করে। তবে শুধু মাত্র var ভেরিয়েবল এর ক্ষেত্রে মেমরিতে একটি রেফারেন্স তৈরি করে, সেটি Undefined হয়ে থাকে।
let, const এর ক্ষেত্রে কোন রেফারেন্স তৈরি করেনা। শুধু মাত্র ডিক্লেয়ারেশনকে উত্তলন করে। তাই মান অ্যাসাইন করার আগে অ্যাক্সেস করতে চাইলে সেটি রেফারেন্স এরর দেখাবে।

if there are any mistakes in my article, please let me know asad2002web@gmail.com