Mutable Vs Immutable in JavaScript

Mutable এবং Immutable কি? জাভাস্ক্রিপ্ট ডেভেলপাররা হরহামেশায় এই কথা টা শুনে থাকে যদি ও এইটা জাভাস্ক্রিপ্ট স্পেসিফিক কোন টার্ম না এইটা একটা প্রোগ্রামিং টার্ম। অন্যান্য প্রোগ্রামিং ল্যাঙ্গুয়েজে ও আপনি এইটা দেখবেন। ইন্টারভিউতে জাভাস্ক্রিপ্ট ডেভেলপারদের কে সবচেয়ে বেশি যেই টপিকের উপর প্রশ্ন করা এর মধ্যে Mutable এবং Immutable অন্যতম একটা টপিক। তাহলে চলেন এইবার বিস্তারিত জানার চেষ্টা করি।

প্রথমে জানার চেষ্টা করি Mutable এবং Immutable এর বাংলা অর্থ কি?

• Mutable এর বাংলা অর্থ → পরিবর্তনীয় ।
• Immutable এর বাংলা অর্থ → অপরিবর্তনীয়।

এইটুক পড়ে আমরা বুঝতে পারছি যে যেইটা পরিবর্তন করা যাবে সেইটা Mutable এবং যেইটা অপরিবর্তনীয় সেটাই Immutable।

এখন কথা হচ্ছে কি পরিবর্তনীয় আর অপরিবর্তনীয়?

উত্তর: Value (মান )

আপনি যদি গুগল এ সার্চ করেন Mutable Vs Immutable এই রকম একটা ডেফিনেশন দেখবেন।

IF the value can change the object is called mutable while if the value cannot change, the object is called immutable.

জাভাস্ক্রিপ্ট এ মূলত ২ ধরণের ডাটা টাইপ আছে। Primitive এবং Reference টাইপ।

• প্রিমিটিভ ডাটা টাইপ গুলো হলো : Strings, Numbers, Boolean, Null, undefined
• রেফারেন্স ডাটা টাইপ গুলো হলো: Arrays, Objects, Function

এদের মাঝে মৌলিক পার্থক্যই হচ্ছে যে প্রিমিটিভ ডাটা immutable বা অপরিবর্তনীয় এবং নন-প্রিমিটিভ(রেফারেন্স) ডাটা mutable বা পরিবর্তনীয়।

অনেক তো থিওরি কথা বার্তা হলো এইবার একটু প্রাক্টিক্যালি বুঝার চেষ্টা করি।

// Primitive Type Data (Immutable)
let x = 10;
let y = x;
y = 30;
console.log(x) // Output: 10
console.log(y) // Output: 30


// Reference Type Data (Mutable)
let students = ["Rony", "Lincoln", "Faysal", "Sourov"];
let teachers = students;
teachers[3] = "Ziaul";

console.log(students); // Output: ["Rony", "Lincoln", "Faysal", "Ziaul"]
console.log(teachers); // Output: ["Rony", "Lincoln", "Faysal", "Ziaul"]

উপরের কোড টা যদি আমরা লক্ষ্য করি তাহলে দেখবো প্রথমে আমরা x নাম এ একটা ভ্যারিয়েবল ডিক্লেয়ার করেছি এবং তার মধ্যে ভ্যালু হিসেবে 10 স্টোর করেছি এবং তার পরের লাইনে y নামে একটা ভ্যারিয়েবল ডিক্লেয়ার করেছি এবং একই সাথে ভ্যালু হিসেবে সেট করেছি x আর ভ্যালু কে। তার পরের লাইন এ y এর ভ্যালু পরিবর্তন করে 30 করেছি।

এবার আমরা x এবং y ভ্যারিয়েবল দুইটাকে কনসোল লগ করলে দেখবো আউটপুট হিসেবে x এর ভ্যালু 10 এবং y এর ভ্যালু 30 প্রিন্ট হয়েছে। আমরা ভাবতেছি আর এ এমন ই তো হওয়ার কথা যেহেতু আমরা প্রথমে x ভ্যালু সেট করেছি 10 তাই x এর ভ্যালু আউটপুট এ 10 দেখাচ্ছে আর যদি ও পরের লাইনে y এর ভ্যালু হিসেবে x ভ্যালু হিসেবে সেট করেছি কিন্ত তার পরের লাইনে ই যেহেতু y এর ভ্যালু পরিবর্তন করে 30 করে দিয়েছি তাই y এর ভ্যালু 30 ই দেখানোর কথা এবং দেখিয়েছে ও তাই। তার মানে সব কিছু ঠিক ঠাক।

এবার যদি আমরা পরের উদহারণ টা দেখি তাহলে দেখবো প্রথমে students নাম একটা অ্যারে ডিক্লেয়ার করা হয়েছে এবং সেখানে কিছু students এর নাম রয়েছে এবং তার পরের লাইন এ teachers নাম এ একটা ভ্যারিয়েবল ডিক্লেয়ার করা হয়েছে এবং একই সাথে ভ্যালু হিসেবে সেট করা হয়েছে students অ্যারে কে। তার পরের লাইন এ আমরা teachers অ্যারে এর 3 নাম্বার ইনডেক্স এর ভ্যালু টা পরিবর্তন করেছি। আবার যদি আমরা আউটপুট দেখি। তাহলে দেখবো! students অ্যারে এবং teachers অ্যারে এর আউটপুট সেইম দেখাচ্ছে! এইখানে হচ্ছে বুঝার বিষয় এমন টা কেন হলো!

