Cara Menggunakan structuredClone() untuk Deep Copy Object di JavaScript

Pernahkah kamu membuat salinan (copy) sebuah object di JavaScript, lalu ketika kamu mengubah isi object baru tersebut, object yang lama ikut berubah? Masalah ini sering sekali membuat pusing para developer, terutama saat menangani data state yang kompleks seperti di React, Vue, atau aplikasi Node.js.

Dulu, kita harus bergantung pada trik JSON.parse(JSON.stringify(obj)) atau menggunakan library pihak ketiga seperti Lodash untuk melakukan deep copy. Namun, cara-cara lama ini membawa banyak masalah bawaan, mulai dari hilangnya tipe data khusus hingga performa yang lambat.

Kabar baiknya, sekarang JavaScript sudah memiliki solusi bawaan (native) yang sangat bertenaga, yaitu fungsi structuredClone(). Mari kita bahas secara mendalam cara menggunakannya, mengapa fungsi ini jauh lebih unggul, dan kapan kamu harus memakainya di proyek aslimu.

Shallow Copy vs Deep Copy

Sebelum masuk ke cara penggunaan structuredClone(), kamu harus paham dulu kenapa masalah penggandaan data ini bisa terjadi di JavaScript. JavaScript membagi tipe data menjadi dua kelompok: tipe primitif (seperti string, number, boolean) dan tipe referensi (seperti object, array, map, set).

Saat kamu menyalin tipe data referensi menggunakan operator penugasan biasa (=), kamu tidak benar-benar membuat data baru. Kamu hanya menyalin "alamat memori" atau referensinya saja.

Apa itu Shallow Copy?

Shallow copy adalah proses menyalin object di mana hanya level terluar (top-level) saja yang benar-benar disalin, sedangkan object yang berada di dalamnya (nested object) tetap merujuk pada alamat memori yang sama. Di JavaScript, kamu biasanya melakukan shallow copy menggunakan spread operator (...) atau Object.assign().

Perhatikan contoh kegagalan shallow copy berikut ini:

const penggunaLama = {
  nama: "Rian",
  kontak: {
    email: "[email protected]"
  }
};

// Melakukan shallow copy dengan spread operator
const penggunaBaru = { ...penggunaLama };

// Mengubah data terluar (aman)
penggunaBaru.nama = "Andi"; 

// Mengubah data bersarang / nested object (masalah terjadi di sini!)
penggunaBaru.kontak.email = "[email protected]";

console.log(penggunaLama.nama); // Output: "Rian" (Aman)
console.log(penggunaLama.kontak.email); // Output: "[email protected]" (Ikut berubah!)

Lihat hasilnya? Email milik penggunaLama ikut berubah menjadi email milik penggunaBaru. Ini terjadi karena properti kontak pada kedua object tersebut masih menunjuk ke satu titik memori yang sama.

Apa itu Deep Copy?

Deep copy adalah proses penggandaan total. Semua tingkatan data, sedalam apa pun struktur object tersebut, akan dibuatkan salinan barunya di memori yang sepenuhnya terpisah. Perubahan pada object hasil salinan tidak akan pernah menyenggol atau merusak data pada object asli.

Mengapa Trik Jadul JSON.parse Penuh Risiko?

Sebelum fungsi structuredClone() diperkenalkan, alternatif native yang paling populer untuk melakukan deep copy adalah kombinasi JSON:

const salinan = JSON.parse(JSON.stringify(objectAsli));

Secara sekilas, trik ini bekerja dengan baik untuk object sederhana. Object diubah dulu menjadi string teks biasa, lalu diubah kembali menjadi object baru. Karena teks tidak memiliki alamat referensi, otomatis terbentuklah object yang benar-benar segar di memori.

Namun, trik ini sangat berbahaya jika data kamu mengandung tipe data modern atau struktur yang kompleks. Berikut adalah kehancuran yang bisa terjadi jika kamu nekat memakai cara ini:

