Lompat ke konten
Dasbor
Kembali ke modul

JavaScript: Bahasanya · 7/12

Reference, copy, dan mutation

Bug yang paling sering melahap developer junior: dua nama menunjuk object yang sama.

Baca 25 menit

Setelah pelajaran ini kamu bisa

  • Menjelaskan apa yang sebenarnya disimpan variable yang memegang object
  • Memprediksi kapan mengubah satu variable memengaruhi variable lain
  • Menyalin object secara shallow dan deep, serta tahu mana yang kamu butuhkan
  • Mengenali bug mutation di kode orang lain

Pelajaran ini menjelaskan satu kategori bug yang kalau tidak dipahami akan menghabiskan berhari-hari waktumu. Isinya pendek, dan ini halaman paling bernilai di modul ini.

Primitive disimpan by value: variable-nya memegang benda itu sendiri. Object dan array disimpan by reference: variable-nya memegang alamat yang menunjuk ke bendanya.

Coba sendiri

Tebak kedua output sebelum menjalankan. Sebagian besar orang salah di yang kedua.

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Di mana ini menyakitkan di kode nyata

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Perbaikannya satu karakter: { ...defaultSettings } bukan defaultSettings. Itu membuat object baru, jadi yang asli tetap aman.

Copy shallow versus deep

Copy shallow menduplikasi hanya level teratas; object bersarang masih dipakai bersama. Copy deep menduplikasi sampai ke dalam. Spread dan Object.assign bersifat shallow.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Kenapa React sangat peduli soal ini

React memutuskan perlu re-render atau tidak dengan membandingkan reference-nya, bukan isinya. Memutasi object di tempat membuat reference-nya tetap sama, jadi React menyimpulkan tidak ada yang berubah dan layarmu tidak diperbarui. "Saya sudah ubah datanya tapi UI-nya tidak bergerak" hampir selalu karena ini.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Tulis updateNested(venue, newOwnerName) yang mengembalikan venue baru dengan nama owner baru, tanpa menyentuh input sama sekali — termasuk object owner bersarangnya. Buktikan dengan menampilkan yang asli setelah memanggilnya. Jangan pakai structuredClone; kerjakan dengan spread supaya kamu paham harganya.

Hasil yang diharapkan

Nama owner yang asli tidak berubah setelah pemanggilan.

Tampilkan contoh solusi

Coba dulu minimal sepuluh menit sebelum membuka ini. Bagian yang terasa susah itu justru yang mengajari kamu.

function updateNested(venue, newOwnerName) {
  return {
    ...venue,
    owner: { ...venue.owner, name: newOwnerName },
  };
}

const original = { name: "Villa", owner: { name: "Ana", verified: true } };
const updated = updateNested(original, "Budi");

console.log(original.owner.name);  // Ana
console.log(updated.owner.name);   // Budi
console.log(updated.owner.verified); // true — other fields survived

Cek pemahaman

const b = { ...a } di mana a = { name: "x", owner: { name: "Ana" } }. Lalu kamu mengatur b.owner.name = "Budi". Berapa nilai a.owner.name?

Pilih jawaban dulu