Block, Var, Let & Const in JavaScript!

প্রতিদিনের মতই আজ আমরা কিছু জিনিস নিয়ে জানব। চলেন দেখি কি কি ? Block, Var, Let এবং Const; আমরা আগের post এ Hoisting নিয়ে দেখেছিলাম ওইখানে Var নিয়ে কথা বললেও Let এবং Const নিয়ে কথায় বলা হয়নি; চলেন আজ এই গুলা নিয়ে deep drive করি;

Block কি?

Block আর কিছুই না এইটা একটা area. area কি? আপনার বাসাটা যেই জায়গাটুকু নিয়ে আছে ওইটাই একটা area. সবকিছুর একটা area থাকে না হলে তো সব কিছু এলোমেলো হয়ে যাবে। তাহলে চলেন দেখি JavaScript এ area কি? In JavaScript area হল যে Curly brackets {}; যেখানে javascript code লিখা যাবে; যদি এই area টা না থাকত তাহলে কি হত একবার ভেবে দেখেছেন! তা যাই হোক Block মানে হল একটি area বুঝলাম তো।

একটা গল্প শুনি, রহিম কে জিজ্ঞেস করা হয়েছিল যে javascript এ block কি?
কি বলেছিল জানেন! In JavaScript এ for, if এবং function এইগুলা block.

আচ্ছা আমরা মেনে নিলাম যে রহিম ঠিক বলেছিল; তাহলে চলেন কিছু code করে দেখি যে রহিম কি ঠিক বলেছিল কি না ?

if (true) console.log("if");

for (var i = 0; i < 5; i++) console.log("for" , i);

var aFunc = () => console.log("aFunc"); // arrow function 

আচ্ছা এইবার বলেন যে এইখানে কই block হল? এইখানে কোন block এ create হয় নি? তার মানে কি রহিম যা answer দিয়েছিল তা কি ঠিক হল? অবশ্যই না। আমরা কি পড়েছিলাম উপরে যে curly brackets {} থাকতে হবে !

তাহলে এইগুলা কি আসলে এইগুলাকে statement বলা যায়। আমরা এইটুকু clear যে javascript এ block হতে হলে curly brackets থাকতে হবে এবং যেখানে কিছু code ও statement লিখা যাবে।

Var কি?

var হল যে variable declare করার একটা way javascript এর মধ্যে। var একটা global scope এই নিয়ে আগের post দেখেছিলাম link; ওইখানে অনেক কিছু দেখিয়েছি আপনি না দেখে থাকলে highly request থাকবে যে আপনি দেখে আসেন সাথে hoisting এর part টা আপনার clear হয়ে যাবে। একটার সাথে একটা connected তাই কিছু করার থাকে না। আরও অনেক কিছু দেখব নিচে;

var aVar = "hello variable";

Let এবং Const কি ?

Let এবং Const হল যে variable declare করার একটা way javascript এর মধ্যে; তবে এইগুলা es6 এ introduce করা হয়েছে। এইগুলা block scope আমরা কথা বলব block scope নিয়ে ; দুইটার pattern একই তবে একটু difference আছে।

Let কে value না দিয়ে declare করতে পারবেন পরে value assign করতে পারবেন এবং reassign করা যায় মানে আপনি বার বার value assign করতে পারবেন আগে value কে reassign করতে পরবেন;

let aLet;
aLet = "hello let";
console.log(aLet);
aLet = "changed value let"

const কে আপনি কোন ভাবে value না দিয়ে declare করতে পারবেন না আবার reassign করতে পারবেন না।

const aConst;
aConst = "hello const"
console.log(aConst) 
// Uncaught SyntaxError: Missing initializer in const declaration

আচ্ছা উপরে বলছিলাম যে let এবং const block scope সেটা তো দেখা লাগবে চলেন;

{
 var aVar = "Global Scope";
 let aLet = "Block Scope";
 const aConst = "Block Scope";
 
 console.log(aVar); // Global Scop
 console.log(aLet); // Block Scope
 console.log(aConst);// Block Scope
}

দেখেন একটু ভালো করে code এবং picture টা;

কি দেখতে পাচ্ছেন আমরা block এর definition এ কি পড়েছিলাম একটা block create হয় curly brackets দিয়ে; ঠিক তাই হয়েছে। হ্যাঁ এইভাবেও code করা যায় javascript এ; আপনি নিজেই করে দেখবেন কোন error দিবে না;

চলেন আরেকটু change করি;

