Mutable dan Immutable dalam JavaScript

Apa itu mutable dan Immutable?

Secara harfiah, mutable artinya yang mungkin berubah, sedangkan immutable artinya tetap.

Dalam JavaScript, mutable adalah tipe data yang nilainya dapat diubah. Tipe data yang termasuk mutable adalah semua jenis tipe data yang termasuk reference type yang notabene merupakan objek (object literal, array, function, date, dan objek-objek lainnya).

Sedangkan immutable adalah tipe data yang nilainya tetap. Tipe data immutable adalah semua tipe data yang termasuk primitive type (string, number, boolean, null, undefined, dan symbol).

Perhatikan beberapa contoh berikut.

String

Pada contoh di atas, kita membuat variabel nama1 dan mengisinya dengan ‘hinata’. Setelah itu, kita memanggil nama1 dan menambahkan ‘ shoyo’ lalu menyimpannya ke dalam variabel nama2.

Dari hasil konsol, kita dapat melihat bahwa nilai dari nama1 tidak berubah walaupun kita memanggil dan memodifikasinya dalam variabel nama2. Sifat inilah yang menyebabkan tipe data string disebut immutable alias tetap.

Number

Sama seperti contoh sebelumnya, nilai dari variabel umur1 tidak berubah walaupun dilakukan operasi pengurangan terhadap umur1 saat dipanggil lalu disimpan ke dalam variabel umur2. Ini menunjukkan bahwa number termasuk tipe data yang immutable.

Object literal

Pada contoh di atas, kita membuat objek pemain1 dengan properti nama dan umur. Setelah itu, kita memanggil pemain1 dan menyimpannya ke dalam objek pemain2 dengan tujuan memberikan pemain2 properti dan nilai yang sama persis dengan pemain1. Selanjutnya, kita mengubah nama pemain2 menjadi ‘shoyo’.

Seperti yang terlihat dari hasil konsol, nama pemain1 ikut berubah menjadi ‘shoyo’ padahal yang kita ubah hanya nama pemain2. Hal inilah yang menyababkan objek literal disebut mutable alias dapat diubah.

Array

Pada contoh di atas, kita membuat variabel kombinasi1 dengan menggunakan array dan mengisinya dengan tiga buah elemen. Setelah itu, kita memanggil kombinasi1 dan menyimpannya ke dalam kombinasi2.

Sekarang variabel kombinasi2 memiliki nilai yang sama persis dengan kombinasi1. Terakhir, kita menambahkan ‘blocker’ ke dalam kombinasi2 sehingga kini di dalam variabel kombinasi2 terdapat empat buah elemen.

Saat kombinasi1 dan kombinasi2 ditampikan ke konsol, keduanya sama-sama memiliki empat buah elemen. Padahal, elemen keempat hanya kita tambahkan ke dalam kombinasi2 saja. Karena sifat ini, array termasuk ke dalam tipe data mutable atau dapat diubah.

Masalahnya…

Kita seringkali perlu untuk membuat variabel baru berdasarkan variabel yang sudah ada (seperti contoh-contoh di atas). Namun, jika tipe data yang kita gunakan termasuk mutable, tentu akan menjadi masalah karena variabel yang dijadikan acuan akan berubah-ubah nilainya sehingga sulit diprediksi.

Kenapa sifat ini bisa muncul?

Seperti telah disebutkan sebelumnya, tipe data yang memiliki sifat mutable adalah tipe data reference type, sedangkan yang memiliki sifat immutable adalah primitive type. Ini berkaitan dengan bagaimana data disimpan dalam memori.

Saat kita menyimpan sebuah nilai primitive seperti string, number, atau boolean. Nilai tersebut akan tersimpan dalam sesuatu yang disebut Stack, sedangkan saat kita menyimpan sebuah nilai reference seperti array atau object literal, nilai tersebut akan tersimpan dalam sesuatu yang disebut Heap. Setiap nilai yang tersimpan dalam Stack akan memiliki nama variabelnya sebagai pengakses, sedangkan saat kita membuat reference type nama variabel akan dikaitkan pada pointer. Pointer inilai yang akan mengarah ke nilai yang disimpan di dalam Heap.

Perhatikan contoh berikut.

Ilustrasi code di atas dalam memori adalah seperti berikut.

Dapat dilihat bahwa primitive type akan memiliki nilainya masing-masing, sedangkan reference type akan memiliki pointer yang mengarah pada niliai yang sama.

Jadi saat kita mengubah nilai dari variabelnya...

Inilah yang akan terjadi dalam memori...

Dapat dilihat bahwa perubahan nilai yang kita lakukan pada umurDimas tidak perpengaruh terhadap umurKirana, sedangkan perubahan nilai pada kucing akan mempengaruhi kucingDua karena nilai yang jadi acuan mereka sama.

Lalu bagaimana cara mengakalinya?

Terdapat beberapa cara untuk melakukan kloning terhadap object dan array.

Spread operator

Spread operator dapat digunakan untuk melakukan kloning terhadap object maupun array.

Perhatikan contoh berikut.

Perlu dicatat bahwa kloning yang dilakukan metupakan shallow copy. Artinya, kloning hanya bekerja pada nilai di layer pertama, layer yang lebih dalam dari itu akan tetap bersifat reference.

Perhatikan contoh berikut.

Dapat dilihat bahwa layer pertama (nama dan umur) berhasil dikloning nilainya sehingga bersifat immutable, sedangkan layer yang lebih dalam (ikan) hanya dikloning secara reference, dalam artian dikloning pointernya saja, sehingga masih bersifat mutable.

Array.from()

Ini merupakan cara lain yang bisa digunakan untuk melakukan kloning terhadap array. Cara ini juga menghasilkan shallow copy.

Object.assign()

Cara lain untuk melakukan kloning terhadap object adalah Object.assign() yang juga menghasilkan shallow copy.

Perhatikan object kosong {} pada argumen pertama, ini diperlukan agar object yang diklon tidak berubah.

JSON

Ini merupakan cara sederhana untuk membuat deep copy dari object maupun array.

Maksud dari deep copy adalah, proses kloning tidak hanya dilakukan pada layer pertama, melainkan seluruh layer. Dengan deep copy, array maupun object hasil kloning menjadi sepenuhnya immutable.