জাভাস্ক্রিপ্ট এ var, let এবং const

আজকে আমরা জাভাস্ক্রিপ্ট এর ছোট, গুরুত্বপূর্ণ এবং একেবারে সহজ নয় এমন একটি টপিক নিয়ে দেখবো।

জাভাস্ক্রিপ্ট এ var, let and const কিভাবে কাজ করে এবং এদের মধ্যে পার্থক্য কি তা উদাহরণ সহ দেখবো, কিন্তু তার আগে scope সম্পর্কে জানাটা গুরুত্বপূর্ণ।

নিচের কোডটা খেয়াল করিঃ

উপরের কোড এর আউটপুট হলোঃ

উপরের কোডে variable “x” define করা আছে "myFunction" এর বাইরে অর্থাৎ গ্লোবালি। আর variable "y" define করা আছে myFunction এর ভিতরে।

এখানে variable "x" এর scope/দুনিয়া হলো পুরো ফাইল টাই(global scope) । তার মানে এই ফাইলের যেকোনো জায়গা থেকে এই ভ্যারিয়েবল কে এক্সেস / মোডিফাই করা যাবে। variable “y” এর scope হলো এই ফাংশনের ভিতরে তার মানে শুধুমাত্র myFunction এর ভিতরেই শুধু “y” কে এক্সেস/মডিফাই করতে পারবো । যদি আমরা কোড টাকে মোডিফাই করে ভ্যারিয়েবল "y" কে myFunction এর বাইরে থেকে এক্সেস করতে চাই তাহলে ReferenceError দেখাবে। কারণ “y” ভ্যারিয়েল এর scope/দুনিয়া হলো myFunction এর ভিতরে।

ভালোভাবে বোঝার জন্য নিচের মোডিফাইড কোড এবং তার আউটপুট খেয়াল করিঃ

উপরের মোডিফাইড কোডের আউটপুটঃ

উপরর উদাহরণ দুইটা থেকে একটা জিনিস আমাদের কাছে পরিষ্কার পুরো ফাইল টাকে যদি Parent হিসেবে ধরি তাহলে myFunction তা হলো তার Child. এখানে মনে রাখতে হবে কোন ভ্যারিয়েবল যদি Parent এ ডিফাইন করা হয় তাহলে ঐ ভ্যারিয়েবল কে আমরা child থেকেও এক্সেস/মডিফাই করতে পারবো। যেমন টা আমরা myFunction এর ভিতরে "x" কে এক্সেস করতে পারছি।

আর কোন ভ্যারিয়েবল যদি child এ ডিফাইন করা হয় তাহলে আমরা সেইটাকে Parent থেকে এক্সেস/মোডিফাই করতে পারবো না।

নিচের উদাহরনের মাধ্যমে আমরা বুঝতে পারবো যে Parent এর কোনো ভ্যারিয়েবল কে আমরা Child থেকে মোডিফাই করতে পারি।

আউটপুটঃ

উপরের কোডের ক্ষেত্রে myFunction এর ভিতরে গ্লোবাল ভ্যারিয়েবল “x” এর ভ্যালু re-assign করে দিছে যার ফলে সব জায়গায় “x” এর ভ্যালু 23.

এবার নিচের কোডটা দেখিঃ

উপরের দেখানো কোডে Variable “x” define না করে আমরা myFunction এর ভিতরে “x” এর value 23 assign করেছি।

অন্য ল্যাঙ্গুয়েজে এরকম করলে এখানে error দিতো। কিন্তু জাভাস্ক্রিপ্ট এই ক্ষেত্রে প্রথমে দেখে যে ফাংশন স্কোপে ভ্যারিয়েবল টাতে value assign করা হইছে সেইটা ঐ স্কোপে define করা আছে কিনা। যদি দেখে ঐ স্কোপে ডিফাইন করা নাই তাহলে ঐ স্কোপের parent এ গিয়ে দেখবে যে ভ্যারিয়েবল টা ডিফাইন করা আছে কিনা। যদি তাও না থাকে তাহলে parent এ “x” নাম এ ভ্যারিয়েবল ডিফাইন করে দিবে এবং “x” ভ্যারিয়েবল এর স্কোপ হবে তখন গ্লোবাল। এই কারণে উপরের কোড কোন error show না করে নিচের আউটপুট দিবেঃ

তাহলে এখান থেকে আমরা বুঝতে পারলাম যদি কোনো ভ্যারিয়েবল define না করে শুধু assign করা থাকে তাহলে তা গ্লোবাল ভ্যারিয়েবল হয়ে যাবে এবং তখন ঐ ভ্যারিয়েবলটাকে parent থেকেও এক্সেস / মডিফাই করা যাবে।

এবার আরেকটি কোড দেখিঃ

উপড়ের কোডের আউটপুটঃ

উপড়ের কোডের ক্ষেত্রে আমরা Parent এ "x" নামে একটা ভ্যারিয়েবল define করেছি এবং তাতে ভ্যালু 10 assign করে দিয়েছি। আবার এর child “myFunction” এও একই নামে (“x”) ভ্যারিয়েবল define করা হইছে এবং তাতে ভ্যালু 23 assign করা হইছে।

এরকম ক্ষেত্রে দুইটা ভ্যারিয়েবল আলাদা আলাদা স্কোপ এর হিসেবে গণ্য হবে, প্রথম টা গ্লোবাল (parent) এবং দ্বিতীয়টা হবে myFunction এর ভিতরের। এমন হওয়ার কারণে ফাংশনের ভিতরে x এর ভ্যালু 23 assign করার পরেও গ্লোবাল ভ্যারিয়েবল “x” এর ভ্যালু পরিবর্তন হয় নাই। এবং গ্লোবাল "x" এর ভ্যালু পরিবর্তন না হওয়ার কারনে ১১ নং লাইনে আমরা Global “x” এর ভ্যালু 10 প্রিন্ট হইছে।

উপরের আলোচনা থেকে আমরা বলতে পারি জাভাস্ক্রিপ্ট এর ক্ষেত্রে ভ্যারিয়েবল function scoped.

এবার আসি আমরা var, let এবং const নিয়ে।

২০১৫ এর আগে জাভাস্ক্রিপ্ট এ শুধু var দিয়ে ভ্যারিয়েবল ডিফাইন করা যাইতো, var যেহেতু function scoped তাই accidentally child এ মোডিফাই হয়ে যেতো, এই সমস্যা টা দূর করার জন্য ২০১৫ থেকে let and cost এড করা হয়।

অনেকেই মনে করেন var and let একই রকম। কিন্তু আসলে var এবং let দুইটা আলাদা।

var এবং let এর scope বোঝার জন্য নিচের উদাহরণ দুইটা টা দেখি।

var এর ক্ষেত্রে উদাহরণঃ

Example for var scope

আউটপুটঃ

উপরোক্ত উদাহরণে “x” ভ্যারিয়েবল টা var দিয়ে define করা হইছে এবং value assign করা হইছে if block এর মধ্যে কিন্তু তাও আমরা ভ্যারিয়েবল টাকে if block এর বাইরে থেকে এক্সেস করতে পারছি। var হলো function scoped. এখানে ফাইলটাই একটা ফাংশন হিসেবে কাজ করছে।

এবার let এর ক্ষেত্রে উদাহরণঃ

Example for let scope

আউটপুটঃ

let এর ক্ষেত্রে if block এর মধ্যে ভ্যারিয়েবল define and value assign করা হইছে। যখন আমরা ভ্যারিয়েবল “x” কে if block এর বাইরে থেকে এক্সেস করতে চাচ্ছি তখন ReferenceError দিচ্ছে। কারন let হলো Block scoped.

আবার const হলো let এর মতোই Block scoped.

তাহলে উপরের আলোচনা থেকে আমরা বুঝতে পারলাম var, let and const এর মধ্যে পার্থক্য হলো:

এবার var, let and const এর ক্ষেত্রে কোনটা re-define করা যায় সেইটা দেখবো।

var এর ক্ষেত্রে ভ্যারিয়েবল re-define:

উপরের কোডে var দিয়ে একই নামে (x) ভ্যারিয়েবল re-define করা হইছে এবং var এর ক্ষেত্রে ভ্যারিয়েবল re-define করা যায়।

let এর ক্ষেত্রে ভ্যারিয়েবল re-define:

let এর ক্ষেত্রে re-dine করা যায় না। তখন Error দেয়ঃ SyntaxError দেয়।

const এর ক্ষেত্রে let এর মতো ভ্যারিয়েবল re-define করা যায় না।

উপরোক্ত উদাহরণ ৩ টা থেকে তাহলে আমরা বুঝতে পারলামঃ

এবার আমরা দেখবো var, let and const এর মধ্যে কোনটার ভ্যালু manipulate করা যায়।

var এর ক্ষেত্রে value manipulation:

আউটপুটঃ

উপরের উদাহরণ থেকে দেখলাম var দিয়ে ডিফাইন করা ভ্যারিয়েবল এর ভ্যালু মোডিফাই / re-assign করা যায়।

let এর ক্ষেত্রে value manipulation:

আউটপুটঃ

উপরের উদাহরণে আমরা দেখতে পারছি let এর ক্ষেত্রেও ভ্যালু মোডিফাই/re-assign করা যায়।

const এর ক্ষেত্রে value manipulation:

আউটপুটঃ

const এর ক্ষেত্রে ভ্যালু মোডিফাই/re-assign করা যায় না।

তাহলে ভ্যালু manipulation এর ক্ষেত্রে var, let and const এর মধ্যে পার্থক্যঃ

Note: কিন্তু value যদি Object type হয় তাহলে const এর ক্ষেত্রেও value modify করা যায়।

এই ছিল আজকের মতো। আশা করি var, let and const সম্পর্কে কিছুটা হলেও ধারণা পাওয়া গেলো। ভুল ত্রুটি অবশ্যই ক্ষমা সুন্দর দৃষ্টিতে দেখবেন।

ধন্যবাদ।