Cara Javascript meng-assign value ke variable
Melanjutkan pembahasan di post sebelumnya terkait mental model wire dari Dan Abramov dan assigning value. Seperti yang aku ceritain sebelumnya assigning value bisa kita bayangin kaya menghubungkan suatu kabel (yang mana disebut variable) ke suatu value.
Kelihatannya sih sederhana banget, padahal… ya emang sederhana sih. Menggambarkan hubungan antara value dan variable dengan kabel menurutku cara paling mudah memahami gimana variable di Javascript bekerja. Tapi eh tapi, ada beberapa hal yang mungkin perlu kamu tahu terkait gimana sih sebenernya Javascript nge-handle assigning value ini.
Let’s dive deeper into assign value…
Assign a primitive value to a variable
Let’s say kita punya potongan kode kaya gini
let lauk = "Soto";
let sayur = lauk;
Kalo mengingat implementasi mental model wire kemarin, maka hasilnya kurang lebih akan begini kan…
Karena variable sayur juga dihubungkan ke value dari variable lauk . Tapi gimana kalo kita punya potongan kode kaya gini?
let lauk = "Soto";
let sayur = "Soto";
Apakah Javascript akan membuat value Soto lagi dan kemudian dihubungkan dengan variable sayur ? Atau malah variable sayur tetap terhubung ke tempat yang sama dengan variable lauk ? Coba dengan pengetahuanmu yang sekarang kira-kira dulu apa jawabannya…
.
.
.
Udah ya…? Udah dikira-kira ya? Fix ya ini jawabannya?
.
.
.
Jawabannya, variable sayur akan terhubung ke value yang sama dengan variable lauk .
Loh kok bisa gitu? Kan kita tadi assign value sendiri-sendiri? Kok terhubung ke value yang sama sih, harusnya beda dong?!
Mungkin kamu berpikir demikian, tapi ingat-ingat lagi bahwa 1) Javascript adalah salah satu bahasa pemrograman tingkat tinggi (jauh dari memory control); 2) Primitive value itu immutable/read-only.
Dengan ingat dua hal tadi, kita bisa tahu kalo ya karena primitive value merupakan value yang read-only kenapa harus dibuatkan value lagi di tempat yang berbeda terus dihubungkan?
Terus gimana misalnya kita punya kode kaya gini…
let lauk = "Soto";
let sayur = lauk;
sayur = "Sate";
Dari potongan kode di atas, variable sayur akan diganti dari sebelumnya terhubung ke Soto berpindah ke Sate .
Karena ketika variable di assign ke primitive value dengan value yangberbeda, maka Javascript akan membuat value baru (tentunya) dan menghubungkan variable tadi ke value yang baru.
Jadi berapapun variable yang ada, kalau value yang di assign sama dan primitive value, maka Javascript akan menghubungkan semua variable ke satu value yang sama.
Oke, kalo gitu gimana dengan Object?
Assign object value to a variable
Sama seperti sebelumnya kita akan coba lihat, misal kita punya potongan kode kaya gini…
let sherlock = {};
let watson = sherlock;
Dari potongan kode di atas, dengan mental model wire kita pasti udah bisa membayangkan gimana Javascript menghubungkan value dari variable sherlock dan watson . Betul sekali kawanku, tentunya terhubung ke satu value yang sama.
Terus kira-kira gimana kalo kita ubah kode kita jadi kaya gini…
let sherlock = {};
let watson = {};
Apakah aturan di primitive value juga berlaku di object value? Bahwa akan tetap menunjuk ke satu value yang sama. Atau enggak kaya gitu? Coba kira-kira dulu, menurutmu apa yang akan dilakukan Javascript…
.
.
.
Udah punya jawaban? Yakin ya? Kita kunci jawabannya.
.
.
.
Jawabannya…
Ketika berkutat dengan object, Javascript akan selalu membuat value baru, meskipun kita menulis isi dari objectnya sama atau sama-sama empty object {} . Ini juga jadi salah satu alasan kenapa ketika kita melakukan comparison{} == {} akan me-return false , karena valuenya sudah dianggap beda oleh Javascript.
Masih ngomongin object, kira-kira gimana sih gambaran kalo object yang punya property?
let detective = {
name: "Sherlock Holmes"
address: "Baker Street"
};
Selalu ingat bahwa variable terhubung dengan suatu value, ketika kita ngomongin object yang punya property, maka key dari property tadi berlaku sebagai variable dan valuenya (ya jadi value, namanya juga value). Maka bisa kita gambarkan kaya gini…
See? Kita menghubungkan variable detective ke suatu object, kemudian tiap variable di dalam object tadi terhubung dengan suatu value. Gambaran ini juga bisa diperdalam lagi misalnya kita punya kode yang sedikit lebih kompleks.
let detective = {
name: "Sherlock Holmes",
address: {
street: "Baker Street",
city: "London"
}
};
Dari potongan kode di atas bisa kita ilustrasikan seperti ini
No Nested Object Dan Abramov di salah satu coursenya di Just Javascript bilang bahwa meskipun dalam kode kita tertulis bahwa object kita terlihat “nested”, tapi enggak ada yang namanya object di dalam object. Bisa kita lihat ilustrasi di atas kita bisa lihat bahwa sebenernya ada dua pasang curly braces yang artinya keduanya adalah entitas object yang sebenernya terpisah.
Makanya ketika kita melakukan mutation ke object yang terhubung ke address , secara otomatis value di detective.address juga ikut berubah.
let detective = {
name: "Sherlock Holmes",
address: {
street: "Baker Street",
city: "London"
}
};
let address = detective.address;
address.city = "Liverpool";
Lalu gimana kalo kita pengen address punya value yang sama tapi menunjuk ke object yang berbeda?
Jawabannya ya dengan membuat object baru.
let address = {
street: "Baker Street",
city: "London"
};
Dengan begitu Javascript akan membuatkan object baru untuk dihubungkan dengan variable address , meskipun property name nya sama, karena ada di object yang berbeda, akan terhubung ke value yang berbeda.
Dengan begitu ketika kita mengubah value address.city enggak akan mempengaruhi value yang dihubungkan dengan detective.address.city lagi.
NB: Karena function juga sejatinya sebuah object, hal yang sama berlaku juga dengan function.
That’s it! Gimana Javascript memperlakukan variable ketika kita melakukan assign value. Semoga bermanfaat, happy coding!
I’m open for feedback anyway, just let me know in the comment section.