Salinan Cetek (Shallow Copy) lwn Salinan Dalam (Deep Copy) dalam JavaScript

JavaScript mengendalikan penyalinan dalam dua cara bergantung pada jenis data.

Nilai Primitif (Salin mengikut Nilai) Jenis primitif termasuk string, nombor, boolean, simbol, bigInt, dan null. Apabila anda menyalin nilai primitif, JavaScript mencipta versi baharu yang bebas dalam memori.

Contoh: let a = 10; let b = a; b = 20; Keputusan: a kekal 10.

Nilai Bukan Primitif (Salin mengikut Rujukan) Objek dan tatasusunan (array) berfungsi secara berbeza. Ia menggunakan rujukan. Apabila anda menyalin objek, anda hanya menyalin penunjuk (pointer) ke lokasinya dalam memori.

Contoh: let original = { name: "YOO" }; let copy = original; copy.name = "NEW"; Keputusan: original.name kini menjadi "NEW".

Perbezaan: Shallow lwn Deep

Salinan cetek (shallow copy) menyalin tahap teratas sesuatu objek. Jika objek tersebut mempunyai objek bersarang (nested objects), ia masih merujuk kepada rujukan bersarang yang asal. Salinan dalam (deep copy) mencipta objek yang benar-benar baharu dengan semua nilai yang baharu.

Bayangkan ia seperti pizza:

  • Salinan Cetek: Anda dan seorang rakan berkongsi satu pizza. Jika rakan anda makan sekeping, pizza tersebut menjadi lebih kecil untuk anda juga.
  • Salinan Dalam: Anda berdua mempunyai pizza masing-masing yang berasingan. Jika rakan anda makan sekeping, pizza anda tetap sama.

Kaedah Salinan Cetek Anda boleh menggunakan spread operator (...) untuk membuat salinan cetek.

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

Amaran: Jika anda mengubah original.details.age, copy.details.age juga akan berubah. Inilah perangkap salinan cetek.

Kaedah Salinan Dalam

  1. structuredClone() Ini adalah fungsi terbina dalam dalam pelayar moden dan Node.js. Ia mengendalikan struktur bersarang dengan sempurna.

Pros:

  • Pantas dan asli (native).
  • Mengendalikan Dates, RegExp, dan Maps.

Cons:

  • Gagal jika objek mengandungi fungsi atau nod DOM.
  1. JSON.parse(JSON.stringify()) Ini adalah teknik lama di mana anda menukarkan objek kepada string dan menukarkannya semula kepada objek.

Mengapa perlu dielakkan:

  • Ia kehilangan data seperti undefined, Map, Set, atau Infinity.
  • Ia boleh merosakkan nilai-nilai tertentu.

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