জাভাস্ক্রিপ্ট অবজেক্ট ক্লোনিং

জাভাস্ক্রিপ্টের দুনিয়ায় অবজেক্ট তো আছেই! আর সেই অবজেক্টের সাথে আমাদের সম্পর্কটা যেন ঠিক জামাই-শ্বশুরবাড়ির সম্পর্কের মতো—ভালোবাসা আছে, কিন্তু একসময় টানাটানিও থাকে! এবার বলো, যখন আমরা কোনো অবজেক্টকে ভ্যারিয়েবলে আসাইন করি, তখন কী হয়?

সাব্বির হোসেন মিহাদ

ওয়েব ডেভেলপার

📅২৪ আগস্ট, ২০২৪

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

তাই, আসুন দেখি, কীভাবে আর কখন জাভাস্ক্রিপ্ট অবজেক্ট ক্লোন বা কপি করা যায়, এবং কীভাবে মেমোরির ম্যাজিক কাজ করে!

Object Reference Pass করা: মেমোরির ঠিকানার খেল!

ধরো, তুমি একটা অবজেক্ট তৈরি করলে এবং সেটাকে listData নামে একটা ভ্যারিয়েবলে রেখে দিলে। এবার যখন তুমি copyListData নামে আরেকটা ভ্যারিয়েবল তৈরি করে সেটাতে listData এসাইন করলে, দুইটা ভ্যারিয়েবলই কিন্তু একই মেমোরি অ্যাড্রেস ধরে থাকে। আর একেই বলে, "Object Reference Pass করা"।

const listData = { a: 1, b: 2 }; 
const copyListData = listData; // একই মেমোরি রেফারেন্স পয়েন্ট করে
 
copyListData.a = 3;
 
console.log(listData.a); // Output: 3

কী হলো এখানে?

তুমি যখন copyListData.a এর মান 3 করলে, একই সাথে listData.a এর মানও পরিবর্তিত হলো! কারণ, দুইটা ভ্যারিয়েবলই একই মেমোরি রেফারেন্স ধরে আছে।

এই পদ্ধতির ২টি বৈশিষ্ট্য:

1. Shared Reference: এক রেফারেন্স, দুই নাম! তুমি যদি listData-তে কিছু পরিবর্তন করো, তার প্রভাব সরাসরি copyListData-তেও পড়বে।
2. Single Source of Truth: একই তথ্যের একাধিক ব্যবহারের জন্য এটি দারুণ! তুমি যদি একই অবজেক্টের সাথে কাজ করতে চাও, তবে এই পদ্ধতিই সেরা।

Object Copy or Clone: শ্যালো কপি বনাম ডীপ কপি!

তাহলে কপি করতে হলে কী করবো? জাভাস্ক্রিপ্টে অবজেক্ট বা অ্যারে কপি করার দুইটা প্রধান পদ্ধতি আছে: Shallow Copy আর Deep Copy। দুই পদ্ধতিরই নিজ নিজ বৈশিষ্ট্য আছে, যেগুলো সঠিকভাবে বুঝে ব্যবহার করলেই তুমি হয়ে যাবে প্রোগ্রামিং নিনজা!

Shallow Copy: মেমোরির সামান্য ছোঁয়া!

Shallow Copy মানে হলো, অবজেক্ট বা অ্যারের শুধু উপরের স্তরের কপি তৈরি করা। কিন্তু যদি কোনো নেস্টেড অবজেক্ট বা অ্যারে থাকে, তবে সেই নেস্টেড অবজেক্টের মেমোরি রেফারেন্স পরিবর্তন হয় না। সহজভাবে বলতে গেলে, মূল অবজেক্টের ভেতরে থাকা অবজেক্টগুলো একই রেফারেন্স ধরে থাকে।

const originalObj = {
  name: 'Sabbir',
  address: {
    city: 'Narsingdi',
    zip: '12345'
  }
};
 
// Spread operator দিয়ে shallow copy
const shallowCopyObj = { ...originalObj };
shallowCopyObj.name = 'Fahad'; // শুধু shallow copy-তে পরিবর্তন হচ্ছে
shallowCopyObj.address.city = 'Dhaka'; // এটা দুই জায়গাতেই পরিবর্তন হবে
 
console.log(originalObj.name); // Output: 'Sabbir'
console.log(originalObj.address.city); // Output: 'Dhaka'

কী হচ্ছে এখানে?

যখন shallowCopyObj.name পরিবর্তন করা হচ্ছে, তখন মূল অবজেক্ট পরিবর্তিত হচ্ছে না। কিন্তু shallowCopyObj.address.city পরিবর্তন করলে তা মূল অবজেক্টেও প্রভাব ফেলছে। কারণ, এটা নেস্টেড অবজেক্টের মেমোরি রেফারেন্স শেয়ার করছে।

কখন Shallow Copy ব্যবহার করা উচিত?

• যখন তুমি শুধু টপ-লেভেল প্রোপার্টিজ কপি করতে চাও।
• সিম্পল স্টেট আপডেট বা ইম্যুটেবল প্রয়োজন হলে।

Deep Copy: মেমোরির পুরো দখল!

Deep Copy মানে পুরো অবজেক্টের সব স্তরের (নেস্টেড অবজেক্টসহ) কপি তৈরি করা। এর ফলে কপি অবজেক্টের কোনো পরিবর্তন মূল অবজেক্টে প্রভাব ফেলবে না।

const originalObj = {
  name: 'Sabbir',
  address: {
    city: 'Narsingdi',
    zip: '12345'
  }
};
 
// JSON মেথড ব্যবহার করে Deep Copy
const deepCopyObj = JSON.parse(JSON.stringify(originalObj));
deepCopyObj.name = 'Hasan'; // শুধু deepCopyObj-তে পরিবর্তন হচ্ছে
deepCopyObj.address.city = 'Dhaka'; // শুধু deepCopyObj-তে পরিবর্তন হচ্ছে
 
console.log(originalObj.name); // Output: 'Sabbir'
console.log(originalObj.address.city); // Output: 'Narsingdi'

কী ঘটছে এখানে?

deepCopyObj-এ কোনো পরিবর্তন করলে originalObj একেবারেই অপরিবর্তিত থাকে। কারণ, Deep Copy পুরোপুরি স্বাধীন একটা কপি তৈরি করে।

Deep Copy করার উপায়:

1. JSON Method: সহজ, দ্রুত এবং সবচেয়ে কমন। তবে কিছু লিমিটেশন আছে যেমন ফাংশন, undefined, NaN ইত্যাদি কপি করতে পারে না।
2. Lodash এর _.cloneDeep() মেথড: এটি খুবই শক্তিশালী এবং জটিল অবজেক্টের জন্য খুব কার্যকর।

কখন Deep Copy ব্যবহার করা উচিত?

• যখন কমপ্লেক্স অবজেক্টের সম্পূর্ণ স্বাধীন একটি কপি দরকার হয়।
• নেস্টেড অবজেক্ট বা অ্যারে সহ ক্লোন করতে চাইলে।

তো, প্রোগ্রামার ভাই-বোনেরা! জাভাস্ক্রিপ্টের এই মেমোরি ম্যাজিকের খেলা যদি বুঝে ফেলো, তবে তুমি সব কাজেই পাকা। ক্লোনিং নিয়ে তোমার আর দুশ্চিন্তার কিছু নেই! এই ব্লগ পড়ে মনে হচ্ছে তো কিছু শিখেছ? যদি কিছু মজার অভিজ্ঞতা থাকে, শেয়ার করো। Happy Coding! 🎉