var, let এবং const এর মধ্যে পার্থক্য বুঝার আগে আমাদের Scope ভাল ভাবে বুঝতে হবে তাই আমরা আগে Scope সম্পর্কে জানবো তারপর আমরা var, let এবং const এর মধ্যে পার্থক্য নিয়ে আলোচনা শুরু করব।

What is Scope?

Scope আপনার কোডের, কোনো variable অথবা অন্যান্য resource এর visibility বা accessibility নির্ধারণ করে। অর্থাৎ কোন জায়গা থেকে কোন resource ব্যাবহার করার কতটুকু অধিকার আছে বা নেই। অর্থাৎ javascritp এর কোডের যেকোনো resource এর access পেতে হলে, resouce টিকে একটি নির্দিষ্ট ক্ষেত্রের(একটি নির্দিষ্ট অংশের মদ্ধে সীমাবদ্ধ) আওতাভুক্ত হতে হয়।

Global Scope

JavaScript ডকুমেন্টে কেবলমাত্র একটি Global scope রয়েছে। সমস্ত function এর বাইরের ক্ষেত্রটিকে Global scope হিসেবে বিবেচনা করা হয়। Global scope এর অভ্যন্তরে define করা variables গুলি অন্য কোনও scope থেকে access নেওয়া এবং পরিবর্তন করা যেতে পারে।

var name = 'Shayaike';console.log(name); // logs 'Shayaike'function logName() {
    console.log(name); // 'name' is accessible here and everywhere else
}logName(); // logs 'Shayaike'

এখানে, name ভ্যারিয়াবলটি global scope এর অন্তর্ভুক্ত। কারণ ভ্যারিয়াবলটি কোনো function এর অন্তর্ভুক্ত না। এবং name ভ্যারিবলটিকে আমরা অন্য যেকোনো function থেকে খুব সহজেই access নিতে পারি। এবং চাইলে পরিবর্তনও করতে পারি। কিন্তু মনে রাখতে হবে, পরিবর্তন শুধুমাত্র ওই function এর মদ্ধেই সীমাবদ্ধ থাকবে।

var name = 'Shayaike';console.log(name); // logs 'Shayaike'function logName() {
    console.log(name); // 'name' is accessible here and everywhere else
		name = 'Twinkle' ; //  name is changed to 'Twinkle'
}logName();console.log(name) // logs 'Shayaike'

logName ফাংশনটি থেকে name ভ্যারিয়াবলটি পরিবর্তন করা হলেও, global scope এ কিন্তু পরিবর্তন হয় নি। ওই পরিবর্তনটা শুধুমাত্র logName ফাংশনের মদ্ধেই কার্যকর থাকবে।

Local Scope

কোনও function এর অভ্যন্তরে সংজ্ঞায়িত Variable গুলিকে local scope এর অন্তর্ভুক্ত বলা হয়। এবং তাদের অভ্যন্তরীণ function কে call এর জন্য আলাদা scope রয়েছে। এর অর্থ হলো, আমরা global scope এর অভ্যন্তরীণ ফাংশন বা ভ্যারিয়াবল গুলিকে শুধুমাত্র ওই ফাংশন থেকেই access করতে পারবো।

//global scope
function foo1(){
	var abc = 'shayaike'; // variable declare in local scope
	function foo2(){ // function declare in local scope
		var xyz = 'twinkle'
		console.log(abc); // logs 'shayaike'
	}	
	foo2();
	//console.log(xyz) // xyz is not defined
}foo1();
//foo2(); // foo2 is not defined

foo1 ফাংশনটি declare করার সাথে সাথে foo1 এর নিজের জন্য একটি local scope তৈরি করল। foo1 এর মধ্যে একটি ফাংশন এবং একটি ভ্যারিয়াবল declare করা আছে। এই ভ্যারিয়াবল বা ফাংশনটিকে শুধুমাত্র foo1 এর ভিতর থেকেই access করা যাবে। আবার foo2 যখন declare করা হলো আরো একটা local scope তৈরি হলো। যে কারণে xyz ভ্যারিয়াবলটিকে অন্য কোনো scope থেকে access নেয়া যায় নি।

এখানে তাহলে আমরা একই নামের variable গুলি বিভিন্ন functions এ ব্যবহার করতে পারি। কারণ এই variable গুলি তাদের নিজ নিজ function এ আবদ্ধ, এদের প্রত্যেকের আলাদা আলাদা scopes রয়েছে এবং এই scopes গুলি অন্যান্য functions এ accessible নয়।

//global scope
var xyz = 'Hm Nayem'//global scope
function foo1(){
    //local scope 1
		var xyz = 'shayaike';
		
		//local scope 1
    function foo2(){
        //local scope 2
				var xyz = 'twinkle'
				console.log(xyz) // logs 'twinkle'
    }
		console.log(xyz) // logs 'shayaike'
}console.log(xyz) // logs 'hm Nayem'

