JavaScript Academy · Pelajaran

Pembekuan Dangkal vs Mendalam

Pahami seberapa jauh pembekuan diterapkan.

Pembekuan Dangkal vs Mendalam adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

freeze Bersifat Dangkal

Object.freeze hanya mengunci tingkat teratas sebuah objek. Objek atau larik bertingkat apa pun yang dirujuknya tetap sepenuhnya dapat diubah.

Hal ini mengejutkan banyak pengembang dan menyebabkan bug yang sulit terlihat.

Membuktikan Batas Dangkal

Bekukan objek yang memiliki objek bertingkat. Tingkat teratasnya terkunci, tetapi objek bertingkat tersebut masih dapat berubah.

const user = Object.freeze({
  name: 'Ada',
  address: { city: 'London' }
});

user.name = 'Grace';
user.address.city = 'Paris';

console.log(user.name);
console.log(user.address.city);

Larik Bertingkat Juga

Larik di dalam objek frozen juga tidak terlindungi. Anda dapat menambahkan, menghapus elemen terakhir, dan menetapkan ulang elemennya.

const state = Object.freeze({ tags: ['a', 'b'] });

state.tags.push('c');
state.tags[0] = 'X';

console.log(state.tags);

isFrozen Memastikannya

Objek bertingkat melaporkan isFrozen sebagai false, yang memastikan bahwa freeze tidak menjangkau bagian dalamnya.

const obj = Object.freeze({ inner: { v: 1 } });

console.log(Object.isFrozen(obj));
console.log(Object.isFrozen(obj.inner));

Menulis deepFreeze

Untuk mengunci semuanya, lakukan rekursi: bekukan objek, lalu bekukan setiap properti objek bertingkat. Inilah yang disebut pembekuan mendalam.

function deepFreeze(obj) {
  for (const key of Object.keys(obj)) {
    const value = obj[key];
    if (value && typeof value === 'object') {
      deepFreeze(value);
    }
  }
  return Object.freeze(obj);
}

const data = deepFreeze({ a: { b: { c: 1 } } });
data.a.b.c = 999;
console.log(data.a.b.c);

deepFreeze pada Larik

Larik juga merupakan objek, jadi rekursi yang sama akan membekukannya. Penambahan dan penulisan elemen kemudian diblokir pada setiap kedalaman.

function deepFreeze(obj) {
  for (const key of Object.keys(obj)) {
    const value = obj[key];
    if (value && typeof value === 'object') deepFreeze(value);
  }
  return Object.freeze(obj);
}

const state = deepFreeze({ list: [1, 2, 3] });
state.list.push(4);
state.list[0] = 99;
console.log(state.list);

Memverifikasi Pembekuan Mendalam

Setelah pembekuan mendalam, setiap objek bertingkat melaporkan isFrozen sebagai true.

function deepFreeze(obj) {
  for (const key of Object.keys(obj)) {
    const v = obj[key];
    if (v && typeof v === 'object') deepFreeze(v);
  }
  return Object.freeze(obj);
}

const o = deepFreeze({ a: { b: 1 } });
console.log(Object.isFrozen(o));
console.log(Object.isFrozen(o.a));

Melindungi dari Siklus

Jika sebuah objek merujuk ke dirinya sendiri, rekursi sederhana akan berjalan tanpa akhir. Lewati objek yang sudah frozen agar tetap aman.

function deepFreeze(obj) {
  if (Object.isFrozen(obj)) return obj;
  for (const key of Object.keys(obj)) {
    const v = obj[key];
    if (v && typeof v === 'object') deepFreeze(v);
  }
  return Object.freeze(obj);
}

const a = { name: 'a' };
a.self = a;
deepFreeze(a);
console.log(Object.isFrozen(a.self));

Biaya Pembekuan Mendalam

Pembekuan mendalam mengunjungi setiap nilai bertingkat, yang memerlukan waktu dan memori untuk struktur besar. Bekukan hanya hal yang benar-benar perlu dilindungi, seperti config bersama atau konstanta.

function deepFreeze(obj) {
  if (Object.isFrozen(obj)) return obj;
  Object.keys(obj).forEach(k => {
    const v = obj[k];
    if (v && typeof v === 'object') deepFreeze(v);
  });
  return Object.freeze(obj);
}

const small = deepFreeze({ a: 1, b: { c: 2 } });
console.log('frozen deeply:', Object.isFrozen(small.b));

Kapan Pembekuan Dangkal Sudah Cukup

Jika sebuah objek hanya menyimpan nilai primitif, Object.freeze dangkal sudah melindunginya sepenuhnya. Pembekuan mendalam hanya penting jika terdapat objek atau larik bertingkat.

const flat = Object.freeze({ a: 1, b: 'two', c: true });
flat.a = 100;
console.log(flat.a);
console.log(Object.isFrozen(flat));

Mengapa Ini Penting

Memahami pembekuan dangkal dan mendalam mencegah anggapan keliru bahwa objek frozen sepenuhnya tidak dapat diubah. Untuk data bertingkat, lakukan rekursi. Sebagai alternatif terhadap perubahan langsung, pelajaran berikutnya membahas pola pembaruan imutabel yang membuat copy, bukan freeze.

const config = Object.freeze({ db: { host: 'local' } });
config.db.host = 'changed';
console.log('shallow freeze leaked:', config.db.host);

Pemeriksaan Singkat

Setelah Object.freeze({ a: { b: 1 } }), dapatkah Anda mengubah b yang bertingkat?

Rangkuman: Pembekuan Dangkal dan Mendalam

Anda telah mempelajari batas kedalaman freeze:

Object.freeze bersifat dangkal; objek dan larik bertingkat tetap dapat diubah.
deepFreeze melakukan rekursi untuk mengunci setiap tingkat.
Lindungi diri dari siklus dengan melewati objek yang sudah frozen.
Pembekuan mendalam memiliki biaya, jadi bekukan hanya hal yang perlu dilindungi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pembekuan Dangkal vs Mendalam” gratis?

Ya — teks lengkap “Pembekuan Dangkal vs 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 “Pembekuan Dangkal vs Mendalam”?

Pahami seberapa jauh pembekuan diterapkan. 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 2 dari 4.

Berapa lama pelajaran “Pembekuan Dangkal vs 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