Variabel constant merupakan variabel yang tak bisa diubah nilainya [read-only]. Perlukah kita menggunakannya?
Photo by Paula Smith on Unsplash
Selama kita menggunakan javascript, kita pasti sering membuat variabel dengan awalan
var buah = "labu"7 kemudian dilanjutkan dengan nama variabel. Namun, terkadang kita tidak sengaja membuat variabel dengan nama yang sama dan memasukkan nilai yang berbeda. Hal tersebut memang tidak menyebabkan error pada aplikasi yang kita buat tapi dapat berakibat fatal apabila kita tidak berhati hati. Untuk mengatasi hal tersebut, sangat disarankan untuk mulai menggunakan variabel
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"8 dan
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"9 dalam development aplikasi menggunakan javascript.
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"8 dan
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"7 memang memiliki banyak kemiripan tapi hal itu tidak berlaku pada
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"9, lalu apa yang berbeda? Kenapa kita harus menggunakan
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"9? Kapan kita perlu menggunakannya?
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
INDEX
var buah = "labu"
4
let hargaif[buah == "labu"]
harga = 42000console.log["harga buah", buah, "adalah", harga]//OUTPUT "harga buah labu adalah 42000"
Ibaratnya kita memiliki sebuah buah labu warna oranye. Ketika menyambut halloween orang orang selalu mengukir pola wajah pada buah labu. Butuh keahlian dan ketelitian dalam mengukirnya supaya mendapatkan hasil yang diinginkan. Apabila kita gagal, maka kita tidak bisa lagi membalikkan keadaannya. Kita perlu membeli labu baru dan mengukirnya lagi.
Variabel
var buah = "labu"9 juga demikian, ketika kita sudah mendeklarasikannya dan memasukkan sebuah nilai, kita tidak lagi bisa mengubahnya. Kita perlu membuat variabel dengan nama yang berbeda baru bisa memasukkan nilai yang diiginkan.
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"9 merupakan kependekan dari constant. Sesuai dengan namanya, variabel ini memiliki nilai yang statis dan bersifat read-only. Walaupun sebenarnya nilai pada variabel tersebut statis, ada beberapa cara yang dapat dilakukan untuk mengubah nilai dari variabel constant itu sendiri.
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"9 merupakan variabel block-scoped yaitu ia hanya dapat dipanggil oleh program dalam 1 blok yang sama, atau program di dalam tanda
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"8. Berbeda halnya dengan
let hargaif[buah == "labu"]
harga = 42000console.log["harga buah", buah, "adalah", harga]//OUTPUT "harga buah labu adalah 42000"
var buah = "labu"7 yang merupakan variabel dengan function-scoped. Ketika mendeklarasi variabel constant, kita perlu memasukkan nilainya pada saat dideklarasi. Berbeda dengan
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"8 maupun
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"7 yang mana kita bisa mendeklarasikan variabel tanpa perlu menentukan nilainya terlebih dahulu.Apa keistimewaannya?
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"9 tidak hadir tanpa keunggulan, pastinya ada alasan kenapa javascript memiliki tipe data
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"9 yang mungkin kita jarang sekali menggunakan atau bahkan mengetahuinya.
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"
var harga = 42000var mobil = "sedan"
var harga = 93000000console.log["harga labu adalah", harga]//OUTPUT "harga labu adalah 93000000"
Bila kita perhatikan program di atas, kita membuat variabel dengan nama yang sama sebanyak 2 kali. Harga pertama untuk harga labu kemudian selanjutnya untuk mobil. Pada saat kita jalankan programnya, nilai variabel dari
var buah = "labu"4 adalah nilai terakhir yang dimasukkan pada variabel tersebut, yaitu harga mobil.
const hargaif[buah == "labu"]
harga = 42000console.log["harga buah", buah, "adalah", harga]//SyntaxError: Missing initializer in const declaration
var buah = "labu"7 disini tidak mempermasalahkan apakah variabel tersebut sudah ada sebelumnya atau belum, ia tetap akan mengizinkan pembuatan variabel dengan nama yang sama.
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
Sekarang kita ubah variabel
var buah = "labu"4 menggunakan
const hargaif[buah == "labu"]
harga = 42000console.log["harga buah", buah, "adalah", harga]//SyntaxError: Missing initializer in const declaration
var buah = "labu"9
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
Kita tidak diizinkan mendeklarasikan variabel dengan nama yang sama ketika menggunakan
var buah = "labu"9 hal ini akan sangat membantu ketika membuat aplikasi berskala besar dengan nama variabel yang bermacam macam.
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
👶🏼 Lho, kan sama aja kayak pakai
var buah = "labu"9. Trus yang bedain apa?
const hargaif[buah == "labu"]
harga = 42000console.log["harga buah", buah, "adalah", harga]//SyntaxError: Missing initializer in const declaration
Dalam menggunakan
var buah = "labu"9 saat mendeklarasikan variabel kita harus menginisialisasikan nilainya secara langsung. Misal
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"
let hargaif[buah == "labu"]
harga = 42000console.log["harga buah", buah, "adalah", harga]//OUTPUT "harga buah labu adalah 42000"
Bila kita menggunakan
var buah = "labu"7 ataupun
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"8 hal ini tidak menjadi masalah, tapi beda halnya dengan menggunakan
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"9
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"
const hargaif[buah == "labu"]
harga = 42000console.log["harga buah", buah, "adalah", harga]//SyntaxError: Missing initializer in const declaration
Disitu kita diminta untuk memasukkan nilai dari variabel
var buah = "labu"9 yang sudah kita deklarasikan. Aturan ini bisa kalian lihat pada website
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
Selanjutnya sekarang kita coba untuk mengubah nilai dari variabel
var buah = "labu"9 yang sudah kita deklarasikan
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"
const harga = 0if[buah == "labu"]
harga = 42000console.log["harga buah", buah, "adalah", harga]//TypeError: Assignment to constant variable.
Bila kita perhatikan, ketika kita mencoba untuk mengubah nilai dari variabel
var buah = "labu"4 kita akan mendapatkan error. Ini merupakan keistimewaan lain dari variabel
const hargaif[buah == "labu"]
harga = 42000console.log["harga buah", buah, "adalah", harga]//SyntaxError: Missing initializer in const declaration
var buah = "labu"9
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
👶🏼 Katanya nilainya bisa diubah pakai cara tertentu? Emang gimana?
Memang nilai dari variabel
var buah = "labu"9 memang statis, tapi bukan berarti ia mutlak tidak dapat dirubah. Beberapa contoh berikut menunjukkan bahwa kita bisa mengubah isi dari variabel
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
var buah = "labu"9
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
const buah = {}
buah.nama = "labu"console.log[buah]//OUTPUT { nama: 'labu' }
👶🏼 Ha? Kok bisa? Katanya-
Ya, sebenarnya yang kita rubah bukanlah nilai variabelnya tetapi property dari variabel yang kita buat. Berbeda dengan contoh berikut
let buah = {}buah = {
nama : "labu"
}console.log[buah]//TypeError: Assignment to constant variable.
Mengapa terjadi error? Hal ini dikarenakan kita melakukan reassign atau memasukkan nilai baru ke dalam variabel
var buah = "labu"9. Pada contoh tersebut kita membuat objek baru yang memiliki property
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
const buah = {}1. Padahal sebelumnya kita mendeklarasikan variabel
buah.nama = "labu"console.log[buah]//OUTPUT { nama: 'labu' }
const buah = {}2 berupa empty object. Pada kasus ini, kita hanya bisa menambah dan menghapus property saja. Lalu bagaimana bila kita mengubah nilai dari property dari variabel tersebut?
buah.nama = "labu"console.log[buah]//OUTPUT { nama: 'labu' }
const buah = {}
buah.nama = "labu"console.log[buah]//OUTPUT { nama: 'labu' }buah.nama = "naga"console.log[buah]//OUTPUT { nama: 'naga' }
Aneh bukan?
Memang variabel
var buah = "labu"9 hanya tidak mengizinkan melakukan reassign dan deklarasi ulang pada variabel tersebut. Meskipun begitu, kita tetap bisa membuat objek variabel kita benar benar constant yaitu dengan cara berikut
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
const buah = Object.freeze[{ nama : "labu" }]
buah.nama = "papaya"console.log[buah]//OUTPUT { nama : "labu" }buah.jumlah = 5console.log[buah]//OUTPUT { nama : "labu" }
Bila kita perhatikan, nilai dari property dari variabel tersebut tidak berubah sama sekali setelah kita menambahkan
const buah = {}4. Ini merupakan alternatif apabila kita ingin membuat variabel objek yang constant.
buah.nama = "labu"console.log[buah]//OUTPUT { nama: 'labu' }
Tapi, hal tersebut tidak menjadikannya mutlak tidak dapat diubah.
const buah = Object.freeze[{ nama : {}}]
buah.nama.buahnya = "labu"console.log[buah]//OUTPUT { nama: { buahnya: 'labu' } }
Hal ini juga berlaku pada array
var buah = "labu"0
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
Sehingga bila kita ingin membuatnya menjadi constant juga akan menjadi seperti ini
var buah = "labu"1
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
Dan pada array
var buah = "labu"2
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
Hal di atas pun juga berlaku ada array
var buah = "labu"3Kapan kita menggunakannya?
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
Mengenai kapan penggunaannya, saya hanya memberikan opini dari pengalaman pribadi. Variabel ini biasanya digunakan ketika membuat konstanta dalam operasi matematika, contoh paling gampangnya adalah ketika membuat perhitungan keliling lingkaran.
Untuk menghindari kerancuan, penamaan variabel constant direkomendasikan menggunakan huruf kapital.
var buah = "labu"4
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
Hal ini karena nilai dari pi sudah mutlak dan tidak mungkin berubah.
Penggunaan selanjutnya adalah ketika kita menggunakan sebuah library dan membuat objek, sebagai contoh
var buah = "labu"5
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
Program di atas merupakan contoh program hello world pada ExpressJS
Penggunaan berikutnya yaitu ketika menyimpan nilai environment variable yang biasa digunakan dalam pengembangan aplikasi NodeJS
var buah = "labu"6
const harga = 42000var mobil = "sedan"
const harga = 93000000console.log["harga labu adalah", harga]//SyntaxError: Identifier 'harga' has already been declared
Itu tadi merupakan sedikit contoh dan penjelasan mengenai variabel constant pada javascript. Contoh penggunaan yang penulis berikan tidak selalu benar dan setiap programmer memiliki style-nya masing masing. Selamat belajar dan semoga bermanfaat!