হ্যালো কাছের মানুষজন,

আজকের লেসনে আমরা জাভাস্ক্রিপ্ট ইএস-৬(ES6) এর Let, and Const কীওয়ার্ড কিভাবে কাজ করে সাথে Var, Let, and Const — পার্থক্যটা কি এবং কোথায় সেগুলো নিয়েও আলোচনা করবো।

আগামী কয়েক মিনিট আপনার গুলু-গুলু বাবু প্রেমিকার সাথে চ্যাটিং আর ফ্ল্যাট বুকিং বাদ দিয়ে ফিউচারে প্রেমিকার থেকে পাওয়া আনলিমিটেড পেইন কোন কিওয়ার্ড ব্যাবহার করে variable এ স্টোর করবেন সেইটা এক্সপ্লোর করেন । তাহলে দুঃখটা একটু কমবে আশা করি, কি আজব!

এতোদিন আমরা শুধু var কীওয়ার্ড ব্যাবহার করেই variable নিতাম আর মনের সুখে মনের সব কথা স্টোর করতাম । JavaScript একটি হাই-লেভেল প্রোগ্রামিং ল্যাংগুয়েজ হওয়ার কারনে অনন্য ল্যাংগুয়েজের মতো আমাদের স্পেসেফিকলি বলে দিতে হয় না যে আমরা কোন টাইপের মনের কথা variable এ স্টোর করতেছি মানে কোন টাইপের ডাটা নিচ্ছি সেটা কি ইন্টিজার, নাকি ফ্লোট নাকি স্ট্রিং নাকি অন্য কিছু, কারণ JavaScript অটোমেটিক্যালি বুঝে নিতে পারে।

সো, আমরা শুধুমাত্র var কীওয়ার্ড ব্যাবহার করেই যে কোনো ধরনের ডাটা variable এ স্টোর করতে পারি।

তবুও, জাভাস্ক্রিপ্ট ইএস-৬(ES6) এ Let and Const নামে দুইটা নতুন কীওয়ার্ড কেনো আসলো তাইনা ? চিল ম্যান, চিন্তা বা ভয় পাওয়ার কোনো কারণ নাই আজকে আমরা let, var, const আলোচনা করতে যাচ্ছি। আমরা জানি যে let, var, and const এই keyword গুলো ব্যাবহার করে variable ডিক্লেয়ার করা হয় । let, var, const এই তিনটি keyword এর আলাদা আলাদা ইউসকেস আছে তো বেশি কথা না বলে ছোট্ট একটা Example দিয়ে শুরু করা যাক।

প্রথমে var এবং let নিয়ে একটা Example দেখা যাক ঃ

// first block 
if(true){
    var varName = 'var babu';
}
console.log(varName); 
//আউটপুটঃ var babu

// second block
if(true){
    let letName = 'let babu';
}
console.log(letName); 
//আউটপুটঃ ReferenceError: letName is not defined

উপরোক্ত দুইটি if ব্লকের মধ্যে প্রথম ব্লকে var কীওয়ার্ড দ্বারা variable (varName = ‘var babu’) ডিক্লেয়ার করা হয়েছে । এবং console.log(varName) করা হয়েছে যার অউটপুট var babu। আমরাও এমনটা ভেবেছি যে অউটপুট var babu ই হবে ।

কিন্তু দ্বিতীয় ব্লকে let কীওয়ার্ড দ্বারা variable (letName='let babu') ডিক্লেয়ার করা হয়েছে যার রেজাল্ট ReferenceError: letName is not defined এমন রেফারেন্স-এরর এসেছে । তাহলে নিশ্চয়ই কিছু একটা কাহিনি তো আছে তাই না ? তাছাড়া তো এমন এরর আসার কথা না। তো চলুন ছোট্ট করে আলোচনা করা যাক ।

* var দ্বারা ডিক্লেয়ারকৃত variable এ এরর না আসার কারণঃ

