Cara yang lebih mudah untuk memahami gimana variable dan value di Javascript
Sebelum kita membahas tentang mental model wire yang aku pelajari dari Dan Abramov, mari kita recap sebentar tentang salah satu bahasan yang pernah aku share.
let lauk = "Soto";
lauk[1] = "a";
lauk[3] = "e";
console.log(lauk);
Katakanlah kita punya deklarasi variabel seperti di atas, kira-kira apa hasil dari console.log ?
.
.
.
Jawabannya antara tetapSoto atau akan ada error, strictness yang sedang kamu pakai. Value yang ada di variable lauk enggak akan berubah. Ingat kalo primitive value itu immutable? Kita enggak bisa mengubah isi dari primitive value.
Mari ambil satu contoh lagi…
let lauk = "Soto";
let laukFavorit = ["Ayam", "Soto", "Sate"];
console.log(lauk[0]);
console.log(laukFavorit[0]);
Dari potongan kode di atas, kita bisa tahu kalo hasil console.log nya akan jadi seperti ini
"S" // dari console.log(lauk[0])
"Ayam" // dari console.log(laukFavorit[0])
Wah keduanya array ya? Berarti harusnya kalo kita coba ubah valuenya jadi
lauk[0] = "Z";
laukFavorit[0] = "Gudeg";
console.log(lauk[0]);
console.log(laukFavorit[0]);
ketika kita print value nya bakal jadi kaya gini dong?
"Z"
"Gudeg"
Tentu saja jawabannya, enggak kawanku. Value dari laukFavorit[0] akan berubah jadi Gudeg , tapi lauk[0] akan tetap S .
Loh kok bisa? Padahal kita bisa akses keduanya kaya array biasa? Bener banget, keduanya emang bisa kita akses seperti array pada umumnya, tapi keduanya merupakan dua tipe value yang berbeda, array adalah salah satu familia object, sedangkan string adalah familia primitive value. Primitive value tidak bisa kita ubah isinya.
Bagaimanapun juga, ini adalah salah satu prinsip dalam Javascript, jadi ketika kamu mencoba mengubah isi atau mengubah property dari primitive value, Javascript akan mengabaikannya atau mengembalikan error.
Tentu saja kamu juga enggak bisa melakukan kaya gini
let mainan = "Gundam";
mainan.warna = "merah";
Oke, aku udah paham kalo primitive value enggak bisa diubah, berarti kalo kasusnya kaya gini…
let mainan = "Gundam Barbatos";
mainan = "Gundam Wing";
console.log(mainan);
berarti mainan tetep bakal jadi Gundam Barbatos dong?
Apakah kamu juga kepikiran kaya gini?
.
.
.
.
Jawabannya enggak, value dari mainan sekarang Gundam Wing .
Lho kok bisa, tadi katanya primitive value itu immutable? Enggak bisa diubah?! Asdfghjkl!
Well, the thing starts from now…
Di Javascript kita enggak bisa mengubah isi primitive value, tapi kita enggak pernah bilang kita enggak bisa mengubah isi dari suatu variable.
Yok pelan-pelan yok, dibaca lagi.
Value vs Variable
In case kamu agak bingung, kamu perlu ingat ini.
Variable bukan sebuah value,
tapi variable menunjuk ke suatu value
Variable adalah cara kita mengakses suatu value di Javascript (dan berbagai bahasa pemrograman lainnya), menunjuk ke suatu value yang sudah kita kasih (assign) sebelumnya.
Dan Abramov menjelaskan ini dengan cara yang menurutku gampang dipahami, bahwa variable adalah sebuah kabel yang punya mengarah ke suatu value.
Katakanlah kita punya sebuah variable lauk yang diarahkan ke value Soto
Proses kita memberikan value ke suatu variable atau disebut dengan assigning a value, secara sederhana bisa dikatakan menghubungkan kabel, berdasarkan ilustrasi di atas kita sedang menghubungkan kabellauk ke Soto .
Dengan variable kita bisa melakukan dua hal paling dasar yaitu assign value dan read value*. Mengubah value dari variable dan membaca value dari variable*.
Assigning Value
Kita masih bersama kode di atas, dan kita pengen ngubah value dari lauk jadi sesuatu yang lain, Sate misalnya.
let lauk = "Soto";
lauk = "Sate";
Dari proses di atas, secara sederhana kita hanya mengubah arah kabel lauk dari Soto menuju ke value Sate .
Jadi kabel yang sebelumnya terhubung ke Soto sekarang menjadi terhubung ke Sate .
Ngomongin tentang assign value ke variable, kita juga bisa assign sebuah expression ke variable. Seperti yang udah aku bahas di post tentang Value dan Expression, kalo “expression adalah pertanyaan yang kamu kasih ke Javascript yang kemudian dikembalikan sebagai sebuah value*”.* Karena hasil akhir expression adalah sebuah value, kita tentunya juga bisa assign ke sebuah variable.
[Value dan Expression
Mula-mula kita bahas hal-hal paling dasar di Javascript….medium.com](https://medium.com/bahas-javascript/value-dan-expression-8dc9a901fbda "medium.com/bahas-javascript/value-dan-expre..")
Misalnya kaya gini…
let total = 1300 + 540;
Kabel total akan menunjuk ke 1840 yang merupakan hasil kalkulasi 1300 + 540 .
Jangan resah, jangan gundah, pahami bahwa ketika kita sedang assign value ke suatu variable, sebenernya kita sedang menghubungkan kabel ke suatu value.
Reading a value
Selain mengubah arah kabel ke suatu value atau assign value, kita juga bisa membaca value dari variable. Perlu digarisbawahi teman-teman, bahwa yang kita baca bukanlah variable, tapi value yang ditunjuk oleh variable.
Salah satu contoh gampang membaca value dari variable adalah menggunakan console.log . Jadi yang terjadi ketika kitaconsole.log(lauk) , bukannya kita membaca variablelauk , melainkan membaca value dari lauk .
Javascript: “Jadi apa sih isi dari si *lauk* ini? Oh ternyata isinya *Sate* .”
Kalo cuma gitu mah aku juga tau kalo yang dibaca itu value… Kenapa perlu dijelasin segala sih?
Mungkin kamu tahu, mungkin kamu enggak tahu, berangkat dari prinsip bahwa yang dibaca adalah value dari variable, kita jadi lebih jelas untuk membuat suatu function. Kesampingkan pure function, pass by value, pass by reference karena mungkin malah bisa bikin kamu bingung.
Dari prinsip tentang mana value yang immutable atau mutable dan apa yang bisa kamu lakukan ke variable di Javascript, kamu bisa menghindari kesalahan-kesalahan yang mungkin terjadi ketika kamu bikin suatu function.
Anggaplah kamu punya potongan kode seperti ini…
function power(number) {
number = number**2;
}
let num = 3;
power(num);
console.log(num); // ???
Kira-kira, dari potongan kode di atas apa hasil dari console.log ? Berapakah nilai num sekarang?
.
.
.
.
Jawabannya nilai num tetap 3 . Bukan karena prinsip immutable di primitive value, tapi karena argument yang kita berikan adalah value, bukan variable. Value tidak bisa melakukan proses bernama assign value temanku, ingat bahwa assign value adalah proses menghubungkan kabel (variable) ke suatu value.
Tapi kenapa kok kalo kita tulis fungsi kaya gini, bisa…
function addSize(obj) {
obj.size = 10;
};
let kardus = { bahan: "Kertas" };
addSize(kardus);
console.log(kardus); // { bahan: "Kertas", size: 10 }
Kok bisa gitu? Harusnya sama aja enggak bisa dong kan yang kita baca value bukan variable…
Wait…
Tapi kan…? Value yang dibaca itu object, ingat kan kalo object itu mutable? Makanya proses diatas bisa mengubah isi dari kardus .
Karena kalo misal kita ubah kodenya menjadi
function addSize(obj) {
obj = { ...obj, size: 10 }; // this line matters, buddy
};
let kardus = { bahan: "Kertas" };
addSize(kardus);
console.log(kardus); // { bahan: "Kertas" }
Hasil dari console.log tidak akan ada size: 10 di dalamnya, karena itu tadi di fungsi sebelumnya, kita melakukan mutation atau mengubah isi dari suatu value, tapi di fungsi ini kita mencoba melakukan assign value atau menghubungkan kabel ke suatu value.
Jadi yang dilakukan Javascript adalah membaca “apa sih value dari parameter obj ini? terus kasih value tadi ke addSize”. Makanya itulah kardus meskipun mutable, enggak berubah valuenya.
You can only ride a bike and not skate a bike, eat a banana not ride it.
Semoga penjelasan mental model ini bermanfaat untuk membantu kamu memahami potongan-potongan kode Javascript. Kalo ada yang bingung atau kamu punya pendapat sendiri, jangan lupa untuk kasih feedback di kolom komentar.