0Pricing
TypeScript Academy · Pelajaran

Array Readonly dan Data Imutabel

Gunakan ReadonlyArray untuk mencegah mutasi yang tidak disengaja.

Array Readonly dan Data Imutabel adalah pelajaran TypeScript 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 TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Selamat Datang

Array yang dapat diubah bisa secara tidak sengaja dimodifikasi di mana saja dalam kode Anda. ReadonlyArray dan pengubah readonly TypeScript membantu Anda menerapkan imutabilitas.

Pengubah readonly pada Array

Tambahkan pengubah `readonly` sebelum tipe array untuk mencegah mutasi. Array tersebut dapat dibaca, tetapi tidak dapat diubah.
const ids: readonly number[] = [1, 2, 3];
// ids.push(4);   // Error
// ids[0] = 99;   // Error
console.log(ids[0]); // OK — reading is fine

Bentuk Generik ReadonlyArray<T>

`ReadonlyArray` adalah bentuk generik yang setara dengan `readonly T[]`. Keduanya mencegah push, pop, splice, dan penetapan indeks.
const names: ReadonlyArray<string> = ['Alice', 'Bob'];
// names.push('Charlie'); // Error

Mengembalikan Array Readonly dari Fungsi

Kembalikan array readonly dari fungsi untuk memberi tahu pemanggil bahwa hasilnya tidak boleh dimutasi.
function getConfig(): readonly string[] {
  return ['host', 'port', 'db'];
}

Parameter Fungsi yang Imutabel

Tandai parameter array sebagai readonly untuk mencegah fungsi memutasi array milik pemanggil.
function sum(nums: readonly number[]): number {
  return nums.reduce((a, b) => a + b, 0);
  // nums.push(99); // Error inside function
}

as const untuk Array Literal

Pernyataan `as const` membuat array menjadi readonly dan menyimpulkan tipe tupel dengan tipe elemen literal, bukan tipe yang diperlebar.
const colors = ['red', 'green', 'blue'] as const;
// type: readonly ['red', 'green', 'blue']
// colors.push('yellow'); // Error

Readonly Tidak Membekukan secara Mendalam

readonly hanya mencegah referensi array dimutasi. Jika elemennya berupa objek, properti objek tersebut masih dapat diubah.
const users: readonly { name: string }[] = [{ name: 'Alice' }];
// users.push({}); // Error
users[0].name = 'Bob'; // Allowed — object itself is mutable

Imutabilitas Mendalam dengan Readonly<T>

Untuk imutabilitas objek secara mendalam, gabungkan ReadonlyArray dengan Readonly pada elemennya. Atau gunakan pustaka seperti immer.
type ImmutableUser = Readonly<{ name: string; scores: readonly number[] }>;
const u: ImmutableUser = { name: 'Alice', scores: [90, 85] };
// u.name = 'Bob';       // Error
// u.scores.push(100);  // Error

Penetapan Mutable vs Readonly

Array readonly TIDAK dapat ditetapkan ke tipe array mutable. Hal ini melindungi Anda dari tidak sengaja meneruskan array imutabel ketika mutasi diharapkan.
const ro: readonly number[] = [1, 2];
const mutable: number[] = ro; // Error!

Kapan Menggunakan Array Readonly

Gunakan array readonly untuk objek konfigurasi, konstanta, parameter fungsi yang Anda janjikan tidak akan dimutasi, dan nilai yang dikembalikan oleh fungsi murni.

Spread Membuat Array Mutable Baru

Melakukan spread pada array readonly ke dalam literal array baru akan membuat salinan mutable. Ini merupakan pola yang bersih untuk melakukan perubahan tanpa mutasi.
const base: readonly number[] = [1, 2, 3];
const extended: number[] = [...base, 4]; // new mutable array

Pemeriksaan Singkat

Operasi mana yang TIDAK diizinkan pada `readonly number[]` dalam TypeScript?

Rangkuman

Gunakan `readonly T[]` atau `ReadonlyArray` untuk mencegah mutasi array. Gunakan `as const` untuk array konstanta literal. Spread membuat salinan mutable ketika Anda perlu memperluas array readonly.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Array Readonly dan Data Imutabel” gratis?

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

Apa yang akan aku pelajari di “Array Readonly dan Data Imutabel”?

Gunakan ReadonlyArray untuk mencegah mutasi yang tidak disengaja. Kamu berlatih TypeScript 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 TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript 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 “Array Readonly dan Data Imutabel” 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 TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript 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

  1. Array Bertipe: T[] dan Array
  2. Array Readonly dan Data Imutabel
  3. Tuple: Array Bertipe dengan Panjang Tetap
  4. Enum: Konstanta Numerik dan String
← Kembali ke TypeScript Academy