JavaScript Academy · Pelajaran

Menghindari Mutasi

Gunakan salinan alih-alih memutasi data.

Menghindari Mutasi 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.

Mengapa Menghindari Mutasi

Memutasi data bersama menyebabkan bug yang sulit dilacak: perubahan di satu tempat dapat mengejutkan kode di tempat lain. Gaya fungsional lebih mengutamakan pembuatan nilai baru daripada pengubahan nilai yang sudah ada (immutabilitas).

const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 2, 3, 4]

Operator Penyebaran untuk Menyalin Larik

Operator penyebaran ... membuat salinan dangkal dari sebuah larik, sehingga Anda dapat menambahkan elemen tanpa menyentuh sumbernya.

const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]

Operator Penyebaran untuk Menyalin Objek

Operator penyebaran juga berlaku untuk objek, dengan menghasilkan objek baru yang memiliki properti yang sama serta penggantian apa pun yang diberikan.

const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user);  // unchanged

Metode Larik tanpa Mutasi

Utamakan metode yang mengembalikan larik baru: map, filter, concat, slice. Hindari metode yang memutasi, seperti push, splice, dan sort langsung di tempat.

const a = [3, 1, 2];
const sorted = [...a].sort((x, y) => x - y);
console.log(sorted); // [1, 2, 3]
console.log(a);      // [3, 1, 2]

Menambahkan tanpa Mutasi

Alih-alih menggunakan push, buat larik baru dengan operator penyebaran atau concat.

const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]

Menghapus tanpa Mutasi

Gunakan filter untuk menghasilkan larik baru tanpa suatu elemen, bukan splice.

const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]

Memperbarui Item tanpa Mutasi

Untuk mengubah satu elemen, gunakan map pada larik dan kembalikan nilai baru untuk item yang cocok.

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

Dangkal vs Mendalam

Operator penyebaran menyalin satu tingkat ke dalam. Objek bersarang tetap menjadi referensi bersama. Untuk memperbarui data bersarang tanpa mutasi, gunakan operator penyebaran pada setiap tingkat yang Anda ubah.

const state = { user: { name: "Ada", age: 36 } };
const next = {
  ...state,
  user: { ...state.user, age: 37 }
};
console.log(state.user.age); // 36
console.log(next.user.age);  // 37

Membekukan demi Keamanan

Object.freeze mencegah perubahan objek secara tidak sengaja saat program berjalan, sehingga immutabilitas menjadi eksplisit (satu tingkat ke dalam).

const config = Object.freeze({ env: "prod" });
config.env = "dev";       // ignored in non-strict mode
console.log(config.env);  // "prod"

Konstanta Bukan Immutabilitas

Kekeliruan yang umum terjadi: const hanya mencegah penetapan ulang variabel, bukan perubahan pada nilai yang disimpannya. Larik yang dideklarasikan dengan const tetap dapat ditambahi elemen.

const arr = [1, 2];
arr.push(3);          // allowed - value mutated
console.log(arr);     // [1, 2, 3]
// arr = [] would throw

Ringkasan Manfaat

Pembaruan tanpa mutasi membuat pelacakan perubahan menjadi sangat mudah (bandingkan referensi), memungkinkan pembatalan/pengulangan, mencegah efek tak terduga dari kejauhan, dan berpadu secara alami dengan fungsi murni.

const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect change

Pemeriksaan Singkat

Menghindari mutasi.

Ringkasan

Immutabilitas berarti membuat nilai baru, bukan memutasi nilai yang ada. Gunakan operator penyebaran untuk menyalin larik dan objek, utamakan metode tanpa mutasi (map, filter, concat), dan gunakan operator penyebaran pada setiap tingkat untuk pembaruan bersarang. Ingat, const mencegah penetapan ulang, bukan mutasi; Object.freeze menambahkan perlindungan saat program berjalan. Pembaruan tanpa mutasi memudahkan pendeteksian perubahan dan penulisan kode murni.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menghindari Mutasi” gratis?

Ya — teks lengkap “Menghindari Mutasi” 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 “Menghindari Mutasi”?

Gunakan salinan alih-alih memutasi data. 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 “Menghindari Mutasi” 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