Stop Data Lama Hilang dengan Cara Mengatasi Object Assign Overwrite Data Javascript

Ditulis oleh JavaScript

Cara mengatasi object assign overwrite data javascript adalah membalik urutan argumen dan tidak memakai object lama sebagai target. Tulis Object.assign({}, dataLama, dataBaru) agar data lama tetap utuh dan hanya kunci yang sama yang diperbarui. Untuk object bersarang, gabungkan level nested secara manual karena Object.assign hanya melakukan shallow copy.

Kenapa Object.assign Menimpa Data Lama

Object.assign(target, source) menyalin semua properti enumerable dari source ke target. Kunci yang namanya sama langsung terganti nilainya.

Perilaku ini sering terlihat saat menggabungkan config default dengan config user, atau menggabungkan state lama dengan state baru. Satu kesalahan umum adalah memakai object lama sebagai target, sehingga datanya berubah permanen.

  • Target selalu termutasi, jadi jangan isi target dengan object asli.
  • Penyalinan hanya satu level, object di dalamnya masih referensi yang sama.
  • Urutan argumen menentukan pemenang, source paling kanan menang.

Tabel Gejala dan Penyebab Overwrite

Error/Kondisi Penyebab Solusi
Kunci lama hilang Target berisi data asli Gunakan {} sebagai target
Nested object terganti total Merge hanya dangkal Gabungkan nested manual
Object awal ikut berubah Referensi target dipakai ulang Buat object baru atau clone

BACA JUGA:

Cara Memperbaiki Object.assign yang Menimpa Data

  1. Cek target argumen pertama, pastikan object kosong atau salinan baru.
  2. Atur urutan prioritas, letakkan data default dulu lalu data baru terakhir.
  3. Lindungi nested object dengan assign atau spread tambahan untuk level tersebut.
  4. Uji kembali object lama untuk memastikan tidak termutasi.
// SALAH: user ikut berubah, theme hilang
const hasilSalah = Object.assign(user, update);

// BENAR: user aman, hanya kunci sama diperbarui
const hasilBenar = Object.assign({}, user, update);

// BENAR untuk nested
const hasilNested = Object.assign({}, user, {
  profil: Object.assign({}, user.profil, update.profil)
});

Untuk data bersarang yang kompleks, pakai structuredClone() sebelum merge bila tersedia di runtime. Clone dulu, lalu gabungkan tiap level yang perlu dipertahankan.

Cara Mencegah Data Tertimpa Lagi

  • Selalu gunakan pola Object.assign({}, defaults, options) untuk config.
  • Letakkan nilai prioritas tertinggi di argumen paling kanan.
  • Validasi tipe dengan typeof nilai === "object" sebelum assign agar tidak menggabungkan null atau array secara keliru.
  • Buat unit test kecil yang memeriksa kunci penting tetap ada setelah merge.

FAQ

Apakah Object.assign selalu menimpa properti sama?

Ya, properti dengan nama sama selalu diganti oleh source yang posisinya paling kanan.

Bagaimana menggabungkan nested object tanpa hilang?

Gabungkan tiap level nested secara eksplisit dengan Object.assign atau spread tambahan.

Kapan memakai spread dibanding Object.assign?

Pakai spread untuk sintaks lebih ringkas, pakai Object.assign saat menggabungkan banyak source dinamis.

Artikel Terkait