{
 var aVar = "Global Scope";
 let aLet = "Block Scope";
 const aConst = "Block Scope";
 
 console.log(aVar); // Global Scop
 console.log(aLet); // Block Scope
 console.log(aConst);// Block Scope
}
console.log(this.aVar); // Global Scop
console.log(this.aLet); // undefined 
console.log(this.aConst); // undefined 

দেখেন কি হল এইখানে, var যেহেতু globally declare হয় তাই আমরা this.variable এর নাম দিলে output পাচ্ছি; কিন্তু let এবং const যেহেতু globally declare হয় না তাই output undefined দিচ্ছে। আচ্ছা this দিয়ে কিভাবে নেওয়া যায়; সেটা না জানলে this নিয়ে দুইটা post করেছি আগে দুই part করে ঐটা দেখলে আপনার this নিয়ে clear হয়ে যাবে ইনশাআল্লাহ্‌।

এইবার আসেন একটু globally declare করি ;

var aVar = "Global Scope";
let aLet = "Block Scope";
const aConst = "Block Scope";

console.log(this.aVar); // Global Scop
console.log(this.aLet); // undefined
console.log(this.aConst); // undefined

তারপরও output কি দেখেছেন? কারণ হল let এবং const global এর কাছে নাই এরা completly আলাদা;

চলেন code আবারও একটু change করি;

var aVar = "Global Scope";
let aLet = "Global Scope";
const aConst = "Global Scope";

{
 var aVar = "inside block var";
 let aLet = "inside block let";
 const aConst = "inside block const";
 
 console.log(aVar); // inside block var
 console.log(aLet); // inside block let
 console.log(aConst);// inside block const
}

console.log(aVar); // inside block var
console.log(aLet); // Global Scope Let
console.log(aConst); // Global Scope Const 

এইখানে দেখেন কি হইছে?

দেখেছেন এইবার কি হইছে আবার নতুন একটা tab দেখা যাচ্ছে picture Script নামে; এইটা নিয়ে দেখবো তার আগে একটা জিনিস clear করা দরকার সেটা হল যে আপনি দেখেন যে; আমরা globally এবং block এর মধ্যে একই নামে variable declare করেছি । কিন্তু aVar variable কিন্তু দেখেন দুই জায়গায় একই output আর বাকি দুইটা let এবং const variable এর output কিন্তু একই নয় আলাদা; block এর মধ্যে log গুলা block থেকে নিয়ে output দিয়েছে let এবং const; এছাড়াও globally এর ক্ষেত্রে log গুলা global থেকে নিয়েছে output দিয়েছে।

Get Minhajul Islam (Minhaj)’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

কিন্তু aVar variable দেখেন দুই জায়গায় একই output হওয়ার কারণ হল এই যে যখন aVar global declare হয়েছে ঠিক একই নাম দিয়ে block এর মধ্যে declare হয়েছে আমরা আগেই দেখেছি যে block এর মধ্যেও aVar globally declare হয়েছিল তাই memory একটা জায়গায় point করে রেখেছিল; পরে যখন আবার নতুন value পেয়েছে block scope এর মধ্যে তখন new value টা assign করে রেখে দিয়েছে;

কিন্তু let এবং const আলাদা আলাদা memory তে point করে রেখেছে; তাই output ও আলাদা করে দিয়েছে।

নিচে দেখেন picture টাতে mark করে দেখিয়েছি যে variable aVar value reassign করেছে।

উপরে আমরা picture একটা Script নামে tab দেখেছি; চলেন ঐটা নিয়ে একটু দেখি;

console.log(aVar); // undefined 
var aVar = "Global Scope";
console.log(aVar); // Global Scope

var দিয়ে declare করলে দেখবেন যে এইরকম output দিবে; এইটা কি কারণে হচ্ছে সেটা আমরা execution context দেখেছিলাম;

এইবার আসেন let এবং const এর ক্ষেত্রে;

console.log(aLet); 
// Uncaught ReferenceError: Cannot access 'aLet' before initialization
console.log(aConst); 

let aLet = "Let Block Scope";
const aConst = "Const Block Scope";

এইভাবে যদি log করতে চাই তাহলে error দিচ্ছে; কেন দিচ্ছে এইগুলা block scope javascript আগে থেকে জানে যে let এবং const দিয়ে যদি কোন variable declare করার আগে log করে বা access করতে চায় তাহলে error দিবে ; যেটাকে Temporal Dead Zone (TDZ) নামে পরিচিত।

এখন যদি কেউ যদি বলে Temporal Dead Zone (TDZ) কি? সোজা answer হল যে Can’t access before initialization.
এখন যদি বলেন যে let এবং const কেন block scope? এইটার কোন ব্যাখ্যা নাই আমার কাছে, তবে বলতে পারি কেন করেছে; আমাদের code করার সুবিধাতে; আমাদের সুবিধা হয় যাতে আমরা সুন্দর code করতে পারি হয়তো এই জন্য;

