Shallow Copy vs Deep Copy di JavaScript

JavaScript menangani penyalinan dalam dua cara tergantung pada tipe datanya.

Nilai Primitif (Copy by Value) Tipe primitif mencakup string, number, boolean, symbol, bigInt, dan null. Saat Anda menyalin nilai primitif, JavaScript membuat versi baru yang independen di dalam memori.

Contoh: let a = 10; let b = a; b = 20; Hasil: a tetap 10.

Nilai Non-Primitif (Copy by Reference) Objek dan array bekerja secara berbeda. Mereka menggunakan referensi. Saat Anda menyalin sebuah objek, Anda hanya menyalin penunjuk (pointer) ke lokasinya di memori.

Contoh: let original = { name: "YOO" }; let copy = original; copy.name = "NEW"; Hasil: original.name sekarang menjadi "NEW".

Perbedaannya: Shallow vs Deep

Shallow copy menyalin level teratas dari sebuah objek. Jika objek tersebut memiliki objek bersarang (nested objects), ia tetap merujuk pada referensi bersarang yang asli. Deep copy membuat objek yang benar-benar baru dengan semua nilai yang baru.

Bayangkan seperti pizza:

  • Shallow Copy: Anda dan seorang teman berbagi satu pizza. Jika teman Anda memakan satu potong, pizza tersebut juga menjadi lebih kecil bagi Anda.
  • Deep Copy: Anda berdua memiliki pizza masing-masing yang terpisah. Jika teman Anda memakan satu potong, pizza Anda tetap sama.

Metode Shallow Copy Anda dapat menggunakan spread operator (...) untuk membuat shallow copy.

let original = { name: "YOO", details: { age: 22 } }; let copy = { ...original };

Peringatan: Jika Anda mengubah original.details.age, copy.details.age juga akan berubah. Inilah jebakan shallow copy.

Metode Deep Copy

  1. structuredClone() Ini adalah fungsi bawaan di browser modern dan Node.js. Fungsi ini menangani struktur bersarang dengan sempurna.

Kelebihan:

  • Cepat dan native.
  • Menangani Date, RegExp, dan Map.

Kekurangan:

  • Gagal jika objek berisi fungsi atau node DOM.
  1. JSON.parse(JSON.stringify()) Ini adalah trik lama di mana Anda mengubah objek menjadi string dan mengembalikannya lagi menjadi objek.

Mengapa harus dihindari:

  • Ia kehilangan data seperti undefined, Map, Set, atau Infinity.
  • Dapat merusak nilai-nilai tertentu.

Sumber: https://dev.to/yogesh_992/shallow-copy-vs-deep-copy-in-java-script-explained-in-easiest-way-3dg5