JavaScript Structured Clone: Menguasai Penyalinan Objek Mendalam (Deep Copy)

Di JavaScript, membuat salinan objek dan array adalah tugas yang umum. Meskipun penugasan sederhana (`=`) berfungsi untuk nilai primitif, ia hanya membuat referensi untuk objek. Ini berarti bahwa perubahan pada objek yang disalin juga akan memengaruhi yang asli. Untuk membuat salinan independen, kita memerlukan mekanisme penyalinan mendalam (deep copy). Algoritma structured clone menyediakan cara yang kuat dan serbaguna untuk mencapai ini, terutama saat berurusan dengan struktur data yang kompleks.

Apa itu Structured Clone?

Algoritma structured clone adalah mekanisme bawaan di JavaScript yang memungkinkan Anda membuat salinan mendalam (deep copy) dari nilai-nilai JavaScript. Berbeda dengan penugasan sederhana atau metode penyalinan dangkal (shallow copy) (seperti `Object.assign()` atau sintaksis spread `...`), kloning terstruktur membuat objek dan array yang sepenuhnya baru, secara rekursif menyalin semua properti yang bersarang. Ini memastikan bahwa objek yang disalin benar-benar independen dari yang asli.

Algoritma ini juga digunakan di balik layar untuk komunikasi antara web worker dan saat menyimpan data menggunakan History API. Memahami cara kerjanya dapat membantu Anda mengoptimalkan kode dan menghindari perilaku yang tidak terduga.

Cara Kerja Structured Clone

Algoritma structured clone bekerja dengan melintasi grafik objek dan membuat instansi baru dari setiap objek dan array yang ditemui. Ini menangani berbagai tipe data, termasuk:

• Tipe primitif (angka, string, boolean, null, undefined) - disalin berdasarkan nilai.
• Objek dan Array - dikloning secara rekursif.
• Tanggal (Dates) - dikloning sebagai objek Date baru dengan stempel waktu yang sama.
• Ekspresi Reguler (Regular Expressions) - dikloning sebagai objek RegExp baru dengan pola dan flag yang sama.
• Objek Blob dan File - dikloning (tetapi mungkin melibatkan pembacaan seluruh data file).
• ArrayBuffers dan TypedArrays - dikloning dengan menyalin data biner yang mendasarinya.
• Map dan Set - dikloning secara rekursif, membuat Map dan Set baru dengan kunci dan nilai yang dikloning.

Algoritma ini juga menangani referensi sirkular, mencegah rekursi tak terbatas.

Menggunakan Structured Clone

Meskipun tidak ada fungsi `structuredClone()` langsung di semua lingkungan JavaScript (browser lama mungkin tidak memiliki dukungan asli), mekanisme yang mendasarinya digunakan dalam berbagai konteks. Salah satu cara umum untuk mengaksesnya adalah melalui API `postMessage` yang digunakan untuk komunikasi antara web worker atau iframe.

Metode 1: Menggunakan `postMessage` (Direkomendasikan untuk Kompatibilitas Luas)

Pendekatan ini memanfaatkan API `postMessage`, yang secara internal menggunakan algoritma structured clone. Kita membuat iframe sementara, mengirim objek ke dalamnya menggunakan `postMessage`, dan kemudian menerimanya kembali.

            function structuredClone(obj) {
  return new Promise(resolve => {
    const { port1, port2 } = new MessageChannel();
    port1.onmessage = ev => resolve(ev.data);
    port2.postMessage(obj);
  });
}

// Contoh Penggunaan
const originalObject = { 
  name: "John Doe",
  age: 30, 
  address: { city: "New York", country: "USA" }
};

async function deepCopyExample() {
  const clonedObject = await structuredClone(originalObject);

  console.log("Original Object:", originalObject);
  console.log("Cloned Object:", clonedObject);

  // Ubah objek yang dikloning
  clonedObject.address.city = "Los Angeles";

  console.log("Original Object (after modification):", originalObject); // Tidak berubah
  console.log("Cloned Object (after modification):", clonedObject); // Diubah
}

deepCopyExample();

            

              
                Copy
              
            
          

Metode ini sangat kompatibel di berbagai browser dan lingkungan.

Metode 2: `structuredClone` Bawaan (Lingkungan Modern)

