Pengertian Konsep Immutable dalam React JS

Apa itu 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.

Baca Juga :

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.

Baca Juga :

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

Baca Juga : Pengertian Height dan Width Pada React Native & Cara Menggunakannya!

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 (…)