Variabel Let dan Const di JavaScript ES6
Pada JavaScript kita biasa mendeklarasikan sebuah variabel dengan menggunakan kata kunci “var”.
Namun dengan dirilisnya EcmaScript 6 (ES6), kita memiliki cara baru yang bisa kita gunakan untuk mendeklarasikan sebuah variabel di JavaScript, yaitu dengan menggunakan kata kunci “let” dan “const”.
Dirilisnya “let” dan “const” sebagai cara mendeklarasikan variabel yang baru pada JavaScript bukan hanya sekedar mengganti nama dari “var” menjadi “let” dan “const”, tapi kedua cara baru ini memiliki fiturnya masing-masing yang akan berguna ketika kita menulis program.
Pada bagian ini, kita akan melihat apa itu “let”, “const” dan melihat apa perbedaanya dengan cara biasa kita mendeklarasikan variabel dengan menggunakan keyword “var”.
Sebelum melihat kemampuan-kemampuan apa saja yang dibawa oleh kedua cara baru tersebut dalam mendeklarasikan variabel, kita akan melihat dan mengulang terlebih dahulu bagaimana “var” berfungsi agar kemudian dapat membandingkannya.
Perubahan Nilai dan Bisa Didefinisikan Ulang
Perbedaan pertama yang akan kita lihat adalah apakah variabel-variabel yang didefinisikan dengan menggunakan keyword “var”, “let” dan “const” mutable (bisa diubah nilanya) atau immutable (tidak bisa diubah nilai).
Mutable berarti sebuah variabel dapat di ubah nilainya dari nilai awal pada saat pendefinisiannya. Untuk lebih lengkap, lihat pada masing-masing contoh dibawah.
Var dan Let Mutable (Bisa Diubah Nilainya)
Variabel yang dibuat dengan menggunakan keyword “var” dapat diubah dan didefinisikan ulang nilanya.
Misalnya seperti pada contoh berikut:
var nilai = 80; console.log(nilai); // mencetak 80 nilai = 100; console.log(nilai); // mencetak 100
Jika kamu menjalankan potongan kode diatas, JavaScript akan melakukan log nilai “80” dan “100” di console padahal kita sama-sama melakukan console log variabel yang sama, ini karena sebelum console log yang kedua, kita mengubah nilai dari variabel “nilai”.
Sama seperti “var”, pada “let” variabel juga mutable atau dapat didefinisikan ulang, seperti pada contoh berikut:
let nilai = 80; console.log(nilai); // mencetak 80 nilai = 100; console.log(nilai); // mencetak 100
Const Immutable atau Tidak Bisa Diubah Nilainya
Berbeda dengan “var” dan “let” yang mutable atau bisa diubah nilainya, variabel yang didefinisikan dengan menggunakan keyword “const” immutable atau tidak dapat diubah nilainya.
“const” diperuntukkan untuk digunakan pada saat kamu ingin variabel yang kamu miliki tidak akan diubah nilainya, untuk menghindari kamu mengubah nilai secara tidak sengaja, kamu bisa menggunakan “const”, sehingga ketika variabel tersebut tidak akan diubah.
Misalnya seperti pada contoh kode berikut:
const nilai = 80; console.log(nilai); // mencetak 80 nilai = 100; console.log(nilai); // mencetak 80
Jika potongan kode diatas dijalankan, maka akan muncul log di console dengan kedua tulisan yang akan muncul adalah “80”. Padahal sebelum kita melakukan console log yang kedua, kita mengubah nilai dari variabel nilai menjadi “100”, namun tidak berubah.
Pada praktiknya dalam beberapa keaadan, jika kamu mengubah nilai dari sebuah variabel “const” kamu akan mendapati peringatan error di console.
Scope atau Ruang Lingkup Penggunaan Variabel
Perbedaan kedua yang akan kita lihat adalah scope. Scope adalah ruang lingkup dimana sebuah variabel tersedia dan bisa digunakan.
Setelah melihat perbedaan pertama; yaitu mutable atau tidak mutable, mungkin kamu akan bertanya “let” dan “var” sama mutable, kenapa harus dibuat “let” lagi jika sudah ada “var” yang sama-sama mutable, jawabannya adalah scope.
Kita akan melihat kenapa scope menjadi bagian yang penting pada kedua fitur variabel yang baru yaitu “let” dan “const”.
Var Bersifat Function Scope
Scope sebuah variabel yang dibuat dengan menggunakan keyword “var” adalah function scope, yang berarti mereka hanya tersedia di dalam fungsi dimana mereka dideklarasikan atau didefinisikan.
Jika mereka tidak didefinisikan di dalam fungsi, berarti variabel-variabel tersebut berada pada global scope, atau di keseluruhan window, yang berarti bisa diakses oleh fungsi yang ada di dalamnya.
Sebagai contoh, untuk melihat scope variabel yang dibuat dengan menggunakan keyword “var”, kamu bisa melihat contoh potongan kode berikut:
function beriNilai(){
var nilai = 100;
console.log(nilai); // mencetak “100”
}
beriNilai();
Pada potongan kode diatas, ketika fungsi “beriNilai” dipanggil fungsi tersebut akan memberikan nilai “100” untuk variabel “nilai”, kemudian sekaligus langsung console log nilai dari variabel “nilai”, sehingga ketika dipanggil fungsi tersebut akan melakukan console log variabel “nilai”.
Kemudian lihat contoh potongan kode berikut:
function beriNilai(){
var nilai = 100;
}
beriNilai();
console.log(nilai); // mencetak “error, nilai is not defined”
Pada potongan kode diatas, di dalam fungsi “beriNilai” kita hanya mendefinisikan dan mengatur nilai untuk variabel “nilai”, namun tidak melakukan console log. Kita melakukan console log nilai variabel “nilai” di bagian luar fungsi.
Ketika dijanalankan potongan kode diatas akan mencetak log “error, nilai is not defined”.
Ini dikarenakan, kita mencoba mengkases variabel “nilai” diluar fungsi, sedangkan variabel “nilai” di deklarasikan di dalam fungsi tersebut, dan seperti yang sudah disebutkan sebelumnya, variabel dengan keyword “var” adalah function scoped.
Let dan Const Bersifat Block Scope
Berbeda dengan “var” yang function scope, “let” dan “const” yang baru hadir pada ES6 adalah block scope.
Block adalah rentang diantara sepasang kurung kurawal “ { … } ”, dimanapun kamu melihat tanda buka kurung kurawal dan tutup kurup kurawal, itu adalah sebuah block, baik itu pada fungsi, perulangan, kondisi dan sebagainya.
“let” dan “const” hanya tersedia pada blok dimana ia di deklarasikan, atau dengan kata lain ia akan berada pada scope di block terdekat ia berada.
Sebagai contoh, kamu bisa melihat kode berikut:
function cetakNilai(hadir){
if (hadir > 9) {
let nilai = 100;
console.log(‘Nilai adalah: ’ + nilai);
}
else{
console.log(‘Kehadiran tidak cukup!’);
}
}
Pada contoh diatas, karena didefinisikan dengan menggunakan “let” variabel nilai adalah block scope. Variabel “nilai” akan berada pada scope di dalam tanda kurung kurawal terdekatnya “{ … }”.
Sehingga variabel “nilai” tersebut hanya tersedia pada block if. Jika kita mencoba mengkases variabel nilai di luar block if, kita akan mendapati pembetitahuan bahwa variabel “nilai” tidak didefinisikan.
function cetakNilai(hadir){
if (hadir > 9) {
let nilai = 100;
}
else{
console.log(‘Kehadiran tidak cukup!’);
}
console.log(‘Nilai adalah: ’ + nilai); // variabel nilai “undefined”
}
function cetakNilai(hadir){
if (hadir > 9) {
let nilai = 100;
console.log(‘Nilai adalah: ’ + nilai);
}
else{
console.log(‘Kehadiran tidak cukup!’);
console.log(‘Nilai adalah: ’ + nilai); // variabel nilai “undefined”
}
Salah satu penggunaan variabel dengan block scope sangat berguna adalah pada perulangan, saat kita mendefinisikan sebuah variabel sebagai nilai yang sebenarnya hanya kita perlukan di dalam perulangan tersebut.
Lihat contoh kode berikut:
for ( var I; I < 5; i++ ) {
console.log(i);
}
console.log(i); // mencetak nilai “5”
Jika kita menggunakan “var” untuk mendeklarasikan variabel “i” seperti pada contoh diatas, kita akan tetap bisa mengakses variabel “i” tersebut bahkan diluar scope for, namun kenyataanya variabel “i” tersebut tidak berguna dan seharusnya bisa kita gunakan untuk keperluan yang lain.
Kemudian lihat potongan kode berikut:
for ( let I; i < 5; i++) {
console.log(i);
}
console.log(i); // variabel nilai “undefined”
Sedangkan jika kita menggunakan “let” untuk mendeklarasikan variabel “i”, variabel “i” tersebut hanya akan tersedia pada scope for, sehingga kita bisa menggunakan nama variabel “i” untuk keperluan yang lain dengan aman jika dibutuhkan.
