JavaScript Academy · Pelajaran

Pola Pembaruan Tak Dapat Diubah

Perbarui data dengan membuat salinan baru.

Pola Pembaruan Tak Dapat Diubah adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Memperbarui Tanpa Mengubah

Pembaruan imutabel membuat copy baru dengan perubahan yang diterapkan, sementara original tetap tidak tersentuh. Inilah inti pengelolaan state yang dapat diprediksi dalam JavaScript modern.

Operator penyebaran ... adalah alat utamanya.

Menyalin Objek dengan Operator Penyebaran

Sebarkan isi objek ke objek baru, lalu timpa sebuah properti. original mempertahankan nilai lamanya.

const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };

console.log(user.age);
console.log(older.age);

Keduanya adalah Objek yang Berbeda

copy tersebut adalah objek yang benar-benar baru, bukan referensi yang sama. Perbandingan identitas memastikannya.

const original = { x: 1 };
const copy = { ...original };

console.log(original === copy);
console.log(original.x === copy.x);

Menambahkan Properti secara Imutabel

Untuk menambahkan bidang, sebarkan objek lama dan sertakan key baru. original tidak mendapatkan apa pun.

const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };

console.log(point);
console.log(point3d);

Menghapus Properti secara Imutabel

Gunakan destrukturisasi untuk mengambil key yang tidak diinginkan dan menangkap sisanya. Objek sisanya tidak menyertakan key tersebut.

const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;

console.log(safe);
console.log(user.secret);

Menyalin Larik dengan Operator Penyebaran

Sebarkan larik untuk menyalinnya. Method seperti map dan filter juga mengembalikan larik baru dan tidak pernah mengubah sumbernya.

const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);

console.log(nums);
console.log(doubled);

Menambahkan Elemen ke Larik secara Imutabel

Alih-alih menggunakan push (yang mengubah), buat larik baru dengan operator penyebaran. Panjang original tetap sama.

const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];

console.log(list);
console.log(added);
console.log(prepended);

Menghapus Elemen dari Larik secara Imutabel

Gunakan filter untuk menghasilkan larik baru tanpa item yang tidak diinginkan, sementara original tetap utuh.

const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);

console.log(nums);
console.log(withoutThree);

Memperbarui Objek Bertingkat

Pembaruan bertingkat mengharuskan Anda menyebarkan isi pada setiap tingkat yang diubah. Hanya cabang yang disentuh yang dibuat ulang; bagian lainnya dibagikan berdasarkan referensi.

const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
  ...state,
  user: { ...state.user, age: 37 }
};

console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);

Memperbarui Item dalam Larik

Gunakan map untuk mengembalikan copy yang telah diubah bagi item yang cocok dan original bagi item lainnya. Tidak ada elemen yang diubah.

const todos = [
  { id: 1, done: false },
  { id: 2, done: false }
];
const updated = todos.map(t =>
  t.id === 2 ? { ...t, done: true } : t
);

console.log(todos[1].done);
console.log(updated[1].done);

Mengapa Pembaruan Imutabel Penting

Tidak pernah mengubah state bersama membuat deteksi perubahan menjadi murah (bandingkan referensi), memungkinkan pembatalan dan pengulangan, serta mencegah bug akibat perubahan yang berdampak jauh. Polanya: buat copy, lalu ubah copy tersebut. Untuk klon mendalam, pelajaran berikutnya membahas structuredClone.

function setName(state, name) {
  return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);

Pemeriksaan Singkat

Apa yang dihasilkan oleh { ...user, age: 37 } jika user sudah memiliki age?

Rangkuman: Pola Pembaruan Imutabel

Anda telah mempelajari cara memperbarui tanpa mengubah:

Gunakan penyebaran { ...obj, key: value } untuk menyalin dan menimpa.
Gunakan rest hasil destrukturisasi untuk menghapus properti secara imutabel.
Gunakan map, filter, dan penyebaran larik, bukan push/splice.
Gunakan penyebaran pada setiap tingkat untuk pembaruan bertingkat; bagikan bagian lainnya berdasarkan referensi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pola Pembaruan Tak Dapat Diubah” gratis?

Ya — teks lengkap “Pola Pembaruan Tak Dapat Diubah” 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 “Pola Pembaruan Tak Dapat Diubah”?

Perbarui data dengan membuat salinan baru. 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 3 dari 4.

Berapa lama pelajaran “Pola Pembaruan Tak Dapat Diubah” 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