Javascript オブジェクトの割り当て、コピーまたは参照?

JavaScript では商オブジェクトを使用します。オブジェクトの値を変数に割り当てるときは、デフォルトのアプローチとして "=" 代入演算子を使用します。オブジェクトがメモリ内の特定の場所に格納され、変数がそのメモリ アドレスへの参照を持っていることがわかります。 JavaScript でオブジェクトを操作する場合、オブジェクトの結果はさまざまな理由により異なります。したがって、その結果に基づいてオブジェクトを変更、変換、コピー、またはクローンする必要があります。それでは、JavaScript オブジェクトをいつ、どのように複製またはコピーできるかについて説明します。

• オブジェクト参照を渡します
• オブジェクトのコピーまたはクローン
  1. 浅いコピー
  2. ディープコピー

オブジェクト参照の受け渡し

オブジェクトを作成し、それを listData という名前の 変数 に代入するとします。このシナリオでは、listData という名前の 変数 > がポイントになります。そのオブジェクトのメモリ アドレス参照にコピーされ、オブジェクトの 値 がそのメモリ アドレス参照内に格納されます。ここで、copylistData という 変数 を作成し、"="代入演算子を使用して listData に代入すると、copylistData は、listData オブジェクトの同じメモリ アドレスを指します。そして、このメソッドは オブジェクト参照 を渡すと呼ばれます。

例:

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 

この方法には 2 つの特徴があります
共有参照: listData と copylistData は、同じオブジェクトのメモリ アドレスへの参照を指します。この場合、listData に変更が加えられると、その影響は copylistData にも直接反映されます。

単一の真実の情報源: このメソッドは、単一の真実の情報源と同様に機能します。つまり、copylistData を listData にリンクする場合、またはこれら 2 つの変数間の一貫性を維持する場合に、このメソッドを使用できます。

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 হওয়ার করনে উভয় জায়গায় পরিবর্তন হচ্ছে।

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

1. যখন আপনি ধুমাত্র টপ-লেভেল প্রোপার্টিজ কপি করতে চান এবং নেস্টেড অবজেক্ট shareable করতে চান তখন ব্যবহার করা যেতে পারে।
2. সিম্পল 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 সহ ক্লোন করা।

以上がJavascript オブジェクトの割り当て、コピーまたは参照?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。