Immutable dalam React ?
Di dalam React, Immutable berarti Value atau State yang tidak bisa diubah. Di Javascript ada banyak sekali jenis Immutable, Salah satu contohnya yakni pada String.
Jika kamu mendefinisikan seperti berikut :
var str = ‘abc’;
Kamu tidak dapat mengubah karakter string secara langsung.
Dalam JavaScript, string bukanlah array sehingga kamu harus melakukan sesuatu seperti ini:
str[2] = ‘d’;
atau
str = ‘abd’;
Menetapkan string yang berbeda untuk str.
Kamu bahkan dapat mendefinisikan str sebagai konstanta:
const str = ‘abc’
Jadi, menetapkan string baru menghasilkan error (meskipun ini tidak berhubungan dengan immutability).
Jika kamu ingin mengubah nilai string, kamu harus menggunakan metode manipulasi seperti Replace, toUpperCase atau trim.
Semua metode ini mengembalikan string baru, mereka tidak mengubah yang asli.
Value Type
Nilai string tidak dapat diubah. Sedangkan Objek string bisa dirubah.
Jika suatu objek tidak dapat diubah, kamu tidak dapat mengubah statusnya (nilai propertinya). Tetapi ini juga berarti kamu tidak dapat menambahkan properti baru ke objek.
Perhatikan contoh berikut :
const str = “abc”;
str.myNewProperty = “some value”;
alert(str.myNewProperty);
Kalo kamu jalankan perintah diatas, maka akan muncul tampilan error “undefined”. Ini terjadi karena kita belum menambahkan property baru.
const str = new String(“abc”);
str.myNewProperty = “some value”;
alert(str.myNewProperty);
str.myNewProperty = “a new value”;
alert(str.myNewProperty);
String bersifat Immutable
Contoh terakhir membuat objek dengan String () yang membungkus nilai String. Tetapi kamu dapat menambahkan properti baru ke pembungkus ini karena itu merupakan objek
Ini membawa kita pada konsep yang penting untuk dipahami. Perbedaan antara Reference dan Value Equality
Reference Equality Vs Value Equality
Dengan Reference Equality, kamu membandingkan referensi objek dengan operator “===” dan “!==” atau “==” dan “!=” . Jika referensi menunjuk ke objek yang sama, mereka dianggap sama:.
var str1 = ‘abc’;
var str2 = str1;
str1 === str2 // true
Dalam contoh di atas, kedua referensi (str1 dan str2) sama karena mereka menunjuk ke objek yang sama (‘abc’).
Tetapi ketika berbicara tentang objek, ini tidak berlaku lagi:
var str1 = new String(‘abc’);
var str2 = new String(‘abc’);
str1 === str2 // false
var arr1 = [];
var arr2 = [];
arr1 === arr2 // false
Dalam setiap kasus diatas, dua objek berbeda dibuat dan oleh karena itu referensi mereka tidaklah sama :
Jika kamu ingin memeriksa apakah dua objek berisi nilai yang sama, kamu harus menggunakan Value Equality atau kesetaraan nilai, dimana kamu bisa membandingkan nilai properti objek.
Dalam JavaScript, tidak ada cara langsung untuk melakukan value equality pada objek dan array.
Jika kamu menggunakan objek String, kamu dapat menggunakan metode valueOf atau trim yang mengembalikan nilai String :
var str1 = new String(‘abc’);
var str2 = new String(‘abc’);
str1.valueOf() === str2.valueOf() // true
str1.trim() === str2.trim() // true
Lebih mudah untuk menguji apakah dua objek sama jika mereka tidak berubah dan React mengambil keuntungan dari konsep ini untuk membuat beberapa optimasi dalam perfomanya.
Implementasi Immutable
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 mengganti valuenya.
var str=”hello world”
var newStr=str
newStr =”hello new world”
console.log(newStr) // hello new world
console.log(str) // hello world
Pada
contoh di atas kita membuat cloning dari variable string dan mengubah
nilainya. Metode yang sama juga berlaku jika kamu menggunakan tipe
data objek serta Array
var people = {‘name’ : ‘adi’, ‘city’ : ‘jakarta’ }
var newPeople = people
newPeople.name= ‘budi’
console.log(newPeople) // {‘name’ : ‘budi’, ‘city’ : ‘bogor’ }
console.log(people) // {‘name’ : ‘budi’, ‘city” : ‘bogor’ }
Jika kamu lihat code diatas, source objeknya tidak berubah karena pada Javascript ia hanya mengduplikasi referencenya saja tidak untuk valuenya.
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 (…)
Sumber : blog.logrocket.com
