Cara menggunakan VARIABLS pada JavaScript

Di JavaScript kita bisa membuat variabel menggunakan kata kunci var, let, dan const, masing-masing memliki perilaku yang berbeda-beda.

Istilah variabel tidak hanya kita temukan di JavaScript, namun juga di bahasa pemrograman yang lainnya, ini berkaitan dengan cara kita menyimpan data di memori.

Kali ini kita akan belajar membuat variabel menggunakan ketiga kata kunci tersebut dan mengetahui seperti apa perilakunya agar kita bisa membuat variabel yang sesuai dalam kondisi yang tepat.

Pembahasan kali ini berisi beberapa topik lanjutan seperti hoisting dan scope, Anda tidak perlu memahaminya sekarang, namun ketahuilah bahwa istilah atau perilaku tersebut ada di JavaScript.

1. Apa Itu Variabel?
2. Cara Membuat Variabel
   1. Sintaks
   2. Aturan Penamaan Variabel
3. Deklarasi dan Inisialisasi
4. Dynamic Type
5. Perbedaan var, let, dan const
   1. var
   2. let
   3. const
6. Kapan Menggunakan var, let, dan const?

Apa Itu Variabel?

Dalam pemrograman komputer, variabel adalah wadah untuk menyimpan nilai atau data.

Ketika kita mendeklarasikan variabel, komputer akan menyisihkan memori untuk data yang kita simpan.

Di JavaScript kita bisa memasukkan data berupa string (teks), angka, objek, array dan lain sebagainya yang akan kita bahas pada bab tipe data.

Cara Membuat Variabel

Untuk membuat variabel di JavaScript kita bisa menggunakan kata kunci var, let, dan const, kata kunci ini digunakan untuk memberitahu mesin JavaScript bahwa kode yang kita tulis adalah variabel.

Contoh Variabel:

var nama = 'ucup';
let umur = 24;
const pekerjaan = 'petani';

Sintaks

kata_kunci nama_variabel = data;

Keterangan:

• kata_kunci var, let, atau const.
• nama_variabel adalah nama variabel yang bisa ditentukan sesuai keinginan kita, tapi harus sesuai aturan.
• = adalah operator assignment (penugasan).
• data adalah data yang ingin dimasukkan ke dalam variabel.
• ; digunakan untuk mengakhiri statement.

Aturan Penamaan Variabel

Nama variabel dapat dibuat sesuai keinginan, namun harus sesuai aturan:

• Boleh berisi huruf, angka, garis bawah, tanda dolar ($).
• Harus diawali dengan huruf, tanda dolar, atau underscore (_).
• Peka huruf besar dan kecil, variabel nama akan dianggap berbeda dengan Nama.
• Tidak boleh menggunakan reversed keyword atau kata-kata yang sudah digunakan oleh JavaScript seperti const, let, var, function, class, if, for dan sebagainya.

Nama variabel biasanya ditulis menggunakan gaya CamelCase, ini adalah konvensi penamaan yang digunakan oleh para programmer JavaScript, kita disarankan untuk mengikutinya.

Contoh nama variabel yang menggunakan gaya penulisan CamelCase: namaSaya, genrateLoginToken.

Jika nama variabel hanya mengandung satu kata, ditulis dengan huruf kecil semua. Jika lebih dari satu kata, huruf pertama dari kata kedua dan seterusnya ditulis menggunakan huruf besar.

Ini opsional, kita bisa menulisnya menggunakan huruf kecil atau besar semua, namun disarankan menggunakan CamelCase.

Deklarasi dan Inisialisasi

Ketika kita mendeklarasikan variabel, itu berarti kita meminta komputer untuk menyiapkan ruang kosong di memori, sedangkan inisialisasi adalah memasukkan data ke dalam ruang memori tersebut.

Kita bisa membuat atau mendeklarasikan variabel atau wadah terlebih dahulu, lalu menginisialisasinya atau memasukkan datanya nanti.

var buah; // deklarasi
buah = 'pisang'; // inisialisasi

Atau, bisa juga mendeklarasikan variabel dan menginisialisasinya secara langsung.

var buah = 'pisang'; // deklarasi dan inisialisasi

Data Dapat Diubah dengan Tipe yang Berbeda (Dynamic Type)

Di beberapa bahasa pemrograman, ketika kita membuat variabel dengan data angka, kita tidak bisa menggantinya dengan data selain angka.