• Kehilangan Tipe Data Khusus: Jika object kamu memiliki properti berupa objek Date, nilainya akan berubah menjadi string ISO biasa, bukan lagi object Date asli. Kamu tidak akan bisa memanggil method seperti .getTime() lagi.
• Menghilangkan Map dan Set: Tipe data modern seperti Map dan Set akan langsung diubah menjadi object kosong {} atau hilang sama sekali karena JSON tidak mengenal struktur data ini.
• Mengabaikan RegExp: Objek Regular Expression (/abc/g) akan dikonversi menjadi object kosong.
• Error pada Circular Reference: Jika object kamu memiliki properti yang merujuk kembali ke dirinya sendiri (struktur melingkar), cara ini akan langsung memicu error TypeError: Converting circular structure to JSON.

Cara Menggunakan structuredClone() dengan Benar

Fungsi structuredClone() hadir untuk menyelesaikan semua keterbatasan di atas secara native. Fungsi ini berjalan langsung di browser modern maupun di lingkungan Node.js tanpa perlu menginstal package tambahan apa pun.

Sintaks dasarnya sangat sederhana dan langsung pada intinya:

const objekBaru = structuredClone(objekAsli);

Mari kita langsung uji coba keampuhannya menggunakan skenario data rumit yang gagal ditangani oleh shallow copy maupun metode JSON jadul:

const dataKompleks = {
  id: 101,
  tanggalDibuat: new Date("2026-06-01"),
  polaPencarian: /javascript/gi,
  daftarUnik: new Set([1, 2, 3, 3, 4]),
  detail: {
    lokasi: "Jakarta",
    koordinat: { lat: -6.2, lng: 106.8 }
  }
};

// Melakukan deep copy yang sesungguhnya dengan structuredClone
const dataSalinan = structuredClone(dataKompleks);

// Mari kita modifikasi data salinan secara agresif
dataSalinan.tanggalDibuat.setFullYear(2030);
dataSalinan.detail.koordinat.lat = -7.5;
dataSalinan.daftarUnik.add(5);

// Verifikasi Object Asli (Tetap Aman dan Tidak Terpengaruh)
console.log(dataKompleks.tanggalDibuat.getFullYear()); // Output: 2026 (Aman!)
console.log(dataKompleks.detail.koordinat.lat);       // Output: -6.2 (Aman!)
console.log(dataKompleks.daftarUnik.has(5));          // Output: false (Aman!)

// Verifikasi Object Salinan (Berubah Sesuai Perintah)
console.log(dataSalinan.tanggalDibuat.getFullYear()); // Output: 2030
console.log(dataSalinan.detail.koordinat.lat);       // Output: -7.5
console.log(dataSalinan.daftarUnik.has(5));          // Output: true

Hebat, bukan? Perhatikan bagaimana properti bersarang yang sangat dalam, objek Date, dan struktur data Set semuanya terduplikasi dengan sempurna tanpa ada data yang rusak atau turun kasta menjadi string biasa.

Kelebihan Utama structuredClone() dibanding Metode Lain

Jika kamu masih ragu untuk beralih menggunakan fungsi ini, berikut adalah tabel perbandingan objektif yang menunjukkan mengapa fungsi bawaan ini jauh lebih unggul daripada cara-cara konvensional:

Selain keunggulan fitur di atas, dari sisi performa, fungsi ini dioptimalkan langsung oleh mesin JavaScript (seperti V8 di Chrome dan Node.js). Artinya, proses penyalinan data berjalan jauh lebih cepat dibandingkan fungsi Javascript buatan sendiri yang harus melakukan rekursi berulang kali melewati setiap properti object.

Keterbatasan structuredClone()

Meskipun fungsi ini sangat kuat, ia bukanlah alat sihir yang bisa menyalin segala hal tanpa pengecualian. Algoritma klon terstruktur ini memiliki beberapa batasan mutlak yang sengaja dirancang demi keamanan dan integritas memori.

Kamu tidak bisa menggunakan fungsi ini untuk menyalin beberapa jenis properti berikut:

1. Fungsi atau Method

Jika sebuah object memiliki properti berupa fungsi atau method, proses klon akan langsung gagal dan melempar error DataCloneError. JavaScript tidak mengizinkan penggandaan closure atau kode eksekusi secara sembarangan.

