Perbedaan 'var', 'let', dan 'const' dalam JavaScript

Jadi jika kamu baru di dunia javascript mungkin kamu akan bertanya-tanya, apa perbedaan antara var, let dan const dan kenapa itu penting? Pada dasarnya mereka itu sama, dengan beberapa kebiasaan yang berbeda. var, let dan const adalah sebuah keyboard untuk mendeklarasikan variabel di javascript. Sejak lahirnya javascript, var menjadi method utama untuk mendeklarasikan variabel di javascript, sampai let dan const hadir dengan ES6 di tahun 2015.

Petama, mari kita bahas secara terknis dari var, let dan const.

1. var

1.1. var memilikin cakupan fungsi

Jika kamu tidak terbiasa dengan javascript scope, scope mengacu pada konteks blok kode, yang menentukan aksesibilitas variabel tertentu. Jika variabel dideklarasikan diluar sebuah fungsi, itu tercakup secara global, artinya bisa di akses dimana aja di kode kamu. berikut adalah case var dalam cakupan fungsi. Lihat contoh di bawah ini.

function setup() {
var x = 16;
console.log(c); //output: 16
}
console.log(x); //output: x is nor defined

Dalam contoh diatas, karena x dideklarasikan dalam suatu fungsi, variabel x hanya dapat diakses di dalam fungsi tersebut.

1.2. var dapat di re-assigned dan re-declared

var dapat di re-assigned dan bahkan di re-declared tanpa menimbulkan error. mungkin kamu berpikir bahwa kode kita akan menjadi lebih fleksibel, tapi pada kenyataanya, itu akan menumbulkan suatu masalah. Karena var bisa di re-declared, ada kemungkinan kita lupa mendeklarasikan variabel tertentu, dan tidak sengaja mengganti value nya. Ketika aplikasi kita skalanya masih kecil, mungkin kita masih bisa menghindari masalah ini. Namun, saat aplikasi kita sudah mulai besar, best practice nya menggunakan let.

2. let dan const

let dan const berprilaku dengan cara yang sangat mirip, dengan satu perbedaan utama. Ayo kita liat pesamaanya dulu.

2.1. let dan const memiliki cakupan blok

Dengan let dan const, variable hanya bisa di akses dalam blok dimana mereka didekalrasikan. Jadi mungkin kamu bertanya, apa itu blok?

Blok adalah segala sesuatu yang dikelilingi oleh sepasang {} (contoh. For loop, if statement, dll). Lihat contoh di bawah ini.

function letExample() {
  let x = 2;
if (x === 2) {
let y = 6;
console.log(y); //output: 6
}
console.log(x); //output: 2
console.log(y); //output: x is nor defined
}

Dalam contoh diatas, variabel x dideklarasikan didalam lingkup blok fungsi, yang membuatnya dapat diakses didalam seluruh fungsi itu. Namun, variabel y dideklarasikan di dalam lingkup blok pernyataan if, membuatnya hanya dapat diakses dalam pernyataan itu, meskipun pernyataan itu ada di dalam fungsi.

2.2. let bisa di re-assigned tapi tidak bisa di re-declared

let mirip dengan var karena bisa di re-assigned, tapi tidak bisa di re-declared. Ini membantu masalah penimpaan value yang saya sebutkan diatas dengan var. Kita dapat re-assigned variabel let sebanyak yang kita butuhkan, tapi pernyataan aslinya akan selalu sama.

function letExample() {
  let x = 3;
  x = 6
  console.log(x); //output: 6
}

function letExample() {
  let x = 3;
  let x = 8;
  console.log(x); //error: variable has already been declare
}

2.3. const tidak bisa di re-assigned dan re-declared (agak)

const di javascript secara harfiah berarti konstan. Saat kamu ingin membuat sebuah variabel yang tidak akan pernah berubah didalam kode kamu, kamu bisa menggunakan const. Ini kan membantu readibility kamu dan developer lainnya.

const x = 20;
x = 20;
console.log(x); //output: error: assignment to constant variable

Note: Walaupun const tidak bisa di re-assigned dan re-declared, tapi nilainya bisa dimanipulasi. Contohnya, Jika kita me-assigned sebuah object kedalam variabel const, javascript mengizinkan nilai dan properti didalam sebuah object untuk dimanipulasi selama object aslinya tidak di re-assigned ke object baru. Contoh:

const particle = {x: 10, y: 20};
particle.x = 50;
console.log(particle); //output: {x: 50, y: 10}
particle = {x: 20, y: 60};
console.log(particle); //output: error: assignment to constant variable

3. Catatan

Hindari menggunakan var. Jika kamu memiliki sebuat variabel yang tidak akan pernah berubah, gunakan const. Jika tidak gunakan let! Saya harap ini membantu kamu mengerti "apa" dan "mengapa" variabel pada JavaScript!