চলেন কিছু example দেখি;

var aVar = "Global Variable";

if (true) {
 var aVar = "if inside variable";
 console.log(aVar); // if inside variable
}

console.log(aVar); // if inside variable

এইটা আপনার পারার কথা কিন্তু? আমরা আগে দেখেছিলাম;

এখন যদি এইটা কে let বা const দিয়ে কনভার্ট করি তাহলে কি হবে?

let aLet = "Global Variable";

if (true) {
 let aLet = "if inside variable";
 console.log(aLet); // if inside variable
}

console.log(aLet); // Global Variable

দেখেন let block scope হওয়ার কারণে aLet নামে দুইটা জায়গায় memory point করেছে; তাই দুইটাই isolated ভাবে কাজ করতেছে? আপনি const দিয়েও করে দেখবেন একই output পাবেন।

এইবার চলেন আরেকটা example দেখি;

var aFunc = function () {
 var aVar = "Function 1";
 console.log(aVar);
};

var aFunc = function () {
 var aVar = "Function 2";
 console.log(aVar); //Function 2
};

aFunc();

তেমন কিছু করি নাই একই নামে দুইটা variable এর মধ্যে দুইটা function রাখছি;
এইবার কি হবে code কিন্তু output দিবে কোন error দিবে না; বিশ্বাস না হলে আপনি নিজেই run করে দেখেন।
এইখানে output দিবে Function 2 এই টা কেন দিবে এইটা aVar variable এর মধ্যে উপরের function টা আগে assign করবে পড়ে আবার দেখবে যে same নামে variable এক জায়গায় memory point তাই reassign করবে আগেই দেখেছিলাম আমরা। তবে এইবার পুরা function body কে reassign করবে।

এই code যদি আপনি let or const দিয়ে করেন তাহলে দেখবেন যে আপনাকে runtime error দিয়ে বসে আছে; আপনাকে একই নামে declare এ করতে দিবে না ।

const aFunc = function () {
 var aVar = "Function 1";
 console.log(aVar);
};

const aFunc = function () {
 var aVar = "Function 2";
 console.log(aVar); //Function 2
};

aFunc(); 
// Uncaught SyntaxError: Identifier 'aFunc' has already been declared

বলবে এইটা করতে পারবেন না এইটা কোন rule এর মধ্যে পরে না; তাই এই নেনে error: Uncaught SyntaxError

চলেন আরও একটা example দেখি;

function aFunc() { 
 let number = 10;
 const string = "string in aFunc";
 function bFunc() {
  let number = 100;
  const string = "string in bFunc";
  console.log(number);
  console.log(string);
 }
 bFunc();
 console.log(number);
 console.log(string);
}

aFunc();

এইখানে aFunc function এর ভিতরে আরেকটা function নিয়েছি; দুইটা function এর মধ্যে একই নামে variable declare করেছি; এইগুলা completely আলাদা আলাদা ভাবে memory point করেছে সবগুলা isolated. এই function টা কিভাবে execute হবে এইটা নিয়ে আগের execution context এর post আছে দেখতে পারেন।

দেখেন picture a call stack এ দুইটা funtion আছে; আপনি যখন click করবেন function নামের মধ্যে তখন দেখেবেন local নামে tab এ change হয়ে যাবে যেই function এর body ওইটা তখন local a চলে আসবে।

Conclusion:

আমরা বুঝতে পেরেছি যে Block মানে হল কোডের একটি নির্দিষ্ট এলাকা যেখানে আমরা বিভিন্ন statement এবং code লিখতে পারি।

আমরা দেখেছি var কিভাবে global scope তৈরি করে এবং এটি block এর বাইরে থেকেও access করা যায়। অন্যদিকে, let এবং const ব্যবহার করে আমরা block-scoped variable তৈরি করতে পারি, যা global scope এর সঙ্গে conflict হয় না।

Temporal Dead Zone (TDZ) সম্পর্কে আলোচনা করেছি, let এবং const variable গুলির declare করার উপরে অবস্থানে access করা যায় না।

এছাড়াও, function overwrite করার সময় var কিভাবে কাজ করে এবং let ও const ব্যবহার করলে Uncaught SyntaxError error হয়।

আমার আগের অনেক লিখা আছে যেইগুলা প্রতিদিন একটা করে পাবলিশ করতেছি।

লিখতে গিয়ে আমার ভুল হতে পারে; দয়া করে comments করে জানাবেন, আমি ঠিক করে নেব ইনশাআল্লাহ্‌।