যখন আমরা কোনো variable ফাংশনের ভেতর বাদে অন্য ব্লক বা যেকোনো জায়গায় var কীওয়ার্ড দ্বারা নিব তখন সেই variable টা window কে point করে , অর্থাৎ সেই variable টাকে যেকোনো জায়গায় থেকে এক্সেস করা যাবে । যেহেতু, if কোনো ফাংশন ব্লক নাহ তাই উপরোক্ত var কিওয়ার্ড দ্বারা ডিক্লেয়ারকৃত variable টি বাহিরে থেকেও এক্সেস করা যাচ্ছে ।

* let দ্বারা ডিক্লেয়ারকৃত variable এ এরর আসার কারণঃ

দ্বিতীয় ব্লকে let কীওয়ার্ড দ্বারা variable (letName = ‘let babu’) ডিক্লেয়ার করা হয়েছে যার রেজাল্ট (ReferenceError: letName is not defined) এসেছে । কারণ, যখন কোনো variable ফাংশনসহ অনন্য ব্লক যেমনঃ (if-else, for loop, while loop etc.) এর ভেতর let কিওয়ার্ড দ্বারা ডিক্লেয়ার করা হয়। তখন সেই variable টি সেইসব ব্লকের যেকোনো জায়গা থেকেই এক্সেস করা যাবে। ব্লকের বাহিরে থেকে এক্সেস করা যাবে নাহ বিধায় আমাদেরকে উপরোক্ত রেফারেন্স এরর দিয়েছে। আশা করি কিছু একটা বুঝতে পারছেন — তো চলেন বিষয়টা আরেকটু ক্লিয়ার করা যাক ঃ

1. var কীওয়ার্ড function স্কোপ অর্থাৎ (function Block) মেইন্টেইন করে ।
2. let ও const কীওয়ার্ড ব্লক(Block) স্কোপ মেইন্টেইন করে ।

অর্থাৎ যখন কোনো variable var কীওয়ার্ড দ্বারা ফাংশনের ভেতর নিব তখন সেই variable টা ফাংশন স্কোপড হয়ে যাবে । তার মানে কি ? তার মানে হলো তখন সেই variable টা ফাংশনের বাহিরে ব্যাবহার করা যাবে নাহ । ফাংশনই হবে তখন তার দুনিয়া বা এরিয়া, যত খুশি মনের মাধুরি মিশিয়ে ফাংশনের ভেতরই যেখানে ইচ্ছে সেখানে ব্যাবহার করা যাবে ।

ছোট্ট একটা উদাহরণ দেখা যাক ঃ

const sayName = () => {
    if(true){
        var Name = 'Shakil Babu';
    }
    console.log(Name);
    //আউটপুটঃ Shakil Babu
}
sayName();

এখানে sayName একটা ফাংশন, আর এই ফাংশন ব্লকের মধ্যে আরেকটা if ব্লক ইউস করা হয়ছে যার ভেতর var কীওয়ার্ড দ্বারা Name নামে একটা variable নেওয়া হয়ছে। এবং variable টি if ব্লকের বাহিরে অর্থাৎ ফাংশন ব্লকের ভেতর console.log(Name) করা হয়েছে যার অউটপুট ঠিকঠাক ভাবে দিয়েছে । যেহেতু আমরা জানি, var কীওয়ার্ড শুধুমাত্র function স্কোপ অর্থাৎ ফাংশনের ভেতর যেকোনো জায়গায় ইউস করতে পারবো সেহেতু, if ব্লকের বাহিরে অর্থাৎ ফাংশন ব্লকের ভেতর ইউস করায় ঠিকঠাক উত্তর দিয়েছে ।

এরপরেও যদি আপনি সাহসী প্রেমিকের মতো ফাংশনের বাহির থেকে variable টা এক্সেস করেন তাহলে প্রোগ্রাম ও আপনাকে সাহসী ভিলেনের মতো ReferenceError ছুড়ে মারবে। কি মজা! তাতে কি আপনি তো সাহসী প্রেমিক, প্রেম করলে তো একটু-আধটু কেচাল লাগবেই আবার ঠিকও হয়ে যাবে । তাই একবার ট্রাই করেই দেখুন।

let and const