Selain itu, kita juga perlu menuliskan secara eksplisit tipe data yang yang akan ditampung oleh sebuah variabel.

... ini disebut Static Type.

Namun di JavaScript hal tersebut tidak berlaku, kita bisa mengubah data di dalam variabel menggunakan data dengan tipe yang berbeda, dan kita tidak perlu menuliskan tipe data secara eksplisit saat membuat variabel.

... ini disebut Dynamic Type.

Namun ini hanya bisa dilakukan jika variabel dibuat menggunakan kata kunci var atau let.

Contoh di bawah ini mengganti data yang awalnya angka menjadi string:

let umur = 24;
umur = 'dua puluh empat';

Perbedaan var, let, dan const

Banyaknya kata kunci yang bisa digunakan untuk membuat variabel tentunya bukan tanpa alasan, masing-masing memiliki perilaku yang berbeda-beda.

Singkatnya, inilah perbedaannya:

Mari kita pelajari lebih lanjut...

var

Sebelum JavaScript ES6 muncul, kita hanya bisa membuat variabel menggunakan kata kunci var. Tapi, variabel yang dibuat menggunakan kata kunci tersebut memliki beberapa kekurangan.

Itulah mengapa kata kunci baru diperkenalkan. Pertama, mari kita pelajari terlebih dahulu perilaku variabel var.

Dapat Dideklarasikan Ulang

Ketika variabel dibuat dengan kata kunci var, kita bisa mendeklarasikan ulang variabel dengan nama yang sama, nilai sebelumnya akan ditimpa.

var nama = 'renova';
var nama = 'reza';
console.log(nama); // reza

Nilai Dapat Diubah

Variabel yang dideklarasikan menggunakan kata kunci var dapat diubah nilainya, entah itu menggunakan data dengan tipe yang sama maupun berbeda.

// sama tipe data
var nama = 'renova';
nama = 'reza';
console.log(nama); // reza

// beda tipe data
var umur = 19;
umur = 'sembilan belas';
console.log(umur); // sembilan belas

Function Scope

Kode yang kita tulis dikatakan berada di dalam function scope (lingkup fungsi) jika berada di antara { dan } sebuah fungsi.

Ketika variabel var dideklarasikan di dalam lingkup fungsi, variabel tersebut hanya bisa digunakan di dalam lingkup fungsi tersebut, tidak bisa digunakan di luar fungsi.

Ini sebetulnya juga berlaku untuk let dan const, variabel yang dideklarasikan dengan kata kunci apa pun di dalam fungsi tidak dapat diakses diluar fungsi.

function iniFungsi() {
  // function scope
  var nama = 'reza';
}

// global scope
console.log(nama); // Uncaught ReferenceError: nama is not defined

Namun berbeda dengan let dan const, variabel var dapat diakses di luar block scope.

Variabel dikatakan berada di dalam block scope jika berada di antara { dan } conditional statement (if, else, else if), perulangan (for, while, do while), switch statement, dan sebagainya selain lingkup fungsi atau global.

// global scope
var nama = 'reza';

if (true) {
  // block scope
  var nama = 'ucup';
}

// global scope
console.log(nama); // ucup

Disinilah masalahnya, mari kita gunakan contoh kode di atas.

Jika kita secara sadar ingin mendeklarasikan ulang variabel nama ini tidak menjadi masalah.

Tapi, bagaimana jika niat kita ingin membuat variabel baru bernama nama di dalam block scope sementara variabel dengan nama tersebut sudah dideklarasikan sebelumnya?

Jika itu terjadi seperti kode di atas, ini membuat nilai pada variabel sebelumnya berubah.

Jika kita telah menggunakan variabel nama di bagian lain dari kode yang telah kita buat, ini bisa menjadi masalah dan menyebabkan bug. Itulah sebabnya let dan const hadir.

Hoisting (Diangkat)

Hoisting adalah istilah yang digunakan untuk menggambarkan tentang bagaimana konteks eksekusi bekerja di JavaScript.

Deklarasi variabel dan fungsi akan diangkat (hoisting) ke atas cakupannya sebelum eksekusi kode.

Sebelum eksekusi, JavaScript akan mencari variabel var dan Function Declaration terlebih dahulu, kemudian menginisialisasinya dengan nilai undefined.

Untuk memudahkan pemahaman, Anda dapat menggunakan alat yang dapat memvisualisasikan eksekusi kode JavaScript.

Mari kita lihat contoh kode di bawah:

