Structured Clone Javascript

1 min read


Halo guys mau sharing sedikit tentang cloning.. Saat kita mengolah data tak lepas dari memanipulasi data tersebut untuk digunakan sebagai mana mestinya.. namun terkadang saat melakukan manipulasi data, data asli atau sumber akan berubah sedangkan yang kita inginkan data prototype nya saja yang berubah.. sebagai contoh seperti dibawah ini…

const fictionalCharacter = {
  firstName: 'Sherlock',
  lastName: 'Holmes',
  age: 35,
  address: {
    addressLine1: '221B Baker Street',
    addressLine2: '',
    city: 'London',
    country: 'United Kingdom',
    postalCode: 'NW1 6XE'
  }
}

// Deep copy upto level 1
const clonedFictionalCharacter = { ...fictionalCharacter };

clonedFictionalCharacter.firstName = 'John';
clonedFictionalCharacter.lastName = 'Watson';

console.log(fictionalCharacter);
console.log(clonedFictionalCharacter);

// Shallow copy for nested address object
clonedFictionalCharacter.address.country = 'USA';

console.log(fictionalCharacter);
console.log(clonedFictionalCharacter);

dengan menggunakan spread diatas, data pada object pertama dapat berubah yakni data object dari address.. sehingga kita harus lebih teliti lagi dalam parsing datanya… Jadi bagaimana supaya tidak merubah data yang kita jadikan sumber tersbut.. biasanya saat parsing data kita mengugnakan JSON parse, namun kali ini kita bisa menggunakan structuredClone() yang dianggap lebih cepat.. namun diingat ada beberapa browser yang tidak mensupport method ini… cara penggunaannya mungkin ada di dalam code dibawah ini :

const fictionalCharacter = {
  firstName: 'Sherlock',
  lastName: 'Holmes',
  age: 35,
  address: {
    addressLine1: '221B Baker Street',
    addressLine2: '',
    city: 'London',
    country: 'United Kingdom',
    postalCode: 'NW1 6XE'
  }
}

// Deep copy for nested objects using structuredClone()
const clonedFictionalCharacter = structuredClone(fictionalCharacter);

clonedFictionalCharacter.firstName = 'John';
clonedFictionalCharacter.lastName = 'Watson';
clonedFictionalCharacter.address.country = 'USA';

console.log(fictionalCharacter);
console.log(clonedFictionalCharacter);

dan yapp sudah selesai… mantab yaa… okay see you …

Bima Sena

Leave a Reply

Your email address will not be published. Required fields are marked *