Javascript Object Assignments, Copy Or Reference?

Sabbir Hossen — Tue, 27 Aug 2024 09:26:15 +0000

জাভাস্ক্রিপ্টে আমরা হর হামেশা অবজেক্ট ব্যবহার করি । অবজেক্ট value কে যখন আমরা কোন একটা variable এ আসাইন করি তখন ডিফল্ট এপ্রোচ হিসেবে "=" এসাইনমেন্ট অপারেটর ব্যবহার করি। আমরা জানি সেই অবজেক্ট,মেমরিতে একটি জায়গায় ষ্টোর করা থাকে এবং variable এ সেই মেমোরি এড্রেস এর রেফারেন্স থাকে। জাভাস্ক্রিপ্ট এ যখন আমরা অবজেক্ট নিয়ে কাজ করি তখন বিভিন্ন কারণে অবজেক্ট এর আউটকাম বিভিন্ন রকম হয় । তাই আমদের অবজেক্টে এর আউটকামএর উপর বেইজ করে অবজেক্টকে পরিবর্তন বা ট্রান্সফরমেশন, কপি অথবা ক্লোন করে কাজ করতে হয়। তাহলে আলোচনা করা যাক, কখন এবং কোন উপায়ে একটি জাভাস্ক্রিপ্ট অবজেক্টকে ক্লোন বা কপি করা যেতে পারে।

Object Reference Pass করা।
Object Copy or clone
1. Shallow Copy
2. Deep Copy

Object Reference Pass করা

মনে করুন আমরা একটি অবজেক্ট তৈরি করেছি এবং সেটি listData নামে একটি variable এ এসাইন করা হয়েছে ।এই সিনারিওতে, listData নামে variable সেই অবজেক্ট এর একটি মেমরির এড্রেস রেফারেন্স পয়েন্ট করে আছে এবং সেই মেমরি এড্রেস রেফারেন্স এর মধ্যে অবজেক্ট এর value গুলো স্টোর করা আছে। এখন যদি আমরা copylistData নামে একটি variable তৈরি করি এবং "="এসাইনমেন্ট অপারেটর দিয়ে listDataকে এসাইন করে দেই তখন copylistData সেই listData অবজেক্ট এর সেই মেমরির একই অ্যাড্রেস কে পয়েন্ট করে রাখবে। আর এই পদ্ধতিকে বলা হয় Object Reference Pass করা।

Example:

const listData = { a: 1, b: 2 }; 
const copyListData = listData //Assign the listData into copyListData both are poient same memory address reference

copyListData.a = 3;

console.log(listData.a); // Output: 3

এই পদ্ধতির ২টি বৈশিষ্ট্য রয়েছে
Shared Reference: listData এবং copylistData একই অবজেক্ট এর মেমরি এড্রেস এর রেফারেন্সকে পয়েন্ট করে থাকে। এই ক্ষেত্রে যদি listData তে কোন পরিবর্তন করা হয় তখন সেটার প্রভাব সরাররি copylistData তেও হবে।

Single Source of Truth: এই পদ্ধিত Single Source of Truth এর মত কাজ করে । অর্থাৎ,আপনি যখন listData এর সাথে copylistData কে লিঙ্ক করতে চান বা এই দুই variable এর মধ্যে ধারাবিহিকতা বা সামঞ্জস্যতা বজায় রাখতে চান তাহলে এই পদ্ধিত ব্যবহার করতে পারেন।

Object Copy or Clone

জাভাস্ক্রিপ্টে arry এবং object কপি করার ক্ষেত্রে ২টি পদ্ধতি ব্যবহার করা হয় "Shallow copy" অন্যটি "Deep Copy" এই দুইটি পদ্ধতি দিয়ে অবজেক্ট কপি করা হলেও কপির ধরন হয় ভিন্নরকম। কোডের সাইড এফেক্ট পরিহার করা এবং ইফেক্টিভ ভাবে state মেনেজ করার জন্য উপরের দুইটি পদ্ধিতর ভূমিকা অপরিহার্য এবং এগুলো কোনটি কিভাবে কাজ করে তা বুঝা অনেক গুরুত্বপূর্ণ।

Shallow Copy

Shallow Copy বলতে বুঝায়, Object অথবা Array এর top level পর্যন্ত কপি বা ডুপ্লিকেট করা । অর্থাৎ কোন একটা object অথবা array এর মেমরিতে থাকা সকল values গুলো কপি করা । কিন্তু সেই অবজেক্ট এর ভিতরে যদি কোন নেস্টেড object অথবা array থাকে তাহলে সেই নেস্টেড object কপি হবে না । তবে সেই ক্ষেত্রে Shallow Copy করার সময় নেস্টেড object এর মেমোরির সেইম রেফারেন্স থেকে যাবে যেটা আমারা উপরে সেকশনে দেখেছিলাম। অবজেক্ট Shallow Copy করার পরেও যদি নেস্টেড অবজেক্ট এর কোন প্রপার্টিজ এর value change করি তাহলে অরজিনাল অবজেক্ট এর মধ্যেও সেই প্রপার্টিজ এর value change হয়ে যাবে।
তবে কোন একটি অবজেক্টকে Shallow Copy করতে চাইলে JS এর Spread operator ব্যবহার করে অবজেক্ট এর Shallow Copy তৈরি করা যায়।

Example

const originalObj  = {
    name: 'Sabbir ',
    address: {
        city: 'Narsingdi ',
        zip: '12345'
    }
}; 

// Creating a shallow copy using the spread operator
const shallowCopyObj  = { ...originalObj};
shallowCopyObj.name = 'Fahad'; // This changes only the shallow copy object  
shallowCopyObj.address.city = 'Dhaka '; // This changes both the shallow copy and the originalObj 

