Perbedaan Var, Let, Const Javascript ES6

Javascript ES6 – Kali ini MID Teknologi akan membahas tentang let dan const yaitu variable baru pada javascript dan apa sih perbedaannya dengan var? ES6 atau ES 2015 datang dengan segudang fitur, salah satunya adalah let dan const yang akan menjadi the next var yang digunakan sebagai deklarasi variable di javascript.

pada kesempatan kali ini kita akan membahas tentang use (keguaannya),scoop (ruang lingkupnya) dan hoisting(pengangkatan).

secara garis besar perbedaan var let const pada javascript adalah:

• var bersifat global,dapat di ubah dimana pun. memiliki sifat hoisting dan dapat di deklarasikan ulang dimana pun.
• let bersifat scoop area, dapat di ubah. tidak dapat di deklarasikan ulang.
• const bersifat scoop area, immutable (tidak dapat dirubah), tidak dapat di deklarasikan ulang. biasa digunakan untuk object.

sekarang mari kita bahas penjelasan lebih detailnya.

Kelemahan Var dalam Javascript

Problem 1:Penggunaanya

Dalam penggunaan var kita bisa mendeklarasikan satu variable yang sama berulang ulang, yang terkadang membuat bingung si developernya sendiri, contoh

var hello = "selamat datang";
hello = "hallo bro";

console.log(hello)//=>"hallo bro"

var hello2 = "selamat datang";
var hello2 = "hallo bro";

console.log(hello2)//=>"hallo bro"

dalam bahasa pemrograman lain jika kamu menulis sesuatu seperti diatas maka akan terjadi error.

namun di javascript tidak, justru hal tersebut sama halnya dengan memberi nilai ulang terhadap suatu variable.

Problem 2: Hoisting / pengangkatan

dalam penggunaan var dalam javascript pertama kali yang dijalankan di dalam sistem adalah mencari pendeklarasian variable di seluruh block kode terlebih dahulu.

setelah itu baru memberi nilai ke dalam variable tersebut, Contoh:

var x = 0;
x = 1

console.log(x) //=>1
y = 0
var y = 1

console.log(y)//=>1

jika anda jalankan blok kode diatas tidak akan terjadi error, kenapa,?padahal variable y diberi nilai terlebih dahulu sebelum di deklarasi?

itu karena hal yang saya bilang sebelumnya, yaitu javascript akan mencari seluruh deklarasi variable di dalam blok kode tsb lalu mencari nilainya.

tentu saja hal ini tidak bagus, karena bisa membuat bingung si pembuatnya sendiri.

Problem 3:Scoop / ruang lingkup

dalam javascript kode yang berada di antara kurung kurawal “{}” seperti if,else,for,while.dsb harusnya memiliki scoop tersendiri.

jadi jika kita mendeklarasikan sebuah variable maka variable tersebut akan bersifat private.

namun hal tsb tidak berlaku di dalam javascript, yang akan dicontohkan dibawah.

var data = 1;
var x = True;
if(x){
   var data = 3;// variable ini harusnya menjadi variable tersendiri
}
console.log(data)//=>3

jadi pada saat kita mendeklarasi variable di dalam {} maka variable diluarnya akan diberi nilai ulang (reassign)

Problem 4: Global Variable

dahulu sebelum ES6 keluar jika kita memberi nilai terhadap suatu variable dan variable tersebut tidak di deklarasikan maka variable tersebut akan bersifat global, Contohnya

(function(){
  c=3
})()
console.log(c)//=> 3

tentunya hal tsb sangat mengganggu, karena bisa merusak blok kode lain, hal ini terjadi karena sifat hoisting javascript yang sudak dijelaskan sebelumnya.

LET

Let hadir sebagai penyempurnaan dari var dalam segi scoop,use dan hoisting

sebelumnya jika kita mendeklarasikan suatu variable di dalam kurung kurawal “{}” maka variable tersebut akan menjadi global variable.

dan tentunya kita tidak ingin itu terjadi, akan saya jelaskan dengan blok kode dibawah

let data = 1;
let x = True;
if(x){
   let data = 3;
   console.log(data);//=>3
}
console.log(data);//=>1

dilihat dari blok kode diatas variable data sama sekali tidak terpengaruh dengan deklarasi variable yang sama di dalam if

jadi pada saat kita memanggilnya di dalam dal luar {} maka hasilnya akan berbeda.kenapa?

itu karena keduanya dianggap sebagai variable yang berbeda, hal itulah yang membuat let lebih baik dibanding var. jadi kita tidak perlu mendeklarasikan nama variable baru di dalam scoop yang berbeda.

Let tidak dapat di deklarasikan ulang

sama seperti var, let juga dapat di beri nilai ulang di dalam scoop yang sama, namun let tidak bisa di deklarasi ulang. Contoh

//let bisa diberi nilai ulang
let data = 1;
data = 2;
console.log(data)//=>2

//let tidak bisa di deklarasikan ulang
let data2 = 1;
let data2 = 2;//=> TypeError: Duplicate declaration "data2"

Const

Const atau konstanta adalah sebiah variable yang memiliki nilai tetap, alias tidak dapat di ubah.

const data = 110;
data = 111;//=> TypeError: Assignment to constant variable.

tapi dalam penggunaanya sendiri const lebih sering digunakan untuk mendeklarasikan suatu object/array.

Const sebagai object

sifat imutable const tidak berlaku lagi jika const digunakan sebagai object, dengan kata lain kita bisa merubah isinya selama masih di dalam scoopnya.

const greeting = {
        message : "say Hi",
        times : 4
    }
greeting.message = "hello world";
console.log(greeting.message)//=>"hello world"

dalam penggunaanya kita juga bisa mendeklarasikan const sebagai object kosong dan memberi nilainya di baris berikutnya, selama masih satu scoop

const greeting = {}
greeting.number = 1;
greeting.name = "rifaldy";

sekian tutorial tentang perbedaan var,let dan const pada javascript ES6 selengkapnya kamu bisa baca di dev.to.

kamu juga bisa membaca tutorial lainnya tentang java script disini dan tentang react disini.

jika kamu memiliki pertanyaan silahkan tulis di kolom komentar, terimakasih.