Variable Javascript: Var, Let dan Const

Mengawali pembelajaran terhadap suatu Bahasa pemograman apapun, harus mengenal tentang variable.

Apa itu variable? 

Apa kegunaan dari variable? 

Bagaimana cara menggunakan variable?

Ketiga indikator tersebut harus betul-betul dipahami. Mari kita mulai dengan Apa itu Variable.

Variable adalah sebuah konsep dapat diibaratkan wadah atau tempat didalam pemograman yang berguna untuk penyimpanan data atau sebuah potongan informasi. Kemudian disimpan pada memori komputer selama program tersebut berjalan. Jika diilustrasikan maka penggambarannya bisa dilihat pada gambar dibawah ini.

Ilustrasi dari ketiga gelas diatas menggambarkan sebuah variable, dimana gelas pertama merupakan penggambaran variable yang tidak diberikan nilai (dalam javascript bisa disebut undefined). 

Dan pada gelas berikutnya berisikan dua jenis minuman yang berbeda dan sama halnya dengan variable yang dapat menampung nilai apapun baik tipe data berupa number, string, boolean, null, undefined, Symbol, array maupun object.

Dalam penggunaan variable harus dideklarasikan dengan cara memberikan identitas atau memberikan nama sebagai tanda pengenal variable. Penamaan variable harus unik dan tidak boleh sama, variable pada javscript juga perlu dikenalkan agar kita dapat mengisi suatu nilai dan dapat menggunakan variable.

Penamaan terhadap sebuah variable disebut dengan identifier. Berikut ini adalah contoh deklarasi variable dalam javascript.

Mendeklarasikan suatu variable dalam javascript terdapat 3 cara, yaitu dapat menggunakan keyword var, let dan const. 

Ketiga keyword dalam mendeklarasikan variable memiliki perbedaannya masing-masing. Mari kita membahas perbedan-perbedaan tersebut.

Menggunakan Var

Sebelum diperkenalkan fitur-fitur ES6 dalam javascript, untuk mendeklarasikan sebuah variable yakni menggunakan keyword var.

var mahasiswa = “iqbal”;

Anda juga dapat mendeklarasikan variable dalam satu statement.

var nama = "iqbal", kelas = 10;

console.log(nama); // output -> iqbal 
console.log(kelas); // output -> 10

Untuk penulisan variable dalam satu baris statement tidak disarankan.

Karena menurut saya penulisan kode seperti ini akan membuat programmer lain akan kesulitan membaca kode kita jika ditulis seperti itu.

Untuk saat ini, penggunaan var dianggap tidak efektif lagi dalam mendeklarasikan variable. Dikarenakan beberapa kasus seperti saat anda lupa menggunakan var dalam mendeklarasikan sebuah variable, maka anda telah meletakan sebuah value pada undeclared variable.

mahasiswa = "iqbal"; // output -> iqbal

// contoh undeclared variable

Kode diatas tidak error, karena javascript akan menganggap ini sebagai variable global. Dalam sebuah envirotment modern apabila bila anda mengaktifkan mode ketat dengan perintah use strict. Pendeklarasian terhadap variable tanpa var akan menjadi error.

Perhatikan kode berikut ini

'use strict'

nama = 'iqbal'; // output -> ReferenceError: nama is not defined

Kode diatas akan menampilkan error karena javascript tidak mengenali “nama” yang tidak terdefenisikan. Pada permasalahan demikian anda perlu menginisialisasi “nama” sebagai variable baik menggunakan var, let ataupun const.

Ada lagi permasalahan yang ditimbulkan penggunaan keyword var dalam deklarasi variable. Seperti anda dapat mendeklarasikan ulang dengan identifier yang sama seperti contoh berikut ini.

var nama = "iqbal";

var nama = "niyaz";

console.log(nama); // output -> niyaz 

Potongan kode diatas akan menghasilkan output “niyaz”. Meskipun deklarasi awal variable nama diberikan nilai “iqbal”. Akan tetapi kita dapat mendeklarasikan ulang variable dengan identifier yang sama yakni nama dan memberikan value yang berbeda dalam hal ini disebut sebagai reassign.

Reassign adalah cara penulisan kode yang buruk. Karena dalam kasus dengan baris kode yang kompleks maka aktivitas maintenance kode akan menjadi rumit ketika mengalami bug atau saat melakukan pengembangan aplikasi.

Beberapa point diatas telah menunjukan kelemahan dari var, yaitu reassign dan undeclared variable.

Namun akan ada permasalahan lainnya jika masih mempertahankan penggunaan var. Maka kita harus memahami konsep hoisting dan scope pada javascript.

Kedua konsep ini juga akan memberi penjelasan tentang perbedaan penggunaan var dan let.

  • Scope adalah ruang lingkup, dalam javascript variable yang di inisialisasi dengan menggunakan var akan ditugaskan menjadi objek global. Untuk membatasi penggunaan variable agar tidak menjadi objek global adalah kita memerlukan ruang lingkup baru, yaitu dengan cara membuat fungsi untuk membatasi ruang lingkup tersebut.  Untuk penjelasannya dapat memperhatikan kode dibawah ini.
var nama = "iqbal";

// membuat fungsi namaOrang
function namaOrang() {
    var nama = "niyaz";
    console.log(nama)
}

