Perbedaan antara var, let, dan const pada ES6: Penjelasan Lengkap.

Perbedaan var, let, dan const pada ES6

Var

Sejak ES6 Javascript memperkenalkan let dan const untuk urusan variabel. var tetap di pertahankan untuk menjaga kompatibilitas ke versi sebelumnya. Lalu apa bedanya ? Kapan harus menggunakannya ?

Sebelum ES6, deklarasi variabel di JavaScript dilakukan hanya dengan menggunakan kata kunci "var". Kemudian, untuk memberikan nilai pada variabel, dapat dilakukan dengan dua cara yaitu dengan melakukan assignment setelah deklarasi atau langsung pada saat deklarasi, seperti contoh berikut:

var x; // deklarasi
x = 1; // assignment
// atau

var x = 1; // deklarasi dan assignment dalam satu baris

{codeBox}

Permasalahan dengan penggunaan var

Meskipun penggunaan "var" pada JavaScript terlihat sederhana, namun terdapat beberapa kasus yang seringkali membingungkan dan memunculkan masalah. Salah satunya adalah:

Masalah #1: Reassign

Salah satu masalah utama pada penggunaan "var" adalah kemampuan untuk melakukan reassign atau mengubah nilai variabel, bahkan setelah variabel tersebut dideklarasikan. Hal ini seringkali menyebabkan kesalahan atau bugs pada program, terutama jika perubahan nilai variabel tidak disengaja.

Contoh penggunaan "var" yang memunculkan masalah:

var foo = 'hello1';

var foo = 'hello2';

console.log(foo); // Output: hello2

{codeBox}

Pada contoh di atas, variabel "foo" di-reassign dengan nilai yang berbeda tanpa adanya pesan error atau peringatan pada konsol. Hal ini cukup riskan dan memungkinkan programmer untuk melakukan kesalahan tanpa disadari.

Masalah #2: Hoisting

Selain kemampuan untuk melakukan reassign, penggunaan "var" pada JavaScript juga memiliki masalah lain yang seringkali membingungkan, yaitu hoisting. Hoisting artinya "mengangkat", yang berarti variabel yang dideklarasikan dengan "var" akan diangkat ke atas pada lingkup fungsi atau global scope, sebelum baris kode dijalankan.

Contoh penggunaan "var" dengan hoisting:

x = 10;

var x;

console.log(x); // Output: 10

{codeBox}

Pada contoh di atas, variabel "x" dideklarasikan setelah variabel tersebut sudah diberi nilai. Namun, ketika kode dijalankan, variabel "x" diangkat ke atas sebelum baris kode dijalankan, sehingga nilai yang diberikan pada variabel "x" dapat ditampilkan dengan benar.

Namun, penggunaan "hoisting" dapat membuat kode sulit dibaca dan membingungkan. Selain itu, hoisting juga dapat menyebabkan variabel yang belum dideklarasikan menghasilkan nilai "undefined", yang bisa menjadi masalah ketika programmer tidak sengaja mengacu pada variabel yang belum dideklarasikan. Oleh karena itu, sebaiknya hindari penggunaan "hoisting" dan deklarasikan variabel dengan benar sebelum digunakan.

Masalah #3: Scope

Block scope dalam javascript ditandai dengan simbol { }. Scope artinya pembagian program, dan sering ditemui pada if, for, switch, while, dan sebagainya. Logikanya, variabel dalam scope seharusnya menjadi private dan tidak bisa dibaca dari scope lain. Namun, mari kita coba membuktikan.

var b=2
if (true){
var b=3
}

console.log(b); // Output: 3

{codeBox}

Variabel var ternyata menjadi variabel global, meskipun ada di dalam scope. Sebelum ES6, solusinya adalah membuatnya dalam function scope.

var b=2
function myScope(){
var b=3
}
myScope()

console.log(b); // Output: 2

{codeBox}

Atau bisa dipersingkat dengan anonymous IIFE (Immediately Invoke Function Expression).

var b=2
(function(){
var c=3
})()

console.log(b); // Output: 2

{codeBox}

Let

Cara kerja let hampir sama dengan var, namun perbedaannya terletak pada scope-nya.

Variabel yang dideklarasikan dengan var memiliki scope yang terbatas pada fungsi tempat variabel tersebut dideklarasikan, sedangkan variabel yang dideklarasikan dengan let memiliki scope yang terbatas pada blok tempat variabel tersebut dideklarasikan (misalnya, blok if atau loop for). Anda dapat merujuk pada tabel di atas untuk melihat perbedaan scope antara var dan let.

Masalah #1: Reassign

Anda dapat menggunakan let untuk menghindari masalah reassign variabel seperti yang terjadi pada contoh dengan var di atas. Deklarasi variabel menggunakan let akan membatasi scope variabel pada blok dimana variabel tersebut dideklarasikan. Contohnya:

let foo ='hello1'