আমরা ইতিমধ্যে জানি, let and const কীওয়ার্ড ব্লক(Block) স্কোপ মেইন্টেইন করে । তো চলেন আমরা উপরোক্ত সেইম কাজটাই যদি আমরা let বা const দিয়ে করি তাহলে কি হয় ?

const sayName = () => {
    if(true){
        let Name = 'Shakil Babu';
    }
    console.log(Name);
    //আউটপুটঃ ReferenceError: Name is not defined
}
sayName();

এই প্রোগ্রামের আউটপুটে কি আসবে বলেন তো ? হ্যাঁ, এটার আউটপুটে এরর আসবে কারণঃ let ও const কীওয়ার্ড ব্লক(Block) স্কোপ । যেহেতু, ফাংশন ও একটা ব্লক কিন্তু খেয়াল করলে দেখবেন যে, ফাংশন ব্লকের ভেতর আরেকটা if ব্লক আছে এবং সেই if ব্লকের ভেতর variable ডিক্লেয়ার করা হয়েছে । তাই, if ব্লকের বাহিরে variable এক্সেস করতে পারবো নাহ ।

এইজন্য আমাদের ReferenceError: Name is not defined এই এরর ছুড়ে মারছে। এ তো গেলো var, let, and const এর স্কোপ নিয়ে আলোচনা। সবসময় মনে রাখবেন স্কোপ এর ক্ষেত্রে (Let, and Const) এর কাজ একই।

তো চলেন এইবার (Var, Let, and Const) এর re-declare এবং re-assign নিয়ে আলোচনা করা যাক :

আমরা চাইলে কিন্তু var দিয়ে একটা ভ্যারিয়েবল ডিক্লেয়ার করে পরবর্তিতে সেইটা আবার সেইম নামে re-declare ও করতে পারি এমনকি সেটার ভ্যালুও চেঞ্জ করতে পারি মানে re-assign । কথাগুলো যদি আপনার ফুর-ফুরা মনকে ছিন্ন-ভিন্ন করে ফেলে তাহলে নিচের উদাহরণ দেখুনঃ

var Name = 'Babu';
// re-assigned
Name = 'Shakil Babu';
console.log(Name); 
//আউটপুটঃ Shakil Babu

// re-declared
var Name = 'Shakil';
console.log(Name); 
//আউটপুটঃ Shakil

আউটপুটে কিন্তু কোনো এরর নাই সম্পূর্ন ভ্যালিড । কারণঃ var দিয়ে ভ্যারিয়েবল ডিক্লেয়ার করলে সেইটা re-declare এবং re-assign দুইটাই করা যায় প্রোগ্রাম কোনো মাইন্ড করে নাহ।

এখন সেইম কাজটা যদি আমরা let দিয়ে করি তাহলে কি হয় চলুন দেখা যাক :

let Name = 'Babu';
// re-assigned
Name = 'Shakil Babu';
console.log(Name); 
//আউটপুটঃ Shakil Babu

// re-declared
let Name = 'Shakil';
console.log(Name);
//আউটপুটঃ SyntaxError: Identifier 'Name' has already been declared

এখানে কি হলো দেখুন তো, প্রথমে কিন্তু Name এর value কে re-assigned করা হয়ছে অর্থাৎ Name এর value কে পরিবর্তন করা হয়েছে এতে প্রোগ্রাম কোনো প্রকার মাইন্ড করে নাই । এইখানে কিন্তু var কীওয়ার্ড এর সাথে let এর মিল রয়েছে ।

কিন্তু, দ্বিতীয় স্টেপে যখন সেইম নামে let কীওয়ার্ড দ্বারা re-declared করা হলো তখনই প্রোগ্রাম মাইন্ড করে বসলো এবং রাগের মাথায় SynTaxError: Identifier 'Name' has already beed declared এই এরর টা ছুড়ে মারলো।

তাহলে আমরা বুঝতে পারলাম যে, let দিয়ে ভ্যারিয়েবল ডিক্লেয়ার করলে সেইটা re-assign করা যায় কিন্ত re-declare করা যায় নাহ ।