// menampilkan fungsi namaOrang
namaOrang(); // output -> niyaz

// menampilkan variable nama 
console.log(nama); // output -> iqbal

kode diatas menunjukan bahwa kita dapat membuat variable nama dengan value “iqbal” yang bertugas sebagai global objek / global variable. Namun variable nama yang berada dalam fungsi namaOrang akan membuat suatu ruang lingkup yang baru sehingga variable nama menjadi local variable yang hanya dapat digunakan hanya didalam fungsi.

Perlu untuk diketahui bahwa inisialisai variable dengan var akan menjadikannya sebagai function scope, artinya kita perlu membuat fungsi agar variable dalam fungsi tersebut menjadi local, sehingga memiliki batasan dan hanya dapat digunakan pada fungsi tersebut.

  • Hoisting, jika anda mendeklarasikan sebuah variable pada javascript maka yang terjadi adalah javascript mengangkat semua variable keatas kemudian mengeksekusinya. Meskipun anda menempatkan variable diakhir baris kode maka javascript akan tetap mengangkat variable keatas sebelum mengeksekusinya.
hallo = "hello world" // mengisi variable hallo 

console.log(hallo); // menampilkan variable hallo

var hallo // variable hallo akan diangkat keatas sebelum dieksekusi

berikut adalah penjelasan mengapa anda harus menginggalkan penggunaan var untuk membuat variable.

next kita lanjutkan penggunaan let.

Kuy lah…..

Menggunakan Let

Let adalah fitur baru yang diperkenalkan oleh ES6 yang pada dasarnya pengembangan dari var.

Perbedaannya ada pada scope, apabila var cangkupannya adalah function scope, bila berada diluar dari fungsi akan dinyatakan sebagai global objek. Berbeda halnya dengan let yang cangkupannya adalah block scope.

Block scope dengan menggunakan let yaitu cangkupanya terbatas pada block tempat variable let didefenisikan. Sehingga dengan konsep block scope yang dianut oleh let dapat menjadi solusi atas permasalahan yang dialami oleh var.

Seperti halnya jika kita deklarasi dengan identifier yang sama.

let nama = "iqbal"; 

let nama = "niyaz";

console.log(nama); // output -> SyntaxError: Identifier 'nama' has already been declared

Reassign pada indentifier yang sama seperti kasus kode diatas hanya berlaku dengan apabila kita menggunakan var.

Akan tetapi apabila menggunakan let akan mendapatkan error,  sebab variable nama telah dideklarasikan dan anda tidak dapat melakukan deklarasi variable dengan identifier yang sama.

Dalam pengembangan javascript modern sebaiknya tidak menggunakan var untuk mendeklarasikan sebuah variable. Para programmer javascript seharusnya menggunakan let untuk mendeklarasikan variable. Karena let menganut block scope sehingga anda tidak perlu membuat function untuk membuat local variable.

Konsep hoisting juga tidak berlaku dalam let. Perhatikan kode berikut ini.

nama = "iqbal"; 

let nama;

console.log(nama); // output -> ReferenceError: nama is not defined

Mana yang lebih baik dari var atau let?

Sebaiknya anda beralih menggunakan let pada saat initialisasi sebuah variable!

Udah capek? eits…. masih sisa satu pembahasan lagi tentang const. Jom kita lanjut?

Kuy lah….

Menggunakan Const

Mudahnya dalam memahami const adalah anda tidak dapat merubah isi dari variable.

Apabila var dan let dapat melakukan perubahan isi suatu variable maka const tidak dapat melakukannya. Karena const sesuai dengan singkatannya yakni konstanta yang berarti tetap.

const nama = "iqbal"; 

nama = "niyaz"; 

console.log(nama); // output -> TypeError: Assignment to constant variable.

Namun terdapat pengecualian terhadap tipe data object (array dan object). Variable const akan mengijikan untuk melakukan perubahan data sesuai dengan method yang telah disediakan oleh array maupun object dan ini disebut dengan mutable.

Agar mudah dipahami perhatikan kode berikut ini contoh mutable dengan object.

const mahasiswa = {
    nama: 'iqbal',
    kelas: 304,
}

mahasiswa.fakultas = 'informatika'

console.log(mahasiswa); 
// output -> { nama: 'iqbal', kelas: 304, fakultas: 'informatika' }

Dan ini adalah mutable dengan array.

const mahasiswa = ['iqbal', 'niyaz'];

mahasiswa.push('dwi');

console.log(mahasiswa);
// output > [ 'iqbal', 'niyaz', 'dwi' ]

Const tidak memberikan Immutable (tidak bisa berubah) pada tipe data objek adalah memastikan bahwa referensi tidak dirubah asalkan terdapat method yang diijinkan untuk melakukan perubahan pada objek tersebut.

Mana yang akan saya pilih var, let dan const?

Saya kecenderungan menggunakan const untuk mendeklarasikan sebuah variable.

Alasan saya adalah const adalah konstruksi yang sangat sederhana dalam mendeklarasi variable, artinya saya menempatkan variable hanya sekali untuk fungsi tertentu saja. Namun adakalanya saya juga menggunakan let pada kasus-kasus tertentu.

Untuk var sebaiknya anda menghindari atau tidak menggunakannya lagi.

 

Advertisements

1 thought on “Variable Javascript: Var, Let dan Const”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s