var, let & const - তফাৎ কি? 🤷‍♂️

var, let, const হচ্ছে জাভাস্ক্রিপ্টে ভ্যারিয়েবল ডিক্লেয়ার করার keyword । অর্থাৎ, কোনো ভ্যারিয়েবল লিখার শুরুতে এগুলোর যেকোনো ১ টিকে লিখতে হয়। কাজ সবগুলোর এক হলেও ভাব কিন্তু আলাদা। তো কোন কোন দিক দিয়ে আলাদা চলুন দেখে নেয়া যাক —

Redeclaration & Reassignment ( রিডিক্লেয়ারেশন ও রিঅ্যাআসাইনমেন্ট ):

ধরেন একটা ভ্যারিয়েবল ডিক্লেয়ার করলেন। এখন একই নামে যদি আরেকটা ভ্যারিয়েবল ডিক্লেয়ার করেন, সেটা কি জাভাস্ক্রিপ্ট মেনে নিবে? উত্তর হচ্ছে - নিবে আবার নিবে না! মানে? বুঝিয়ে বলছি —

যদি ভ্যারিয়েবলটি var দিয়ে ডিক্লেয়ার করেন তাহলে নিবে। আর যদি let অথবা const দিয়ে করেন তাহলে নিবে না। যেমনঃ

var job = "Engineer";
console.log(job); // output: Engineer

var job = "rikshwa calano"
console.log(job); // output: rikshwa calano

কোনো Error দেয় নাই, রাইট? এবার let দিয়ে ট্রাই করেন —

let gf = "Xadia";
console.log(gf); // output: "xadia";

let gf = "arekta";

এতটুকু রান করলেই সে ধরে বসবে - এই মিয়া কয়টা লাগে!! মানে, তার ভাষায় বললে -
Uncaught SyntaxError: Identifier 'gf' has already been declared

এভাবে const দিয়ে ডিক্লেয়ার করলেও একই এরর দিবে।

আচ্ছা, ডিক্লেয়ার এর কথা তো বুঝলাম কিন্তু reassign ( আপডেট ) করা যাবে? হ্যাঁ var আর let এর ক্ষেত্রে যাবে। তবে const এর ক্ষেত্রে যাবে না। যেমনঃ

let gf = "ex";
console.log(gf); // output: ex

gf = "present";
console.log(gf); // output: present

কোনো সমস্যা নেই তাই না? কিন্তু const দিয়ে try করে দেখেন —

const birthday = "29-08-2002";
console.log(birthday); // output: 29-08-2002

const birthday = "30-09-2003";

// Error ধরিয়ে দিবে - 
Uncaught TypeError: Assignment to constant variable.

মানে, কাজ হচ্ছে ২ টা - redeclaration ও reassignment । const কোনোটাই allow করে না। let একটা করে - reassignment । আর var দুইটাই করে।

কে কি allow করে, না করে বোঝা গেল। এবার তাদের সীমানা মাপা যাক —

Scope

Scope মানে সীমানা। সবকিছুরই একটা সীমানা থাকে। সো, জাভাস্ক্রিপ্টে variable কে access করারও সীমানা রয়েছে। তবে তা নির্ধারণ হয় তাকে কোন keyword দিয়ে declare করা হয়েছে তার উপর । JavaScript এ ৩ ধরণের scope রয়েছে -

১। Function Scope

২। Block Scope

৩। Global Scope

এর মধ্যে আজকের আলোচনায় শুধু ১ম দুইটা নিয়েই কথা বলব।

Function Scope

Function Scope বলতে বোঝায় তার মধ্যে লিখিত ভ্যারিয়েবলকে access করার সীমানা বা scope তার body-র মধ্যেই সীমাবদ্ধ। var ভ্যারিয়েবল Function Scoped । যেমন —

function a(){
    var text = "are paiba na";
}
// এখানে অর্থাৎ ফাংশনের বাহিরে `text` কে access করতে গেলে Error দিবে।

Block Scope

Block হচ্ছে curly braces { } দ্বারা আবদ্ধ জায়গা। এটা যেকোনো ১ জোড়া curly braces হতে পারে। if...else, for loop হতে পারে অথবা খালি { } ও হতে পারে।

let আর const ভ্যারিয়েবল Block Scoped