Banyak lingkungan JavaScript modern sekarang menawarkan fungsi `structuredClone()` bawaan secara langsung. Ini adalah cara yang paling efisien dan mudah untuk melakukan deep copy jika tersedia.

            // Periksa apakah structuredClone didukung
if (typeof structuredClone === 'function') {
  const originalObject = { 
    name: "Alice Smith",
    age: 25, 
    address: { city: "London", country: "UK" }
  };

  const clonedObject = structuredClone(originalObject);

  console.log("Original Object:", originalObject);
  console.log("Cloned Object:", clonedObject);

  // Ubah objek yang dikloning
  clonedObject.address.city = "Paris";

  console.log("Original Object (after modification):", originalObject); // Tidak berubah
  console.log("Cloned Object (after modification):", clonedObject); // Diubah
}
else {
  console.log("structuredClone tidak didukung di lingkungan ini. Gunakan polyfill postMessage.");
}

            

              
                Copy
              
            
          

Sebelum menggunakan `structuredClone`, penting untuk memeriksa apakah itu didukung di lingkungan target. Jika tidak, gunakan polyfill `postMessage` atau alternatif deep copy lainnya.

Batasan Structured Clone

Meskipun kuat, structured clone memiliki beberapa batasan:

• Fungsi: Fungsi tidak dapat dikloning. Jika sebuah objek berisi fungsi, ia akan hilang selama proses kloning. Properti tersebut akan diatur ke `undefined` di objek yang dikloning.
• Node DOM: Node DOM (seperti elemen di halaman web) tidak dapat dikloning. Mencoba mengkloningnya akan menghasilkan error.
• Error: Objek error tertentu juga tidak dapat dikloning, dan algoritma structured clone dapat melemparkan error jika menemuinya.
• Rantai Prototipe: Rantai prototipe objek tidak dipertahankan. Objek yang dikloning akan memiliki `Object.prototype` sebagai prototipenya.
• Performa: Penyalinan mendalam bisa jadi mahal secara komputasi, terutama untuk objek yang besar dan kompleks. Pertimbangkan implikasi performa saat menggunakan structured clone, khususnya dalam aplikasi yang kritis terhadap performa.

Kapan Menggunakan Structured Clone

Structured clone berharga dalam beberapa skenario:

• Web Workers: Saat meneruskan data antara thread utama dan web worker, structured clone adalah mekanisme utamanya.
• History API: Metode `history.pushState()` dan `history.replaceState()` menggunakan structured clone untuk menyimpan data di riwayat browser.
• Penyalinan Objek Mendalam: Saat Anda perlu membuat salinan objek yang sepenuhnya independen, structured clone memberikan solusi yang andal. Ini sangat berguna ketika Anda ingin memodifikasi salinan tanpa memengaruhi yang asli.
• Serialisasi dan Deserialisasi: Meskipun bukan tujuan utamanya, structured clone dapat digunakan sebagai bentuk dasar serialisasi dan deserialisasi (meskipun JSON biasanya lebih disukai untuk persistensi).

Alternatif untuk Structured Clone

Jika structured clone tidak cocok untuk kebutuhan Anda (misalnya, karena batasan atau masalah performa), pertimbangkan alternatif berikut:

• JSON.parse(JSON.stringify(obj)): Ini adalah pendekatan umum untuk penyalinan mendalam, tetapi memiliki batasan. Ini hanya berfungsi untuk objek yang dapat diserialisasi ke JSON (tidak ada fungsi, Tanggal diubah menjadi string, dll.) dan bisa lebih lambat dari structured clone untuk objek yang kompleks.
• `_.cloneDeep()` dari Lodash: Lodash menyediakan fungsi `cloneDeep()` yang kuat yang menangani banyak kasus khusus dan menawarkan performa yang baik. Ini adalah pilihan yang baik jika Anda sudah menggunakan Lodash dalam proyek Anda.
• Fungsi Deep Copy Kustom: Anda dapat menulis fungsi deep copy Anda sendiri menggunakan rekursi. Ini memberi Anda kontrol penuh atas proses kloning, tetapi membutuhkan lebih banyak usaha dan bisa rawan kesalahan. Pastikan Anda menangani referensi sirkular dengan benar.

Contoh Praktis dan Kasus Penggunaan

