JavaScript Academy · Pelajaran

structuredClone untuk Salinan Mendalam

Kloning objek kompleks dengan aman.

structuredClone untuk Salinan Mendalam adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Masalah Salinan Mendalam

Penyebaran dan Object.assign membuat salinan shallow: objek bertingkat dibagikan berdasarkan referensi. Untuk menggandakan struktur bertingkat sepenuhnya, Anda memerlukan salinan mendalam.

structuredClone adalah solusi bawaan.

Mengapa Penyebaran Tidak Cukup

Salinan dengan penyebaran membagikan objek bertingkat. Mengubah bagian bertingkat dari salinan juga memengaruhi objek original.

const original = { user: { name: 'Ada' } };
const shallow = { ...original };

shallow.user.name = 'Grace';
console.log(original.user.name);

structuredClone sebagai Solusi

structuredClone menyalin seluruh struktur secara rekursif. Perubahan pada clone tidak pernah menyentuh objek original.

const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);

deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);

Objek Bertingkat yang Independen

Setelah membuat clone, setiap objek bertingkat memiliki referensi yang berbeda, sehingga perbandingan identitas bernilai false di setiap tingkat.

const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);

console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);

Membuat Clone Array

Array, termasuk array bertingkat, juga dibuat clone secara mendalam. Menambahkan elemen ke array bertingkat milik clone tidak mengubah sumbernya.

const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);

clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);

Mendukung Map dan Set

Berbeda dengan JSON.parse(JSON.stringify(...)), structuredClone mendukung banyak tipe bawaan, termasuk Map, Set, dan Date.

const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);

clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);

Mendukung Referensi Sirkular

Objek yang mereferensikan dirinya sendiri menyebabkan trik JSON gagal, tetapi dapat dibuat clone dengan baik menggunakan structuredClone.

const node = { name: 'root' };
node.self = node;

const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);

Hal yang Tidak Dapat Dibuat Clone

structuredClone tidak dapat menyalin fungsi atau node DOM; metode ini melempar DataCloneError. Metode ini juga menghapus rantai prototipe dan menghasilkan objek biasa.

try {
  structuredClone({ fn: () => 1 });
} catch (e) {
  console.log(e.name);
}

Prototipe Tidak Dipertahankan

Instance kelas yang dibuat clone menjadi objek biasa: data disalin, tetapi metode dan prototipenya hilang.

class Point {
  constructor(x) { this.x = x; }
  show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);

console.log(clone.x);
console.log(clone instanceof Point);

structuredClone dibandingkan dengan Trik JSON

JSON.parse(JSON.stringify(x)) yang lama menghilangkan undefined, tanggal menjadi string, dan gagal menangani siklus. structuredClone menghindari masalah ini untuk data yang dapat diserialisasi.

const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);

console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);

Mengapa Ini Penting

structuredClone menyediakan salinan mendalam bawaan yang andal untuk data biasa, sehingga menggantikan salinan buatan tangan yang rapuh. Gunakan metode ini saat Anda memerlukan salinan state bertingkat yang sepenuhnya independen, dan ingat bahwa metode ini menghapus fungsi serta prototipe.

const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);

Pemeriksaan Singkat

Mengapa menggunakan structuredClone, bukan operator penyebaran, untuk data bertingkat?

Ringkasan: structuredClone

Anda telah mempelajari penyalinan mendalam yang andal:

Penyebaran bersifat shallow; structuredClone menyalin secara mendalam.
Metode ini mendukung Map, Set, Date, dan referensi sirkular.
Metode ini tidak dapat membuat clone fungsi atau node DOM dan menghapus prototipe.
Metode ini merupakan pengganti yang lebih aman untuk trik JSON.parse(JSON.stringify()).

Pertanyaan yang Sering Diajukan

Apakah pelajaran “structuredClone untuk Salinan Mendalam” gratis?

Ya — teks lengkap “structuredClone untuk Salinan Mendalam” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “structuredClone untuk Salinan Mendalam”?

Kloning objek kompleks dengan aman. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “structuredClone untuk Salinan Mendalam” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy