Memahami Mutable dan Immutable dalam Bahasa JavaScript: Panduan Lengkap untuk Pemula

Apa itu Mutable dan Immutable dalam JavaScript?

Mutable dan immutable merujuk pada sifat variabel dalam JavaScript. Mutable berarti bahwa nilai dari variabel dapat diubah setelah dideklarasikan, sedangkan immutable berarti bahwa nilai dari variabel tidak dapat diubah setelah dideklarasikan.

Dalam JavaScript, tipe data yang bersifat mutable dapat diubah secara langsung tanpa membuat objek baru, sedangkan tipe data yang bersifat immutable tidak dapat diubah setelah dideklarasikan. Ketika kita membuat perubahan pada variabel yang bersifat immutable, sebenarnya kita membuat objek baru yang mengandung perubahan tersebut.

Contoh Mutable dan Immutable pada JavaScript

Berikut adalah beberapa contoh mutable dan immutable pada JavaScript:

1. Mutable: Object

let mutableObject = { nama: "John", umur: 25 };

mutableObject.umur = 26; // Mengubah nilai properti umur

console.log(mutableObject); // { nama: "John", umur: 26 }

{codeBox}

Pada contoh di atas, kita memiliki objek mutableObject dengan dua properti, yaitu nama dan umur. Kita dapat mengubah nilai properti umur secara langsung tanpa membuat objek baru. Ini karena objek dalam JavaScript bersifat mutable.

2. Mutable: Array

let mutableArray = [1, 2, 3, 4];
mutableArray.push(5); // Menambahkan elemen baru ke array
console.log(mutableArray); // [1, 2, 3, 4, 5]
{codeBox}

Pada contoh di atas, kita memiliki array mutableArray dengan empat elemen. Kita dapat menambahkan elemen baru ke array tersebut menggunakan metode push() tanpa membuat array baru. Ini karena array dalam JavaScript bersifat mutable.

3. Immutable: String

let immutableString = "hello";

let newImmutableString = immutableString + " world"; // Membuat string baru dengan konkatenasi

console.log(immutableString); // "hello"

console.log(newImmutableString); // "hello world"

{codeBox}

Pada contoh di atas, kita memiliki string immutableString dengan nilai "hello". Ketika kita melakukan konkatenasi pada string tersebut, sebenarnya kita membuat string baru yang berisi hasil konkatenasi. Variabel immutableString tetap memiliki nilai awalnya dan tidak berubah. Ini karena tipe data string dalam JavaScript bersifat immutable.

4. Immutable: Number

let immutableNumber = 10;
let newImmutableNumber = immutableNumber + 5; // Membuat angka baru dengan penambahan
console.log(immutableNumber); // 10
console.log(newImmutableNumber); // 15
{codeBox}

Pada contoh di atas, kita memiliki angka immutableNumber dengan nilai 10. Ketika kita melakukan penambahan pada angka tersebut.

kita sebenarnya membuat angka baru yang merupakan hasil penambahan. Variabel immutableNumber tetap memiliki nilai awalnya dan tidak berubah. Ini karena tipe data number dalam JavaScript bersifat immutable.

5. Immutable: Boolean

let immutableBoolean = true;
let newImmutableBoolean = !immutableBoolean; // Membuat boolean baru dengan negasi
console.log(immutableBoolean); // true
console.log(newImmutableBoolean); // false
{codeBox}

Pada contoh di atas, kita memiliki boolean immutableBoolean dengan nilai true. Ketika kita melakukan negasi pada boolean tersebut, kita sebenarnya membuat boolean baru yang merupakan hasil negasi. Variabel immutableBoolean tetap memiliki nilai awalnya dan tidak berubah. Ini karena tipe data boolean dalam JavaScript bersifat immutable.

6. Immutable: Null dan Undefined

let immutableNull = null;
let immutableUndefined = undefined;
{codeBox}

Pada contoh di atas, kita memiliki dua tipe data khusus, yaitu null dan undefined, yang bersifat immutable. Nilai dari variabel immutableNull dan immutableUndefined tidak dapat diubah setelah dideklarasikan. Kita tidak dapat mengubah null menjadi nilai lain atau mengubah undefined menjadi nilai lain.

Mengapa Mutable dan Immutable Penting?

Memahami perbedaan antara mutable dan immutable pada JavaScript sangat penting dalam menghindari perubahan yang tidak diinginkan pada data. Ketika kita menggunakan variabel yang bersifat mutable, seperti objek atau array, perubahan yang kita lakukan bisa mempengaruhi variabel asalnya atau variabel lain yang mengacu pada objek atau array tersebut. Hal ini bisa mengakibatkan bug atau kesalahan dalam aplikasi.

Dengan menggunakan tipe data yang bersifat immutable, seperti string, number, boolean, null, dan undefined, kita dapat memastikan bahwa data kita tidak akan berubah setelah dideklarasikan. Ini dapat membantu kita dalam membuat kode yang lebih aman dan terhindar dari perubahan yang tidak diinginkan.

Namun, perlu diingat bahwa meskipun tipe data tersebut bersifat immutable, kita masih dapat membuat variabel baru dengan nilai yang diubah berdasarkan nilai variabel asalnya. Sehingga, perlu berhati-hati dalam mengelola variabel yang bersifat immutable untuk menghindari pemborosan memori atau penggunaan sumber daya yang tidak efisien.

Kesimpulan

Mutable dan immutable adalah konsep penting dalam JavaScript yang berkaitan dengan cara variabel diubah atau diperlakukan. Objek dan array adalah contoh tipe data yang bersifat mutable, di mana nilai dapat diubah setelah dideklarasikan. Sedangkan, string, number, boolean, null, dan undefined adalah contoh tipe data yang bersifat immutable, di mana nilai tidak dapat diubah setelah dideklarasikan.

Memahami perbedaan antara mutable dan immutable sangat penting dalam menghindari perubahan yang tidak diinginkan pada data dan dalam membuat kode yang lebih aman. Dengan menggunakan tipe data yang bersifat immutable dengan bijaksana, kita dapat mengelola data dengan lebih efisien dalam aplikasi JavaScript kita.