Affectations d'objets Javascript, copie ou référence ?

En JavaScript, nous utilisons l'objet quotient. Lorsque nous attribuons une valeur d'objet à une variable, nous utilisons l'opérateur d'affectation "=" comme approche par défaut. Nous savons que l'objet est stocké à un endroit de la mémoire et que la variable fait référence à cette adresse mémoire. Lorsque nous travaillons avec des objets en JavaScript, le résultat de l'objet varie pour diverses raisons. Nous devons donc changer ou transformer, copier ou cloner l'objet en fonction de son résultat. Voyons donc quand et comment un objet JavaScript peut être cloné ou copié.

• Passer la Référence d'objet
• Copier ou cloner un objet
  1. Copie superficielle
  2. Copie approfondie

Passer une référence d'objet

Supposons que nous créons un objet et l'attribuons à une variable nommée listData . Dans ce scénario, variable nommée listData > points à une référence d'adresse mémoire de cet objet et la valeur de l'objet est stockée dans cette référence d'adresse mémoire. Maintenant, si nous créons une variable appelée copylistData et l'attribuons à listData avec "="opérateur d'affectation alors copylistData pointera vers la même adresse mémoire de l'objet listData. Et cette méthode s'appelle passer Object Reference.

Exemple :

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 

Cette méthode a 2 propriétés
Référence partagée : listData et copylistData pointent vers une référence à l'adresse mémoire du même objet. Dans ce cas, si une modification est apportée à listData, son effet sera également directement appliqué à copylistData.

Source unique de vérité : Cette méthode fonctionne comme une source unique de vérité. Autrement dit, vous pouvez utiliser cette méthode lorsque vous souhaitez lier copylistData à listData ou maintenir la cohérence entre ces deux variables.

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 সহ ক্লোন করা।

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!