Mutable dan Immutable dalam JavaScript

Artikel ini menjelaskan konsep mutable dan immutable dalam JavaScript.

YouTube Video

Mutable dan Immutable dalam JavaScript

Apa itu Mutable?

Mutable berarti sebuah nilai dapat dimodifikasi. Objek dan array, yang merupakan tipe referensi, adalah contoh khas dari struktur data yang mutable.

Contoh Objek yang Mutable

1let person = { name: "Alice", age: 25 };
2person.age = 26;
3console.log(person); // { name: "Alice", age: 26 }

Dalam kode ini, properti age dari objek person diubah dari 25 menjadi 26. Karena objek dikirim sebagai referensi, konten pada alamat memori yang disimpan dalam variabel person dimodifikasi.

Contoh Array yang Mutable

1let numbers = [1, 2, 3];
2numbers.push(4);
3console.log(numbers); // [1, 2, 3, 4]

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

Contoh dalam Fungsi

 1// Function to append a value to an array
 2function append(arr, value) {
 3    arr.push(value); // Modify the original array
 4    console.log(arr);
 5}
 6
 7let numbers = [1, 2, 3];
 8append(numbers, 4);
 9
10console.log(numbers); // [1, 2, 3, 4] (original array is modified)

Ketika melakukan operasi mutable di dalam fungsi, array asli juga ikut dimodifikasi.

Apa itu Immutable?

Immutable berarti sebuah nilai tidak dapat dimodifikasi. Tipe primitif pada dasarnya bersifat immutable.

Contoh Tipe Primitif yang Immutable

1let str = "hello";
2str[0] = "H";
3console.log(str); // "hello"

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

Contoh dalam Fungsi

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

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

Operasi Immutable pada Array

Array bersifat mutable, tetapi membuat array baru daripada memodifikasi yang asli memungkinkan operasi bersifat immutable.

1// Create an array of numbers
2let numbers = [1, 2, 3];
3
4// Create a new array by spreading the original and adding a new element
5let newNumbers = [...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 tidak dimodifikasi, ini adalah operasi yang tidak dapat diubah.

Manfaat Menggunakan Struktur Data yang Tidak Dapat Diubah

Peningkatan Prediktabilitas

Karena data yang tidak dapat diubah tidak dapat diubah, modifikasi tak terduga lebih kecil kemungkinannya terjadi, sehingga mengurangi risiko bug.

Kompatibilitas dengan Pustaka Berbasis Ketidakberubahan

Pustaka seperti React dan Redux sering dirancang dengan mempertimbangkan data yang tidak dapat diubah, sehingga mempermudah pengelolaan state jika digunakan dengan benar.

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 melakukan pembekuan dangkal, yang berarti properti dari objek bersarang tetap dapat diubah.

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

Untuk membuat objek sepenuhnya tidak dapat diubah, diperlukan pembekuan mendalam.

 1// Function to deeply freeze an object, making all nested objects immutable
 2function deepFreeze(obj) {
 3  Object.keys(obj).forEach(key => {
 4    if (typeof obj[key] === "object" && obj[key] !== null) {
 5      deepFreeze(obj[key]); // Recursively freeze nested objects
 6    }
 7  });
 8  return Object.freeze(obj); // Freeze the top-level object
 9}
10
11// Create a deeply frozen object
12const user = deepFreeze({ profile: { name: "Bob" } });
13
14// Attempt to modify a nested property (ignored)
15user.profile.name = "Charlie";
16
17console.log(user.profile.name); // "Bob" (unchanged due to deep freeze)

Ringkasan

• Data dapat diubah dapat dimodifikasi, termasuk objek dan array.
• Data tidak dapat diubah tidak dapat dimodifikasi, termasuk tipe primitif seperti string dan angka.
• Menggunakan sintaks penyebaran atau map memungkinkan operasi data yang tidak dapat diubah..
• Object.freeze dan deepFreeze dapat digunakan untuk mencegah modifikasi pada objek.
• Menggunakan data yang tidak dapat diubah memungkinkan kode yang lebih dapat diprediksi dan kurang rentan kesalahan.

Desain yang tidak dapat diubah meningkatkan keamanan dan keterbacaan kode, jadi manfaatkan dengan baik!

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

YouTube Video