const target = {
  nama: "Budi",
  sapa: function() { console.log("Halo"); }
};

// Ini akan menghasilkan ERROR!
const gagal = structuredClone(target); 

2. Properti DOM (Document Object Model)

Kamu tidak bisa menyalin elemen HTML langsung dari halaman web (misalnya objek hasil dari document.querySelector) ke dalam fungsi ini.

3. Properti Deskriptor (Getter & Setter)

Fitur meta-programming seperti getter, setter, dan properti yang diset readonly lewat Object.defineProperty tidak akan ikut tersalin karakteristik uniknya. Properti tersebut hanya akan diambil nilai mentahnya saja saat disalin.

4. Objek Prototype

Rantai prototype (prototype chain) dari object yang kamu salin tidak akan ikut berjalan ke object yang baru. Object hasil salinan akan selalu berakar langsung sebagai instance dari object murni biasa.

Mengelola State Aplikasi Tanpa Bug

Kapan waktu terbaik untuk menggunakan fungsi ini? Salah satu skenario paling krusial di dunia nyata adalah saat kamu mengelola state aplikasi. Bayangkan kamu sedang membangun aplikasi keranjang belanja ecommerce dan perlu membuat fitur "Batalkan Perubahan" (Undo) jika user tidak jadi mengubah detail pesanan mereka.

Mari kita lihat bagaimana fungsi ini menyelamatkan data transaksi dari bug manipulasi referensi:

// State utama aplikasi belanja
const stateKeranjangBelanja = {
  idTransaksi: "TX-9921",
  pelanggan: { nama: "Siti", tipe: "VIP" },
  item: [
    { produk: "Laptop Pro", harga: 15000000, jumlah: 1 },
    { produk: "Mouse Wireless", harga: 3000000, jumlah: 2 }
  ]
};

// Membuat backup data sebelum user melakukan edit di halaman checkout
const backupState = structuredClone(stateKeranjangBelanja);

// Simulasi: User mengutak-atik jumlah barang di antarmuka aplikasi
stateKeranjangBelanja.item[0].jumlah = 3;
stateKeranjangBelanja.pelanggan.tipe = "Reguler";

// User menekan tombol "Batal Edit" -> Kembalikan data dari backupState
console.log(backupState.item[0].jumlah); // Output: 1 (Data asli selamat!)
console.log(backupState.pelanggan.tipe); // Output: "VIP" (Data asli selamat!)

Jika pada skenario di atas kamu hanya menggunakan spread operator seperti { ...stateKeranjangBelanja }, maka array item di dalam data cadanganmu akan ikut rusak ketika user mengubah jumlah barang. Akibatnya, fitur "Batal" tidak akan berfungsi dan aplikasi kamu akan menyimpan data yang salah ke database. Fungsi ini mencegah malapetaka tersebut secara total.

Kesimpulan

Fungsi structuredClone() adalah standar baru yang wajib dikuasai oleh setiap developer JavaScript modern. Mulai sekarang, tinggalkan kebiasaan lama menggunakan trik JSON.parse(JSON.stringify()) yang penuh dengan jebakan bug, serta kurangi ketergantungan proyekmu dari library eksternal berukuran besar hanya demi melakukan penggandaan data.

Gunakan fungsi ini setiap kali kamu berhadapan dengan struktur data bersarang (nested data), penanganan state yang sensitif, atau ketika bekerja dengan objek modern seperti Map, Set, dan Date. Dengan begitu, kodemu akan menjadi jauh lebih bersih, aman, dan memiliki performa yang optimal.

1. MDN Web Docs. structuredClone() global function. Diakses pada 3 Juni 2026, dari https://developer.mozilla.org/en-US/docs/Web/API/structuredClone
2. Node.js Documentation. Global Objects: structuredClone. Diakses pada 3 Juni 2026, dari https://nodejs.org/api/globals.html#structuredclonevalue-options
3. HTML Living Standard. Safe passing of structured data. Diakses pada 3 Juni 2026, dari https://html.spec.whatwg.org/multipage/structured-data.html#structured-cloning