বোঝার সুবিধার্থে নিচে কিছু উদাহরণ দেওয়া হলো —

if(true){
    let success = "loading";
    var varVariable = "eito achi";
}
// `success`কে শুধু if এর curly braces এর ভিতরেই access করা যাবে।
// কিন্তু `varVariable` কে বাইরেও পাওয়া যাবে।

console.log(varVariable); // output: eito achi

{
    var hello = "hello";
    let isItAvailable = "don't know";
    const whatAboutConst = "same as let";
}

// {...} এর ভিতর লিখা ভ্যারিয়েবলগুলোকে যদি বাহিরে access করতে যাই, 
// তাহলে একমাত্র `hello`কেই পাওয়া যাবে। বাকি ২ টার ক্ষেত্রে Error দিবে।

function go(){
    let isGoing = true;
}
// `isGoing` কে ফাংশনের বাহিরে পাওয়া যাবে না।

এখানে দেখা যাচ্ছে let এবং const ভ্যারিয়েবলকেও ফাংশনের বাহিরে access করা যাচ্ছে না। তাই বলে তাদেরকে Function Scoped বলা যাবে না।

তো এই পর্যন্ত তাদের মধ্যে ২ টা পয়েন্টে মিল অমিল দেখলাম। এখন লাস্ট আরেকটা ছোট্ট পয়েন্টে তাদের পার্থক্য দেখে নেয়া যাক —

Hoisting

Hoisting মানে উপরে উঠানো। এখানে ভ্যারিয়েবলের ডিক্লেয়ারেশন উপরে উঠানো। আমরা জানি ভ্যারিয়েবল ডিক্লেয়ার করার পর তা access করা যায়। কিন্তু জাভাস্ক্রিপ্টের একটা ডিফল্ট বিহেভিয়র Hoisting। মানে ডিক্লেয়ার করার আগেই ভ্যারিয়েবল access করা যায়। তবে সব ভ্যারিয়েবল না, শুধুমাত্র var ভ্যারিয়েবল।

console.log(vobissot); // output: > ojana

var vobissot = "ojana";

‘use strict’ ব্যবহার করলে অবশ্য এই আচরণ বন্ধ করা যায়। সেটা বিষয় না। বিষয় হচ্ছে var সাথে let আর const এর এই জায়গায় তফাৎ আছে ।

একটু সামারি 🤏

var, let আর const এর মধ্যে ৩ টা পয়েন্টে পার্থক্য - রিঅ্যাসাইন ও রিডিক্লেয়ার করা, Scope এবং Hoisting। কোনো পয়েন্টে var ও let সিমিলার, কোনো পয়েন্টে let ও const সিমিলার। কিন্তু দিনশেষে ৩ টাই আলাদা।

এখন কাকে বানাবো আমার ভ্যারিয়েবলের Keyword? 🤔

যখন যাকে লাগে। যদি ভ্যারিয়েবলটা এমন হয় যে তাকে পরে reassign করতে হবে না তাহলে const

const birthday = "01-01-2002";
const pi = 3.1416;

আর যদি reassign করার মত হয় তাহলে let

let trend = "kichu ekta ghote geche";
let age = 20;

আর redeclare করার তো প্রয়োজনই পড়ে না। তাও যদি ইচ্ছা হয়, তাহলে scope এর বাহিরে করলেই চলে!

if(true){
    let gf = "Angela";
}

let gf = "Xadia";

var ব্যবহার করার কোনো দরকারই নাই। বরং ব্যবহার করলে মাঝে মধ্যে অনাকাঙ্খিত সমস্যা ও হতে পারে। তাই আমরা let ও const ই ব্যবহার করব।

var এত অপ্রয়োজনীয় হলে তাকে রাখছে কেন ? 🙄

আসলে vanilla JavaScript এ একমাত্র var ই আছে। বাকি দুই ভদ্রলোক ২০১৫ সালে আসা ES6 এর জিনিস। আমরা এখন যতই let ও const ব্যবহার করি না কেন ব্রাউজারের জাভাস্ক্রিপ্ট ইঞ্জিনের মাধ্যমে তা var এ-ই convert হয়।

শেষ পর্যন্ত স্ক্রল করার জন্য ধন্যবাদ 😀
আর হ্যাঁ, ভালো লাগলে লাইক-কমেন্ট করে উৎসাহিত করবেন 😊