প্রথম প্রোগ্রাম টা তে সব কিছু ঠিক ঠাক ই ছিল পরের প্রোগ্রাম টা তে এমন হলো কেন! একদম সহজ করে যদি বলি আমরা যখন একটা প্রিমিটিভ টাইপ এর ভ্যারিয়েবল ডিক্লেয়ার করি তখন ঐ ভ্যারিয়েবল মেমরিতে তে একটা জায়গা দখল করে আবার যখন একটা ভ্যারিয়েবল ডিক্লেয়ার করি তখন ঐ ভ্যারিয়েবল মেমেমোরিতে আবার একটা নতুন একটা জায়গা দখল করে। এক কথায় আপনি যত বার ই প্রিমিটিভ টাইপ এর ভ্যারিয়েবল ডিক্লেয়ার করবেন ততবার ই ভ্যারিয়েবল মেমোরি তে নতুন জায়গা দখল করবে। তাই, আপনি যখন একটা প্রিমিটিভ টাইপ এর ভ্যারিয়েবল ডাটা পরিবর্তন করতেছেন তখন আপনি আসলে ওই মেমরি লোকেশন থাকা ভ্যারিয়েবল এর ভ্যালু পরিবর্তন করতেছেন। অন্য ভ্যারিয়েবল এর ভ্যালু ঠিক ই থাকতেছে কোনো পরিবর্তন হচ্ছে না। মানে ভ্যালু Immutable থাকতেছে।

আর পরের প্রোগ্রাম টা তে আমরা যখন একটা অ্যারে এর ভ্যালু হিসেবে অন্য একটা অ্যারে কে সেট করতেছি তখন আসলে পরের অ্যারে এর জন্য জাভাস্ক্রিপ্ট নতুন কোনো মেমরি দখল করতেছে না। জাস্ট পূর্বের অ্যারে এর একটা রেফারেন্স স্টোর করতেছে। তাই যেকোন একটা অ্যারে এর ভ্যালু পরিবর্তন করলে অন্য একটা অ্যারে এর ভ্যালু ও পরিবর্তন হয়ে যাচ্ছে মানে ভ্যালু Mutable হচ্ছে।

সেইম ভাবে আমরা যদি আরেকটা উদাহরণ দেখি:

// Primitive Type Data (Immutable)
let nameOne = "Kawsar";
let nameTwo = nameOne;
nameTwo = "Amzad"
console.log(nameOne) // Output: Kawsar
console.log(nameTwo) // Output: Amzad


// Reference Type Data (Mutable)
let personOne= {
  name: "Sajib",
  email: "sajib@mail.com"
}
let personTwo= personOne;
personTwo.name = "Yeasin";
personTwo.age = 23;

console.log(personOne); // Output: {name: 'Yeasin', email: 'sajib@mail.com', age: 23}
console.log(personTwo); // Output: {name: 'Yeasin', email: 'sajib@mail.com', age: 23}

আমাদের যদি কখন ও Mutable অবজেক্ট কে Immutable করতে চাই তাহলে নিচের কোড টুকু বুঝার চেষ্টা করি।

// Convert array mutable to immutable
let students = ["Rony", "Lincoln", "Faysal", "Sourov"];
let teachers = students.concat();
teachers[3] = "Ziaul";

console.log(students); // Output: ["Rony", "Lincoln", "Faysal", "Sourov"];
console.log(teachers); // // Output: ["Rony", "Lincoln", "Faysal", "Ziaul"];


// Convert Object mutable to immutable
let personOne = {
  name: "Sajib",
  email: "sajib@mail.com"
}
let personTwo = Object.assign({}, personOne);
personTwo.name = "Yeasin",
personTwo.email = "yeasin@mail.com"
personTwo.age = 23;

console.log(personOne); // Output: {name: 'Sajib', email: 'sajib@mail.com'}
console.log(personTwo); // Output: {name: 'Yeasin', email: 'yeasin@mail.com', age: 23}

ES6 এ স্প্রেড অপারেটর ব্যবহার করে এই কাজটি আমরা আর ও সহজে করতে পারি।

// Convert array mutable to immutable
let students = ["Rony", "Lincoln", "Faysal", "Sourov"];
let teachers = [...students]; // ... spread operator
teachers[3] = "Ziaul";

console.log(students); // Output: ["Rony", "Lincoln", "Faysal", "Sourov"];
console.log(teachers); // // Output: ["Rony", "Lincoln", "Faysal", "Ziaul"];


// Convert Object mutable to immutable
let personOne = {
  name: "Sajib",
  email: "sajib@mail.com"
}
let personTwo = {...personOne}; // ... spread operator
personTwo.name = "Yeasin",
personTwo.email = "yeasin@mail.com"
personTwo.age = 23;

console.log(personOne); // Output: {name: 'Sajib', email: 'sajib@mail.com'}
console.log(personTwo); // Output: {name: 'Yeasin', email: 'yeasin@mail.com', age: 23}