ES6 var,let,const, apa bedanya ?

Image for post
Image for post

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

Image for post
Image for post

Sebelum ES6 hanya ada satu cara untuk membuat variabel

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

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 ?

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

Masalahnya disini tidak ada pesan error sama sekali ketika terjadi duplikasi variabel. Tentu ini cukup riskan jika terjadi tanpa sengaja.

Problem #2 : Hoisting

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 :

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 ternyata menjadi global variabel, meskipun ada di dalam scope. Sebelum es6, solusinya adalah membuatnya dalam function scope

atau bisa di persingkat dengan anymous IIFE

Problem #4 : Lupa deklarasi var = global
Apa jadinya jika variabel dibuat tanpa deklarasi terlebih dahulu ?

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

hasilnya type error, artinya let tidak akan mengijinkan anda membuat duplikasi varibel

Problem #2 : Hoisting

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

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

tapi sorry bro, ini tidak berlaku untuk object dan array


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

Terimakasih telah membaca tulisan saya. Jika di rasa bermanfaat silahkan 👏 & share.

Image for post
Image for post

Coderupa

Panduan Praktis Belajar Javascript

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store