Immutable data dalam Javascript

Secara sederhana Immutable artinya tidak bisa berubah sedangkan Mutable artinya bisa berubah.

Dalam Javascript, type data string, number adalah immutable. Sedangkan array dan object adalah mutable. Mari kita mulai percobaan sederhana, yaitu cloning dari sebuah variabel dan ganti valuenya

Contoh Cloning Variable String :

Pada contoh di atas kita membuat cloning dari variable string dan mengubah nilainya. So far good. Apakah metode ini juga berlaku di type data object dan array ?

Contoh Cloning Object :

Buumm kenapa object sumbernya jadi ikutan berubah ?

Karena javascript hanya mencopy referencenya saja tapi tidak dengan valuenya. Kedua object masih menggunakan space memori yang sama utuk valuenya. Jadi bagaimana solusinya ?

Immutable pada Object

Object Assign( ) adalah perintah untuk mencopy sebuah object ke object baru lengkap dengan reference dan valuenya. Dengan perintah ini target object baru tidak lagi menggunakan value yg sama dengan object lama

Syntax :

Object.assign(target, ...sources)

Solusi Cloning Object dengan Object Assign :

Pada Javascript ES6 ini bisa lebih simple lagi dengan menggunakan operator ( tiga titik). Berikut cara penggunaanya untuk cloning object.

Penggunaan Object Assign (es5) atau spread operator (es6) tidak berpengaruh pada performance dan hasil.

Immutable pada Array

Seperti object array juga termasuk mutable. Baik mari kita buat eksperiment sederhana, yaitu cloning dan menambah element array.

Untuk menambah element kita akan menggunakan perintah push( )

push( ) adalah perintah untuk menambah element ke dalam sebuah array

Syntax :

arr.push([element1[, ...[, elementN]]])

Contoh Mutable Cloning Array :

Dari contoh di atas ternyata perintah push adalah mutable.

Solusinya kita dapat menggunakan perintah concat( ). Concat adalah perintah untuk menggabung beberapa array, perintah ini tidak mengubah array sumber.

Syntax

var arrayBaru = arrayLama.concat(value1[, value2[, ...[, valueN]]])

Contoh Immutable Cloning Array :

Hampir sama seperti array anda juga bisa menggunakan spread operator es6

Contoh Immutable Cloning Array denga ES6 :

Kesimpulan

Immutable artinya Object yang telah dibuat tidak dapat dirubah (read only), satu-satunya cara merubahnya adalah dengan membuat object baru dan membuat perubahan di object baru tersebut.

Untuk Immutable Object gunakan perintah Object.assign( ) atau spread operator (…)

Untuk Immutable Array gunakan perintah concat( ) atau spread operator (…)

Bagaimana dengan performance ?

Bukankah dengan membuat object baru untuk setiap perubahan malah membebani memory ?

Umumnya tidak, kecuali mungkin aplikasi anda menggunakan jumlah element yang sangat besar. Untuk kondisi ini anda dapat menggunakan library immutable seperti immutable.js

Sekian dan Terimakasih,