Mutable dan Immutable dalam TypeScript

Artikel ini menjelaskan konsep mutable dan immutable dalam TypeScript.

YouTube Video

Mutable dan Immutable dalam TypeScript

Apa itu Mutable?

Mutable berarti nilai tersebut dapat diubah. Tipe referensi seperti objek dan array adalah contoh khas struktur data mutable.

Contoh Objek Mutable

1type Person = { name: string; age: number };
2
3// Mutable Example: Object
4let person: Person = { name: "Alice", age: 25 };
5person.age = 26;
6console.log(person); // { name: "Alice", age: 26 }

Dalam kode ini, properti age dari objek person diubah dari 25 menjadi 26. Karena objek dikirim melalui referensi, isi di alamat memori yang disimpan dalam variabel person akan diubah.

Contoh Array Mutable

1// Mutable Example: Array
2let numbers: number[] = [1, 2, 3];
3numbers.push(4);
4console.log(numbers); // [1, 2, 3, 4]

Dalam kode ini, metode push digunakan untuk menambahkan elemen baru 4 ke array asli. Ini mengubah array asli, menjadikannya operasi mutable.

Contoh dalam Fungsi

1// Mutable Example: Function
2function append(arr: number[], value: number): void {
3    arr.push(value); // Modify the original array
4    console.log(arr);
5}
6
7let nums: number[] = [1, 2, 3];
8append(nums, 4);
9console.log(nums); // [1, 2, 3, 4]

Saat menjalankan operasi mutable di dalam fungsi, array asli juga akan diubah.

Apa itu Immutable?

Immutable berarti nilai tersebut tidak dapat diubah. Tipe primitif secara mendasar bersifat immutable.

Contoh Tipe Primitif Immutable

1// Immutable Example: String
2let str: string = "hello";
3str[0] = "H"; // Error: Index assignment is not allowed
4console.log(str); // "hello"

Mencoba mengubah karakter pertama dari string str menjadi H akan gagal karena string bersifat immutable.

Contoh dalam Fungsi

1// Immutable Example: Function
2function increment(num: number): number {
3    num++; // This modifies only the local copy of num
4    return num;
5}
6
7let number: number = 10;
8console.log(increment(number)); // 11
9console.log(number); // 10 (original number remains unchanged)

Karena angka bersifat immutable, operasi di dalam fungsi tidak akan memengaruhi variabel aslinya.

Operasi Immutable pada Array

Array bersifat mutable, tetapi dengan membuat array baru alih-alih memodifikasi yang asli, operasi immutable dapat dilakukan.

1// Create an array of numbers
2let numbers: number[] = [1, 2, 3];
3
4// Immutable Example: Creating a new array
5let newNumbers: number[] = [...numbers, 4];
6
7console.log(numbers); // [1, 2, 3] (original array is unchanged)
8console.log(newNumbers); // [1, 2, 3, 4] (new array with an added element)

Di sini, sintaks penyebaran (...) digunakan untuk membuat array baru newNumbers. Karena array numbers asli tetap tidak berubah, ini adalah operasi yang tidak dapat diubah (immutable).

Manfaat Menggunakan Struktur Data Tidak Dapat Diubah (Immutable)

Peningkatan Prediktabilitas

Data yang tidak dapat diubah (immutable) tidak berubah, sehingga kemungkinan modifikasi tak terduga berkurang dan mengurangi kemungkinan bug.

Kompatibilitas dengan Library Berbasis Immutability

Library seperti React dan Redux sering dirancang berdasarkan data yang tidak dapat diubah (immutable), sehingga manajemen state menjadi lebih mudah jika digunakan secara tepat.

Membuat Objek Tidak Dapat Diubah dengan Object.freeze

Object.freeze dapat digunakan untuk mencegah modifikasi pada sebuah objek.

1// Create a frozen object (properties cannot be modified)
2const person = Object.freeze({ name: "Alice", age: 25 });
3
4// Attempt to modify a property (ignored in non-strict mode, error in strict mode)
5person.age = 26;
6
7console.log(person); // { name: "Alice", age: 25 }

Namun, Object.freeze hanya melakukan shallow freeze, yang berarti properti objek bersarang tetap dapat diubah (mutable).

1// Create a frozen object with a nested object
2const user: Readonly<{ profile: { name: string } }> = Object.freeze({
3    profile: { name: "Bob" }
4});
5
6// Attempt to modify a nested property (this works because Object.freeze() is shallow)
7user.profile.name = "Charlie"; // No TypeScript error, but still mutable
8
9console.log(user.profile.name); // "Charlie" (nested object is still mutable)

Untuk menciptakan objek yang sepenuhnya tidak dapat diubah (immutable), diperlukan deep freeze.

 1// Function to deeply freeze an object, making all nested objects immutable
 2function deepFreeze<T>(obj: T): Readonly<T> {
 3    Object.freeze(obj);
 4    Object.getOwnPropertyNames(obj).forEach(prop => {
 5        const value = (obj as any)[prop];
 6        if (typeof value === "object" && value !== null) {
 7            deepFreeze(value);
 8        }
 9    });
10    return obj;
11}
12
13// Create a deeply frozen object
14const user = deepFreeze({
15  profile: { name: "Bob" }
16});
17
18// Attempt to modify a nested property
19// (this will now throw an error in strict mode)
20user.profile.name = "Charlie";  // No TypeScript error, but modification is not allowed at runtime
21
22console.log(user.profile.name); // "Bob" (unchanged due to deep freeze)

Ringkasan

• Data mutable dapat diubah, termasuk objek dan array.
• Data immutable tidak dapat diubah, termasuk tipe primitif seperti string dan angka.
• Dengan menggunakan sintaks penyebaran atau metode seperti map, operasi data yang tidak dapat diubah (immutable) dapat dilakukan.
• Object.freeze dan deepFreeze dapat digunakan untuk mencegah modifikasi pada objek.
• Menggunakan data yang tidak dapat diubah (immutable) membantu menulis kode yang lebih dapat diprediksi dan lebih sedikit kesalahan.

Mengadopsi desain yang tidak dapat diubah (immutable) meningkatkan keamanan dan keterbacaan kode, jadi manfaatkan sepenuhnya!

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video