এখন আবারও সেইম কাজটা যদি আমরা const দিয়ে করি তাহলে কি হয় চলুন দেখা যাক :

const Name = 'Babu';
// re-assigned
Name = 'Shakil Babu';
console.log(Name);
//আউটপুটঃ TypeError: Assignment to constant variable.

// re-declared
const Name = 'Shakil';
console.log(Name);
//আউটপুটঃ SyntaxError: Identifier 'Name' has already been declared

এই যা, const দিয়ে তো re-declare এবং re-assign কোনো টাই করা যাচ্ছে নাহ। constant অর্থ হলো ধ্রুবক, যার মান কখনোই পরিবর্তন করা যায় নাহ । constant এর সংক্ষিপ্ত রুপ হইলো const, তাই আপনি কোনোকিছু একবার const দিয়ে ডিক্লেয়ার করলে সেটার পরে আর পরিবর্তন করতে পারবেন না। করতে চাইলে এরর আসবে।

তাহলে আমরা যা বুঝলাম — var দিয়ে ভ্যারিয়েবল ডিক্লেয়ার করলে সেইটা re-declare এবং re-assign দুইটাই করা যায় । let দিয়ে ভ্যারিয়েবল ডিক্লেয়ার করলে সেইটা re-assign করা যায় কিন্ত re-declare করা যায় নাহ এবং const দিয়ে ভ্যারিয়েবল ডিক্লেয়ার করলে সেইটা re-declare এবং re-assign কোনোটাই করা যায় নাহ।

Hoisting এর ক্ষেত্রে var, let and const এর ছোট্ট আলোচনা

Var দিয়ে কোনো variable ডিক্লেয়ার করার আগেই যদি তা ব্যাবহার করা হয় তাহলে hoisting নামক এক মন ভাঙ্গা প্রেমিকের কারণে অউটপুটে undefined দেখায়।

নিচের ছোট্ট একটি উদাহরণে দেখানো হলো —

console.log(test);
var test = 'I am test variable';
//আউটপুটঃ undefined

উপরোক্ত পোগ্রামটি আমাদের মেশিনে চালালে সুন্দর করে তারা আমাদেরকে আউটপুট হিসেবে undefined নামক সোনার হরিণ দেখাবে । কি মজা!

Let এবং Const —

let বা const দিয়ে ভ্যারিয়েবল ডিক্লেয়ার করার আগেই যদি সেই ভ্যারিয়েবল অ্যাক্সেস করতে চাই তাহল var এর মতো undefinedনা দিয়ে সোজা-সাপ্টা এরর ছুরে মারবে । চলুন দেখে আসি কেমন এরর দিবে :

console.log(test);
const test = 'I am test variable';
//আউটপুটঃ ReferenceError: Cannot access 'test' before initialization

উপরোক্ত কোডে আমরা দেখতে পাইতেছি যে, আউটপুট হিসেবে ReferenceError ছুড়ে দিয়েছে। এখানে এদেরকেও hoisting নামক এক মন ভাঙ্গা প্রেমিকের সিস্টেমে হোইস্টেড করা হয়। কিন্তু Temporal Dead Zone(TDZ) নামক এক কুখ্যাত সন্ত্রাসীর কারনে আমরা চাইলেও এদেরকে ডিক্লেয়ার করার আগে অ্যাক্সেস করতে পারি না।

ভ্যারিয়েবল ডিক্লেয়ারেশন আর সেটার স্কোপ পাওয়ার মধ্যে একটা সময় আছে, ঐ সময়টাকেই Temporal Dead Zone বলে।

আশা করি আপনারা আজকের বিষয়টা অনেক এনজয় করেছেন । আপনাদের সুবিধার জন্য নিচে একটি ইমেজ দেওয়ার হলো :

এখন আপনি আপনার সেই গুলু-গুলু বাবু প্রেমিকার সাথে চ্যাটিং আর ফ্ল্যাট বুকিং এর পরিকল্পনা করতে পারেন ।

মাইন্ড কইরেন নাহ হে কাছের মানুষজন ।