জাভাস্ক্রিপ্ট হয়েস্টিং
জাভাস্ক্রিপ্টের একটি ডিফল্ট আচরণ হচ্ছে হয়েস্টিং।
জাভাস্ক্রিপ্টে, একটি ভ্যারিয়েবলকে ডিক্লেয়ার করার পূর্বে ব্যবহার করা যায়।
নিচের দুইটি উদাহরণ একই ফলাফল দেখাবেঃ
উদাহরণ-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<script>
a = 20; // Assign 20 to a
element = document.getElementById("test"); // Find an element
element.innerHTML = a; // Display a in the element
var a; // Declare a
</script>
</body>
</html>
ফলাফল
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<script>
var a; // a ঘোষনা করা হয়েছ
a = 20; // a এর মধ্যে 20 রাখা হয়েছে
element = document.getElementById("test"); // এটা একটা এলিমেন্ট
element.innerHTML = a; // a এর এলিমেন্ট প্রদর্শণ করা হলো
</script>
</body>
</html>
ফলাফল
এটা বুঝার জন্য আপনাকে হয়েস্টিং("hoisting") বিষয়টি বুঝতে হবে।
জাভাস্ক্রিপ্ট ডিফল্টভাবে সকল ডিক্লেয়ারেশনকে তার নিজ নিজ স্কোপের উপরে নিয়ে যায়,একেই হয়েস্টিং বলা হয়।
ইনিশিয়ালাইজেশন হয়েস্টিং-এর অন্তর্ভুক্ত নয়
জাভাস্ক্রিপ্টে হয়েস্টিং শুধুমাত্র ডিক্লেয়ারেশনের জন্য প্রযোজ্য। ইনিশিয়ালাইজেশন হয়েস্টিং-এর অন্তর্ভুক্ত নয়।
নিচের দুইটি উদাহরণ দেখিঃ
উদাহরণ-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<script>
var a = 3; // a এর মান নির্ধারন করা হয়েছে
var b = 8; // b এর মান নির্ধারন করা হয়েছে
element = document.getElementById("test"); // এটা একটা এলিমেন্ট
element.innerHTML = a + " " + b; // a এবং b প্রদর্শন করা হয়েছে
</script>
</body>
</html>
ফলাফল
উদাহরণ-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<script>
var a = 3; // a এর মান নির্ধারন করা হয়েছে
element = document.getElementById("test"); // এটা একটা এলিমেন্ট
element.innerHTML = "a হল " + a + " এবং b হল " + b; // a এবং b প্রদর্শন করা হয়েছে
var b = 8; // b এর মান নির্ধারন করা হয়েছে
</script>
</body>
</html>
ফলাফল
দ্বিতীয় উদাহরণে b এর ভ্যালু undefined দেখিয়েছে। কারণ জাভাস্ক্রিপ্ট শুধুমাত্র ডিক্লেয়ারেশনকে উপরে নিয়েছে, এসাইনকৃত ভ্যালুকে উপরে নেয়নি। তাই b এর ভ্যালু undefined দেখানো হয়েছে।
দ্বিতীয় উদাহরণটি নিচের উদাহরণের মতইঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<script>
var a = 6; // Initialize a
var b; // Declare b
element = document.getElementById("test"); // Find an element
element.innerHTML = a + " " + b; // Display a and b
b = 9; // Assign 9 to b
</script>
</body>
</html>
ফলাফল
সবসময় ভ্যারিয়েবলকে স্কোপের উপরে ডিক্লেয়ার করা একটি ভাল অভ্যাস।
"use strict";
জাভাস্ক্রিপ্ট কোডে "use strict"; ব্যবহার একটি ভালো দিক। ইহা প্রোগ্রামারদের সিন্টেক্সগত ভুল, অনিচ্ছাকৃত গ্লোবাল ভ্যারিয়েবল তৈরি এবং অন্যান্য সমস্যা থেকে রক্ষা করে। এই বিষয়গুলো জাভাস্ক্রিপ্টে কোন এঁরর দেখায় না, কিন্তু "use strict"; ব্যবহার করলে ইহা এঁরর হিসেবে গণ্য হয়।
একটি স্ক্রিপ্ট এবং প্রতিটি ফাংশনের শুরুতে "use strict"; ডিক্লেয়ার করা যায়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h1>"use strict"</h1>
<h3>ভেরিয়েবল ডিক্লার করা ব্যতিত ভেরিয়েবল ব্যবহার করতে অনুমতি দেয় না।</h3>
<p>আপনার ব্রাউজারে এরর রিপোর্ট দেখার জন্য ডিবাগিং (F12) এক্টিভ করুন।</p>
<script>
"use strict";
a = "tamim"; // এটি একটি এরর দেখাবে (a ডিফাইন করা হয়নি).
</script>
</body>
</html>
ফলাফল
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<h2>গ্লোবাল "use strict" ডিক্লারেশন</h2>
<p>আপনার ব্রাউজারে এরর রিপোর্ট দেখার জন্য ডিবাগিং (F12) এক্টিভ করুন।</p>
<script>
"use strict";
myFunc();
function myFunc() {
a = "tamim"; // এটি একটি এরর দেখাবে (a ডিফাইন করা হয়নি)
}
</script>
</body>
</html>
ফলাফল
"use strict"; যদি স্ক্রিপ্টের শুরুতে ব্যবহার করা হয় তবে ইহা স্ক্রিপ্টের সকল কোডের জন্য প্রযোজ্য হবে এবং ফাংশনের ভিতরে ব্যবহার করা হলে ইহা শুধুমাত্র ফাংশনের কোডের জন্য প্রযোজ্য।