আমরা দেখতে পাচ্ছি, ভ্যারিয়াবল এর নাম একই থাকা সত্ত্বেও, শুধুমাত্র scope ভিন্ন হওয়ার কারণে xyz আলাদা আলাদা result দেখাচ্ছে।

Local scope কে দুটি ভাগে ভাগ করা যায়, function scope এবং block scope। variable কে declare করার নতুন দুটি উপায় const এবং let একসাথে ECMA script 6 (ES6) এ চালু করা হয়েছে।

Function Scope

Function scope এর অর্থ হল কোনো Function এ সংজ্ঞায়িত parameters এবং variable গুলি function এর অভ্যন্তরে সর্বত্র দৃশ্যমান হয়। তবে function এর বাইরে দৃশ্যমান হয় না।

function foo(){
    var fruit ='apple';
    console.log('inside function: ',fruit);
}foo();                    //inside function: apple
console.log(fruit);       //error: fruit is not defined

আপনি যখনই কোনও function এ variable ঘোষণা করেন, কেবলমাত্র function এর মধ্যে variable টি দৃশ্যমান হয়। আপনি এটি function এর বাইরে থেকে access করতে পারবেন না। function scope accessibility এর জন্য variable declare এর জন্য var কি-ওয়ার্ড ব্যাবহার করা হয়।

Block Scope

Block Scope হল if, switch conditions অথবা for এবং while loops এর মধ্যকার area। সাধারণভাবে বলতে গেলে, আপনি যখনই function ব্যাতিত অন্য কোনো যায়গায় {curly brackets} দেখবেন তখনই বুঝে নিবেন এটি একটি Block বা ক্ষেত্র । ES6- এ const এবং let কীওয়ার্ডগুলি developers দের block Scope এ variable ঘোষণা করার অনুমতি দেয়, যার অর্থ এই variable গুলি সংশ্লিষ্ট ব্লকের মধ্যেই বিদ্যমান রাখে। কিন্তু মনে রাখতে হবে এটা function scopeএ কাজ করে না অর্থাৎ নির্দিষ্ট block এ আবদ্ধ করে না। আবার block scope এ ব্যাবহারিত var keyword এর ভ্যারিয়াবল গুলিকে block scope এর বাইরে access নেওয়া যায়।