Contoh 1: Menyalin Data Pengguna Sebelum Modifikasi

Bayangkan Anda sedang membangun aplikasi manajemen pengguna. Sebelum mengizinkan pengguna untuk mengedit profil mereka, Anda mungkin ingin membuat salinan mendalam dari data mereka saat ini. Ini memungkinkan Anda untuk kembali ke data asli jika pengguna membatalkan pengeditan atau jika terjadi error selama proses pembaruan.

            let userData = {
  id: 12345,
  name: "Carlos Rodriguez",
  email: "carlos.rodriguez@example.com",
  preferences: {
    language: "es",
    theme: "dark"
  }
};

async function editUser(newPreferences) {
  // Buat salinan mendalam dari data asli
  const originalUserData = await structuredClone(userData);

  try {
    // Perbarui data pengguna dengan preferensi baru
    userData.preferences = newPreferences;

    // ... Simpan data yang diperbarui ke server ...

    console.log("Data pengguna berhasil diperbarui!");
  } catch (error) {
    console.error("Error saat memperbarui data pengguna. Mengembalikan ke data asli.", error);
    // Kembali ke data asli
    userData = originalUserData;
  }
}

// Contoh penggunaan
editUser({ language: "en", theme: "light" });

            

              
                Copy
              
            
          

Contoh 2: Mengirim Data ke Web Worker

Web worker memungkinkan Anda untuk melakukan tugas-tugas komputasi intensif di thread terpisah, mencegah thread utama menjadi tidak responsif. Saat mengirim data ke web worker, Anda perlu menggunakan structured clone untuk memastikan bahwa data ditransfer dengan benar.

            // Thread utama
const worker = new Worker('worker.js');

let dataToSend = {
  numbers: [1, 2, 3, 4, 5],
  text: "Proses data ini di worker."
};

worker.postMessage(dataToSend);

worker.onmessage = (event) => {
  console.log("Diterima dari worker:", event.data);
};

// worker.js (Web Worker)
self.onmessage = (event) => {
  const data = event.data;
  console.log("Worker menerima data:", data);

  // ... Lakukan beberapa pemrosesan pada data ...
  const processedData = data.numbers.map(n => n * 2);

  self.postMessage(processedData);
};

            

              
                Copy
              
            
          

Praktik Terbaik Menggunakan Structured Clone

• Pahami Batasannya: Sadari jenis data yang tidak dapat dikloning (fungsi, node DOM, dll.) dan tangani dengan tepat.
• Pertimbangkan Performa: Untuk objek yang besar dan kompleks, structured clone bisa lambat. Evaluasi apakah ini solusi paling efisien untuk kebutuhan Anda.
• Periksa Dukungan: Jika menggunakan fungsi `structuredClone()` bawaan, periksa apakah didukung di lingkungan target. Gunakan polyfill jika perlu.
• Tangani Referensi Sirkular: Algoritma structured clone menangani referensi sirkular, tetapi berhati-hatilah dengan referensi tersebut dalam struktur data Anda.
• Hindari Mengkloning Data yang Tidak Perlu: Hanya kloning data yang benar-benar perlu Anda salin. Hindari mengkloning objek atau array besar jika hanya sebagian kecil yang perlu diubah.

Kesimpulan

Algoritma structured clone JavaScript adalah alat yang kuat untuk membuat salinan mendalam dari objek dan array. Memahami kapabilitas dan batasannya memungkinkan Anda menggunakannya secara efektif dalam berbagai skenario, mulai dari komunikasi web worker hingga penyalinan objek mendalam. Dengan mempertimbangkan alternatif dan mengikuti praktik terbaik, Anda dapat memastikan bahwa Anda menggunakan metode yang paling sesuai untuk kebutuhan spesifik Anda.

Ingatlah untuk selalu mempertimbangkan implikasi performa dan memilih pendekatan yang tepat berdasarkan kompleksitas dan ukuran data Anda. Dengan menguasai structured clone dan teknik penyalinan mendalam lainnya, Anda dapat menulis kode JavaScript yang lebih kuat dan efisien.

Pembelajaran Lebih Lanjut

• Dokumen Web MDN: Algoritma structured clone
• Dokumen Web MDN: structuredClone
• Dokumen Web MDN: Worker.postMessage()