console.log(nama); // undefined
var nama = 'reza';

Ingat undefined adalah salah satu nilai atau tipe data.

Lantas, mengapa JavaScript menginisialisasinya dengan nilai tersebut padahal kita tidak pernah menuliskannya.

Selain itu variabel var nama = 'reza'; juga dideklarasikan sebelum console.log(nama); secara logika harusnya kita tidak bisa menggunakan variabel tersebut.

Inilah yang dimaksud dengan istilah hoisting (diangkat).

Berikut langkah-langkah yang dilakukan JavaScript untuk mengeksekusi kode diatas:

1. Sebelum eksekusi, angkat dan inisialisasi variabel var dengan nilai undefined.
2. Eksekusi console.log(nama).
3. Inisialisasi dengan nilai dari variabel tersebut.

let

Kata kunci let biasanya digunakan untuk membuat variabel yang nilainya dapat diubah. Ini diperkenalkan untuk mengatasi masalah var yang telah dibahas sebelumnya.

Tidak Dapat Dideklarasikan Ulang

Berbeda dengan var, variabel yang dibuat dengan kata kunci let tidak dapat deklarasikan ulang.

let nama = 'reza';
let nama = 'renova'; // Uncaught SyntaxError: Identifier 'nama' has already been declared

Nilai Dapat Diubah

Sama seperti var, variabel yang dideklarasikan menggunakan let nilainya dapat diubah menggunakan data dengan tipe yang sama maupun berbeda.

let umur = 19;
umur = 'sembilan belas';
console.log(umur); // sembilan belas

Block Scope

Variabel let yang dideklarasikan di dalam block scope hanya bisa digunakan di dalamnya, tidak bisa digunakan di luar.

if (true) {
  let nama = 'reza';
  console.log(nama); // reza
}

console.log(nama); // Uncaught ReferenceError: nama is not defined

Hoisting (Tidak Diangkat)

Variabel let tidak diangkat (hoisting) seperti var, jadi kita tidak bisa mengakses variabel sebelum deklarasi.

console.log(nama); // Uncaught ReferenceError: Cannot access 'nama' before initialization
let nama = 'reza';

const

Sama seperti let, namun nilai variabel const tidak dapat diubah.

Tidak Dapat Dideklarasikan Ulang

Kita tidak bisa mendeklarasikan ulang variabel const.

const nama = 'renova';
const nama = 'reza'; // Uncaught SyntaxError: Identifier 'nama' has already been declared

Nilai Tidak Dapat Diubah

Nilai variabel yang dibuat menggunakan const tidak dapat diubah.

const nama = 'renova';
nama = 'reza'; // Uncaught TypeError: Assignment to constant variable.

Namun kita bisa mengubah elemen yang ada di dalam array:

const warga = ['ucup', 'reza', 'otong'];
warga[1] = 'budi';
console.log(warga); // ["ucup", "budi", "otong"]

Begitu pula dengan objek:

const mahasiswa = {
  nama: 'ucup',
  umur: 19,
};
mahasiswa.umur = 10;
console.log(mahasiswa); // {nama: "ucup", umur: 10}

Block Scope

Sama seperti let, variabel const yang dideklarasikan di dalam block scope hanya bisa diakses di dalamnya, tidak bisa diakses di luar.

if (true) {
  const nama = 'reza';
  console.log(nama); // reza
}

console.log(nama); // Uncaught ReferenceError: nama is not defined

Hoisting (Tidak Diangkat)

Soal hoisting juga sama seperti let, variabel const tidak dapat digunakan sebelum dideklarasikan.

console.log(nama); // Uncaught ReferenceError: Cannot access 'nama' before initialization
const nama = 'reza';

Kapan Menggunakan var, let, dan const?

Anda harus memprioritaskan kata kunci const saat membuat variabel dibanding yang lain, karena lebih ketat, sehingga bug di dalam kode kita dapat diminimalisir.

Kecuali jika Anda ingin nilai dari variabel dapat diubah dan nilai tersebut bukan array atau objek, karena dengan const kita tetap bisa mengubah elemen di dalam array dan nilai atau properti di dalam objek.

Namun jika Anda ingin variabel tersebut dapat diubah apa pun tipe datanya, Anda bisa menggunakan kata kunci let.

Penggunaan var sebisa mungkin dihindari, kecuali ada alasan tertentu yang mengharuskan Anda menggunakan kata kunci tersebut dan membutuhkan perilaku yang dimilikinya.