ES6 var,let,const, apa bedanya ?
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 ?
Jawaban singkatnya :
- gunakan let hindari var
- gunakan const untuk variabel yg nilainya statis atau tidak berubah
Jawaban panjangnya, yuk lanjut
Supaya lebih mudah disini saya sedikan tabel sebagai panduan dan kesimpulan dari tulisan ini
Sebelum ES6 hanya ada satu cara untuk membuat variabel
var x // declaration
x = 1 // assignment
atau bisa di singkat dengan cara :var x = 1
Hasilnya sama saja
Lalu bagaimana dengan tipe data ?
Javascript adalah bahasa yang dinamis untuk urusan tipe data. Tidak ada kewajiban untuk mendefenisikan type pada saat pembuatan variabel. Secara otomatis javascript akan menyesuaikan tipe data berdasarkan isi dari variabel tersebut.
Type data dalam Javascript ada 2 yaitu :
1. Primitives : String, Number, Boolean, Null, Undefined, Symbol
2. Object
var foo ='hello'
var bar = 123
var obj ={}
var arr=[]
console.log(typeof foo) //=> string
console.log(typeof bar) //=> number
console.log(typeof obj) //=> object
console.log(typeof arr) //=> object
Perhatikan code diatas, array dalam javascript juga di anggap object
Baik, sekarang mari kita uji seberapa dalam pemahaman anda tentang var. Apa hasil dari code berikut ?
x=10
var x
console.log(x) //=> ???
Jika hasil jawaban anda adalah error atau null, selamat anda salah. Jawaban yang benar adalah 10. Kok bisa ? namanya juga Javascript :D
The Problem with var
var memang terlihat simple, tapi ada beberapa kasus yang sering membuat bingung.
Problem #1 : Reassign
var foo ='hello1'
var foo ='hello2'
console.log(foo) //=> hello
Masalahnya disini tidak ada pesan error sama sekali ketika terjadi duplikasi variabel. Tentu ini cukup riskan jika terjadi tanpa sengaja.
Problem #2 : Hoisting
x=10
var x
console.log(x) //=> 10
Ini sama dengan yang sebelumnya. Kenapa hasilnya bisa 10 ? itu karena Hoisting. Hoisting artinya mengangkat. Jadi di belakang layar sebenarnya mengangkat var x di angkat keatas menjadi seperti ini :
var x
x=10
console.log(x) //=> 10
Kenapa ini jadi masalah ? ya karena membuat sebagian besar coder bingung.
Problem #3 : Scope
Block scope dalam javascript di tandai dengan simbol { }. Scope artinya pembagian program, ini sering di temui pada if, for, switch, while dan sebagainya. Logikanya variabel dalam scope harusnya menjadi private dan tidak bisa di baca dari scope lain. Tapi mari kita coba buktikan
var b=2
if (true){
var b=3
}
console.log(b) //=> 3
var ternyata menjadi global variabel, 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) //=> 2
atau bisa di persingkat dengan anymous IIFE
// Anymous IIFE ( Immediately Invoke Function Expression)
var b=2
(function(){
var c=3
})()
console.log(b)//=> 2
Problem #4 : Lupa deklarasi var = global
Apa jadinya jika variabel dibuat tanpa deklarasi terlebih dahulu ?
(function(){
b=3
})()
console.log(b)//=> 3
Variabel tanpa deklarasi dan langsung di assign akan di anggap menjadi global variabel. Ini karena hoisting. Global variable is evil. Sebisa mungkin hindari global variabel
Let
Cara kerja let hampir sama dengan var, bedanya di scope.
var adalah function scope, sedangkan let adalah block scope. ( lihat tabel diatas )
apakah let bisa digunakan untuk solusi dari problem var diatas ?
Mari kita coba problem var diatas dengan menggantinya menjadi let.
Problem #1 : Reassign
let foo ='hello1'
let foo ='hello2' //=> TypeError: Duplicate declaration "foo"
console.log(foo)
hasilnya type error, artinya let tidak akan mengijinkan anda membuat duplikasi varibel
Problem #2 : Hoisting
x=10
let x
console.log(x) //=> ReferenceError: x is not defined
hasilnya ReferenceError. Hoisting tidak berlaku pada let dab variabel let harus di defenisikan terlebih dahulu sebelum di assign atau eksekusi
Problem #3 : Scope
let adalah block scope, sehingga kita tidak perlu harus berurusan lagi dengan function untuk membuat local variabel. Mari kita buktikan
let b=2
if (true){
let b=3
}
console.log(b) //=> 2
Untuk problem #4 tidak bisa diselesaikan dengan let. variabel tanpa deklarasi dianggap var. Ini menjadi tanggung jawab anda sendiri sebagai coder untuk lebih berhati-hati dalam membuat variabel. Intinya setiap variabel harus di deklarasikan.
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.
const KEY=123
var KEY = 456 //=> TypeError: Assignment to constant variable.
tapi sorry bro, ini tidak berlaku untuk object dan array
const obj = { id:1, name:'jhon'}
obj.location="medan"
console.log(obj) //=> { id:1, name:'jhon',location:'medan'}
obj={} //=> TypeError: Assignment to constant variable.
const arr=[1,2,3,4]
arr.push(5)
console.log(arr) //=> [1,2,3,4,5]
arr=[] //=> TypeError: Assignment to constant variable.
Variabel const memang tidak bisa reassign, tapi value dan property dalam object bisa di rubah. Ini karena object dalam javascript adalah mutable. Jika anda ingin tahu lebih dalam tentang mutable dan immutable data silahkan baca tulisan saya disini