ES6: var, let dan const

Pada ES5, kita hanya mengenal satu cara untuk mendeklarasikan variabel yaitu dengan sintak var, pada ES6 kita akan mengenal tiga sintak untuk mendeklarasikan variabel. Sintak tersebut adalah var, let dan const.

Jadi, apa bedanya ketiga sintak tersebut? Mari kita bahas satu persatu.

Var

Jika kita mempunyai sebuah kode perulangan seperti berikut :

for (var i = 0; i < 5; i++) {
  console.log(i) // 0 1 2 3 4
}
console.log('after loop', i) // this i = 5

Kode baris terakhir akan menampilkan keluaran berupa teks “after loop 5”. Padahal variabel i hanya di deklarasikan pada perulangan for. Hal ini disebabkan karena pada JavaScript, sintak var berjalan pada cakupan fungsi (function scope). Yang artinya, variabel yang kita deklarasikan di dalam sebuah fungsi akan dapat kita gunakan asalkan masih dalam skope fungsi tersebut.

Untuk membuktikannya, mari kita bungkus kode di atas dalam sebuah fungsi.

function counter () {
  for (var i = 0; i < 5; i++) {
    console.log(i)
  }
}
counter()
console.log('after loop', i) // this i is undefined

Jika kita jalankan kode tersebut, kita akan mendapatkan pesan error “ReferenceError: i is not defined” yang menunjukkan bahwa variabel i yang sudah dideklarasikan dalam fungsi counter hanya dapat diakses di dalam fungsi counter saja.

Lalu, bagaimana jika di dalam fungsi counter terdapat scope lain seperti conditional statement atau fungsi baru? Mari kita coba dulu.

Tambahkan sebuah fungsi di dalam fungsi counter sehingga kode menjadi seperti berikut:

function counter () {
  for (var i = 0; i < 5; i++) {
    console.log(i)
  }
  var afterLoop = function () {
    console.log('after loop inside function = ', i) // i = 5
  }
  afterLoop()
}
counter()
console.log('after loop', i) // this i is undefined

Fungsi afterLoop di dalam fungsi counter , memanggil variablel i, yang hasilnya adalah “after loop inside function = 5”.

Kesimpulan dari sintak var adalah Terbukti, bahwa sintak var mempunyai cakupan dalam sebuah fungsi (function scope).

Let

Untuk mencari tahu tentang sintak let, saya akan membuat kode perulangan seperti pada kasus pertama. Akan tetapi, pada kode kali ini saya menggunakan sintak let i.

for (let i = 0; i < 5; i++) {
  console.log(i) // 0 1 2 3 4
}
console.log('after loop', i) // this i is undefined

Berbeda dengan sintak var, jika kode tersebut dijalankan akan menghasilkan eror berupa “ReferenceError: i is not defined” yang menunjukkan bahwa variabel i belum dideklarasikan. Padahal variabel i sudah saya deklarasikan pada perulangan for. Hal ini disebabkan karena sintak let merupakan block scope.

Saya akan modifikasi kode sebelumnya dengan menambahkan satu scope lagi di bawah perulangan for.

for (let i = 0; i < 5; i++) {
  console.log(i) // 0 1 2 3 4
}
if (true) {
  let i = 1000
  console.log(i) // this i = 1000
}
console.log('after loop', i) // this i is undefined

Jika saya jalankan kode tersebut, tetap saja variabel i pada baris terakhir mengakibatkan eror “ReferenceError: i is not defined”.

Dari dua kasus di atas, menunjukkan bahwa sintak let mempunyai cakupan blok (block scope). Scope pada kasus ini ditandai dengan tanda { …….. }.

Const

Lalu bagaimana dengan sintak const ?

Const mempunyai sifat yang sama seperti let hanya saja, jika kita mendeklarasikan variabel dengan sintak const, kita tidak dapat me-reassigned nilai dari variabel tersebut.

Untuk memperjelas perbedaan let dan const, saya membuat kode berikut ini:

if (true) {
  let i = 10
  i = 2
  console.log(i) // this i = 2
}

if (true) {
  const i = 10
  i = 2
  console.log(i) // this i = 10
}

Pada kondisi pertama (dengan menggunakan sintak let), hasil akhir dari variabel i adalah 2.

Sedangkan pada kondisi kedua (dengan menggunakan sintak const), akan menghasilkan eror “TypeError: Assignment to constant variable.” yang menunjukkan bahwa variabel i tidak dapat di reassigned.