Amankan Data Lama dengan Cara Menggabungkan Object tanpa Menimpa Property Javascript

Ditulis oleh JavaScript

Cara menggabungkan object tanpa menimpa property JavaScript yang paling aman adalah menyalin hanya key yang belum ada di object target. Spread seperti {...a, ...b} dan Object.assign(a, b) selalu menimpa key yang sama dengan nilai dari object terakhir, jadi keduanya tidak cocok untuk penggabungan tanpa overwrite.

Jawaban cepat: pola gabung tanpa overwrite

Kedua operand harus berupa object biasa, misalnya data bawaan aplikasi dan data tambahan dari form atau API. Kalau salah satunya null atau bukan object, loop for...in bisa gagal atau menghasilkan gabungan yang salah.

  • Spread dan Object.assign menimpa karena properti sumber ditulis berurutan ke target.
  • Pola amannya adalah cek dulu apakah key sudah ada sebelum disalin.
  • Gunakan Object.prototype.hasOwnProperty.call(target, key) supaya pengecekan tidak tertipu properti bawaan seperti toString.
const lama = { nama: "Andi", kota: "Jakarta" };
const baru = { nama: "Budi", umur: 25 };

const hasil = { ...lama };
for (const key in baru) {
  if (!Object.prototype.hasOwnProperty.call(hasil, key)) {
    hasil[key] = baru[key];
  }
}

console.log(hasil);
// { nama: "Andi", kota: "Jakarta", umur: 25 }

Nilai nama tetap milik object lama, sedangkan umur ditambahkan karena belum ada.

BACA JUGA:

Metode | Fungsi | Catatan untuk gabung aman

Pilih metode berdasarkan kebutuhan: tambah data baru atau perbarui data lama.

Metode Fungsi Catatan
Spread Gabung cepat dua object Menimpa key sama
Object.assign Salin properti ke target Menimpa dan mengubah target
Loop kondisional Salin hanya key baru Aman untuk data lama

Ketiga metode di atas membuat shallow copy. Artinya object bersarang masih berbagi referensi.

  • Kalau lama.alamat = { kota: "Jakarta" } dan object baru membawa alamat lain, loop sederhana tetap perlu perlakuan khusus untuk level tersebut.
  • Buat helper kustom bila pola ini dipakai berulang, misalnya untuk menggabungkan konfigurasi default dengan konfigurasi pengguna.

Langkah menggabungkan object tanpa menimpa property

  1. Siapkan object target sebagai penyimpan data lama dan object sumber sebagai tambahan.
  2. Salin target ke object baru supaya data aslinya tidak berubah.
  3. Loop setiap key object sumber dengan for...in atau Object.keys().
  4. Salin nilainya hanya apabila key tersebut belum dimiliki target.
  5. Validasi hasil dengan memeriksa properti penting, misalnya hasil.nama === lama.nama.
function gabungTanpaTimpa(target, sumber) {
  const hasil = { ...target };
  for (const key of Object.keys(sumber)) {
    if (!Object.prototype.hasOwnProperty.call(hasil, key)) {
      hasil[key] = sumber[key];
    }
  }
  return hasil;
}

FAQ

Apakah spread aman untuk gabung tanpa menimpa?

Tidak, spread menimpa key yang sama dengan nilai object paling kanan.

Bagaimana jika nested object ikut tertimpa?

Perlu penggabungan rekursif per level karena loop biasa hanya melindungi key tingkat pertama.

Apa yang terjadi jika key bernilai undefined?

Key yang sudah ada tetap dipertahankan, walaupun nilai lama maupun barunya undefined.

Artikel Terkait