function foo(){
    if(true){
        var fruit1 = 'apple';        //exist in function scope
        const fruit2 = 'banana';     //exist in block scope
        let fruit3 = 'strawberry';   //exist in block scope    }
    console.log(fruit1);
    console.log(fruit2);
    console.log(fruit3);
}foo();
//result:
//apple
//error: fruit2 is not defined
//error: fruit3 is not defined

What’s the Difference Between Var, Let, and Const?

ES2015 (ES6) এর সাথে প্রচুর নতুন বৈশিষ্ট্য এসেছে। এবং এখন, ২০২০ সালে এসে, ধরে নেওয়া হয়েছে যায় যে প্রচুর JavaScript developers ইতোমধ্যে এই বৈশিষ্ট্য গুলোর সাথে পরিচিত হয়ে পড়েছেন এবং এই বৈশিষ্ট্যগুলি ব্যবহার শুরু করে ফেলেছেন।

ES6 এর নতুন বৈশিষ্ট্যগুলোর মধ্যে let এবং const হল অন্যতম, যা variable declare এর জন্য ব্যবহার করা হয়। তাহলে এখন প্রশ্ন হচ্ছে, পূর্ব থেকে ব্যবহৃত Var এর সাথে ES6 এ পরিচয় করানো Let, এবং Const এর মধ্যে পার্থক্য কোথায় ? যদি আপনি এখনও এই বিষয়টি ভালো করে না বুঝেন তাহলে আশা করি যে এই আর্টিকেলটি আপনার জন্য।

এই আর্টিকেলটিতে আমরা scopeএর use, এবং hoisting এর উপর ভিত্তি করে var, let এবং const নিয়ে আলোচনা করবো ।

Var

ES6 এর আবির্ভাবের আগেই Var declare করার নিয়ম আমরা জানি। প্রথমে আসুন আমরা এই বিষয়গুলি নিয়ে আলোচনা শুরু করার আগে, var সম্পর্কে ভাল করে বুঝে আসি।

Use of var

আমরা আগেই জেনেছি, Scope মুলত variables গুলো যেখানে ব্যবহারের জন্য available। Var এর মাধ্যমে global scope অথবা function/local scoped declare করা হয়। তবে var keyword ব্যাবহার করাটা বাধ্যতামূলক নয় আপনি চাইলে let অথবা constও প্রয়োজন অনুসারে ব্যাবহার করতে পারেন। কারন functional scope এর ক্ষেত্রে let,const বা var কোনোরূপ difference create করে না।

আরও ভালোভাবে বুঝতে, নীচের উদাহরণটি দেখুন।

var greeter = "hey hi";
    
function newFunction() {
  var hello = "hello";
}

এখানে “greeter” হল global scope কারন greeter variable টি function এর বাইরে declare করা হয়েছ এবং “hello “ হল function scope কারন hello variable টি function এর ভেতরে declare করা হয়েছ।

সুতরাং যদি আমরা এটি করি:

var tester = "hey hi";
    
function newFunction() {
    var hello = "hello";
 }
console.log(hello); // error: hello is not defined

এখানে আমরা একটি error পাবো কারন “hello” variable এখানে function scope এবং যার ফলে “hello” variable টি function এর বাইরে থেকে ব্যবহার করা সম্ভব না।

Difference between var and const

আমরা var ব্যবহার করে, পূর্বে declare করা কোনো variable কে re-declared অথবা variable এর মান update করতে পারি যদি তা একই scope মধ্যে থাকে এবং কোন error পাব না।

var greeter = "hey hi";
 var greeter = "say Hello instead";

এবং এই ভাবেও মান update করতে পারিঃ

var greeter = "hey hi";
greeter = "say Hello instead";

এই একই কাজ আমরা const keyword ব্যাবহার করে কখনই করতে পারবো না।ভ্যারিয়াবল declare এর ক্ষেত্রে

const greeter = "hey hi";
 const greeter = "say Hello instead"; //SyntaxError: Identifier 'abc' 
                                      //has already been declared

আবার ভ্যারিয়াবল update এর ক্ষেত্রে

const greeter = "hey hi";
greeter = "say Hello instead"; //TypeError: Assignment to constant variable.

var এবং const এ উপরিউক্ত ক্ষেত্রে যে difference তৈরি করছে। let এবং const এর ক্ষেত্রেও একই difference create করবে।

Hoisting of var

Hoisting হল JavaScript এর একটি mechanism যার ফলে declare করা variable টি code execution হওয়ার আগে scope এর উপরে এ চলে যাবে। যদি আমরা এটি করিঃ

console.log (greeter);
var greeter = "say hello"

এই কোডটি interpreted হবে নিম্নের মতঃ

console.log(greeter); // greeter is undefined
var greeter = "say hello"

var দ্বারা declare করা variables টি code execute হওয়ার আগে scope এর উপরে এ চলে যায় এবং execute হওয়ার সময় এর value হবে undefined।

উপরের কোডটাতে যদি আমরা let keyword টা ব্যাবহার করতাম

console.log(greeter);  // ReferenceError: Cannot access 'greet' before initialization
let greeter = "say hello"

মনে রাখতে হবে let এর ক্ষেত্রে hoising কার্যকারী না। এবং const ব্যাবহার করলেও কম্পাইলার আমাদের same error দেখাবে।

console.log(greeter);  // ReferenceError: Cannot access 'greet' before initialization
const greeter = "say hello"

Problem with var

“var” এর একটি দুর্বলতা আছে যা আমি নিচের উদাহরনের মাধ্যমে বর্ননা করছিঃ

var greeter = "hey hi";
var times = 4;if (times > 3) {
	var greeter = "say Hello instead"; 
}
    
console.log(greeter) // "say Hello instead"

যদি “times > 3” সত্য হয় তাহলে “greeter” redefined হয়ে যাবে এবং “say Hello instead” ফলাফল দিবে। এখানে ততক্ষন কোন সমস্যা নাই যতক্ষন আমরা জেনে “greeter” কে redefined করছি মানে আমি জানি যে আমি আগেও একবার “greeter” নামে একটা variable defined করছি। তখনই সমস্যা হবে যখন আমি জানি না যে আগেও একবার “greeter” নামে একটা variable defined করা আছে।

যদি আমাদের কোডের অন্য কোথাও “greeter” নামে একটা variable defined করা থাকে তাহলে আমরা অনের সমস্যায় পরবো এবং আমাদের কোডেও অনেক Bug থেকে যাবে। এই সমস্যা সমাধানের জন্য let গুরুত্বপূর্ণ।

Solving this problem with let

আমরা উপরিউক্ত সমস্যাটি let keyword ব্যাবহার করার মাধ্যমে solve করতে পারি

let greeter = 'hey hi';
var times = 4;if (times > 3) {
  let greeter = 'say Hello instead';
}console.log(greeter); // "say hi"

যখন আমারা let keyword টি block scope এর ভিতরে redifined করলাম তখন greeter ভ্যারিয়াবলের নতুন

মানটা শুধুমাত্র if block এর মদ্ধেই কার্যকর। যার ফলে যখন আমরা greeter কে প্রিন্ট করলাম তখন global scope এর মানটাই show করবে। আর ঠিক এই কারনেই let keyword টা important।

Reffrence : Stack Learner