console.log(originalObj.name); // Output: 'Sabbir'
console.log(originalObj.address.city); // Output: 'Dhaka '

উপরের উদাহারনে যখন আমরা shallowCopyObj.name = 'Fahad' করেছি তখন শুধু shallowCopyObj এর name এর value chang হয়েছে কিন্তু এতে originalObj অবজেক্ট এ এর কোন প্রভাব পরবে না। কারণ Shallow Copy করার কারণে আমরা originalObj অবজেক্ট এর একটি ক্লোন তৈরি করেছি । অনুরূপ ভাবে যখন আমরা shallowCopyObj.address.city = 'Dhaka '; করেছি তখন এটি shallowCopyObj এবং originalObj অবজেক্ট দুই জায়গায় chang হয়েছে কারণ city প্রপারটিজটি address অবজেক্ট এর একটি প্রপারটিজ। অর্থাৎ address এর ভিতরে থাকা অবজেক্টটি মেমোরির একটি জায়গায় ষ্টোর করা হয়েছে এবং সেই মেমোরির অ্যাড্রেস এর রেফারেন্স originalObj এবং shallowCopyObj দুই জায়গায় ব্যবহার হচ্ছে বিধায় যেকোনো এক জায়গায় change হওয়ার করনে উভয় জায়গায় পরিবর্তন হচ্ছে।

কখন এই পদ্ধিতি ব্যবহার করা উচিত

যখন আপনি ধুমাত্র টপ-লেভেল প্রোপার্টিজ কপি করতে চান এবং নেস্টেড অবজেক্ট shareable করতে চান তখন ব্যবহার করা যেতে পারে।
সিম্পল state আপডেট এর ক্ষেত্রে অথবা যখন immutable এর প্রয়োজনীয়তা হয় তখন এই পদ্ধতিটি যথেষ্ট।

Deep Copy

Deep Copy বলতে বুঝায় কোন একটি object অথবা array এর সব level পর্যন্ত কপি বা ক্লোন করা । অর্থাৎ অবজেক্টে থাকা সকল লেয়ার এর values, নেস্টেড object সহ সকল কিছু কপি করা যা অরজিনাল object বা array এর থেকে সম্পূর্ণ স্বাধীন। এর ফলে কপি অবজেক্ট এর যেকোনো জায়গায় change হলে অরজিনাল অবজেক্ট এর মধ্যে কোন ধরনের প্রভাব পরবে না। এবার আলোচনা করা যাক কোন কোন উপায়ে deep copy করা যেতে পারে।

Example:

const originalObj = {
    name: 'Sabbir ',
    address: {
        city: 'Narsingdi ',
        zip: '12345'
    } 
};

// Creating a deep copy using JSON method 
const deepCopyObj  = JSON.parse(JSON.stringify(originalObj ))
deepCopy.name = 'Hasan '; // This changes only deepCopyObj
deepCopyObj.address.city = 'Dhaka '; // This changes only the deepCopyObj

console.log(original.name); // Output: 'Sabbir ' 
console.log(original.address.city); // Output: 'Narsingdi '

উপরের উদাহারনে, যখন আমরা deepCopyObj.name এবং deepCopyObj.address.city তে পরিবর্তন করেছি তখন শুধু deepCopyObj object এই পরিবর্তন হয়েছে orginalObj object অপরিবর্তিত রেখে।

যেই উপায় গুলোতে object কে deep copy বা clone করা যেতে পারে:

JSON Method : কোন object অথবা array কে Deep Copy করার জন্য সব থেকে সহজ এবং কমন উপায় হচ্ছে object বা array কে JSONএ কনভার্ট করে তারপর JSON থেকে পার্স করে js object এ কনভার্ট করা। সেই জন্য আমরা JSON এর দুইটি মেথড ব্যবহার করতে পারি । JSON.stringify() মেথড ইউজ করবো js object কে json এ কনভার্ট করার জন্য এবং json এ কনভার্ট হওয়ার পর JSON.parse() মেথড ইউজ করবো json কে js object এ রূপান্তর করার জন্য। তবে এই মেথডের কিছু লিমিটেশন রয়েছে যেমন অবজেক্ট যখন আমরা json এ কনভার্ট করতে যাবো, তখন function, undefiand, NaN, এবং সার্কুলার রেফারেন্স এসব সাপোর্ট করে না । কারণ json নন সিরিয়ালাইজেবল ডাটা (যেমন : function, undefiend , bigInt ,NaN ইত্যাদি ) গুলো কপি করতে পারেনা।

Lodash এর _.cloneDeep মেথড: এই Lodash লাইব্রেরী _.cloneDeep নামক একটি মেথড প্রদান করে যেটি দিয়ে সহজে যেকোনো কমপ্লেক্স object বা array কে সহজে deep clone করা যায় ।

এছাড়াও আরও অনেক উপায় রয়েছে object deep copy করার জন্য যেমন structuredClone() মেথড । তবে উপরের উপায় গুলো সব থেকে কমন ইউজ করা হয়।

কখন এই পদ্ধিতি ব্যবহার করা উচিত
কমপ্লেক্স object এর জন্য একটি ইন্ডিপেন্ডেন্ট অবজেক্ট ক্লোন করা যেটি সম্পূর্ণ ভাবে আলাদা এবং নেস্টেড object বা array সহ ক্লোন করা।

Forem: Sabbir Hossen

Javascript Object Assignments, Copy Or Reference?

Object Reference Pass করা

Object Copy or Clone

Shallow Copy

Deep Copy