let foo ='hello' //=> SyntaxError: Identifier 'foo' has already been declared

{codeBox}

Dalam contoh ini, let tidak mengizinkan duplikasi deklarasi variabel foo dan menghasilkan SyntaxError. Ini membantu Anda menghindari bug yang tidak terduga karena reassign variabel.

Masalah #2: Hoisting

Anda tidak dapat menggunakan hoisting pada variabel yang dideklarasikan dengan let. Variabel let harus dideklarasikan terlebih dahulu sebelum digunakan. Jika Anda mencoba mengakses variabel let sebelum deklarasinya, maka akan menghasilkan ReferenceError. Contohnya:

let x

x = 10

console.log(10); // Output: 10

{codeBox}

Pada contoh ini, variabel x dideklarasikan terlebih dahulu sebelum diassign nilai 10 dan diakses di console.log. Ini karena variabel let tidak mengalami hoisting seperti variabel var.

Masalah #3: Scope

let adalah block scope, sehingga kita tidak perlu harus berurusan lagi dengan function untuk membuat local variabel.

let b=2

if (true){

    let b=3

}

console.log(b) //=> 2

{codeBox}

 

Dalam contoh ini, variabel b dideklarasikan terlebih dahulu di luar blok if dengan nilai 2, dan kemudian variabel b dideklarasikan kembali di dalam blok if dengan nilai 3. Namun, karena variabel b di dalam blok if memiliki scope yang terbatas hanya pada blok tersebut, maka saat diakses di luar blok if, nilai variabel b yang digunakan adalah nilai variabel b yang di deklarasikan di luar blok if.

menggunakan let tidak akan membantu karena variabel tanpa deklarasi dianggap sebagai variabel var. Oleh karena itu, sebagai seorang coder, Anda perlu berhati-hati dalam membuat variabel dan selalu mendeklarasikan variabel sebelum menggunakannya.

Const

Const atau Konstanta, dari namanya bisa di tebak. Variabel yang sifatnya tetap atau dengan kata lain nama dan isi dari variabel tidak bisa di ubah

const KEY=123
KEY = 456 //=> TypeError: Assignment to constant variable.
{codeBox}

Dalam contoh ini, variabel KEY dideklarasikan dengan nilai 123 sebagai konstanta. Ketika kita mencoba mengubah nilainya dengan meng-assign nilai baru 456, maka akan menghasilkan TypeError.

Namun, ketika variabel const berisi objek atau array, sifat konstan tersebut hanya berlaku pada variabel itu sendiri, bukan pada nilai-nilai di dalamnya. Artinya, Anda masih dapat mengubah nilai-nilai di dalam objek atau array tersebut, tetapi Anda tidak dapat mengubah variabel itu sendiri menjadi mengacu pada objek atau array yang berbeda. Contohnya:

const myObj = {name: 'John', age: 30}
myObj.age = 40 // Tidak ada TypeError, nilai age di dalam objek diubah menjadi 40
myObj = {name: 'Jane', age: 25} // TypeError: Assignment to constant variable.
{codeBox}

Dalam contoh ini, kita dapat mengubah nilai age di dalam objek myObj, tetapi ketika kita mencoba mengubah variabel myObj menjadi mengacu pada objek yang berbeda, maka akan menghasilkan TypeError.

ketika kita mendeklarasikan variabel dengan const, nilai dari variabel tersebut tidak dapat diubah setelah dideklarasikan. Namun, jika variabel const berisi objek atau array, sifat konstan tersebut hanya berlaku pada variabel itu sendiri, bukan pada nilai-nilai di dalamnya. Artinya, kita masih dapat mengubah nilai-nilai di dalam objek atau array tersebut.

Contohnya, ketika kita membuat variabel const obj yang berisi objek dengan property id dan name, kita masih dapat menambahkan property baru seperti location dan mengubah nilai dari property yang sudah ada seperti name:

const obj = { id:1, name:'jhon'}
obj.location="medan"
console.log(obj) //=> { id:1, name:'jhon',location:'medan'}
{codeBox}

Namun, ketika kita mencoba mengubah variabel obj menjadi mengacu pada objek yang berbeda, maka akan menghasilkan TypeError:

obj={} //=> TypeError: Assignment to constant variable.
{codeBox}

Hal yang sama berlaku untuk variabel const yang berisi array. Kita masih dapat menambahkan elemen baru ke dalam array, tetapi ketika kita mencoba mengubah variabel array menjadi mengacu pada array yang berbeda, maka akan menghasilkan TypeError:

const arr=[1,2,3,4]
arr.push(5)
console.log(arr) //=> [1,2,3,4,5]
arr=[] //=> TypeError: Assignment to constant variable.
{codeBox}

Jadi, perlu diingat bahwa variabel const memang tidak bisa di-assign ulang, tetapi nilai dan property dalam objek dan array yang di-assign ke variabel const masih dapat diubah karena sifatnya yang mutable.