Variable atau variabel dalam bahasa Indonesia, yaitu suatu wadah yang memiliki nama untuk menyimpan value yang akan kita pakai dalam suatu program. Dalam JavaScript, value di dalam variabel bisa berupa tipe data apa pun termasuk number, string, ataupun object.
Sebelum ES6, hanya ada satu cara untuk mendeklarasikan suatu variabel yaitu dengan var, namun saat ini sudah diperkenalkan keyword yang lain let dan const yang akan kita bahas saat ini.
Kita dapat menggunakan var untuk mendemonstrasikan konsep variabel itu sendiri. Contoh berikut akan menjelaskan strukturnya dengan jelas seperti deklarasi suatu variabel dengan value di dalamnya.
RunKit
RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed.
Statement di atas terdiri dari beberapa bagian:
- Deklarasi variabel menggunakan
var - Nama variabel (identifier),
movieTitle - Operator assignment, diwakili dengan syntax
= - Value yang di-assign,
"Inception"
Secara garis besar perbedaan var, let, dan const berdasarkan scope, hoisting, dan reassignment.
| Keyword | Scope | Hoisting | Can be reassigned | Can be redeclared |
var | Function scope | Yes | Yes | Yes |
let | Block scope | No | Yes | No |
const | Block scope | No | No | No |
Scope
Scope dalam JavaScript adalah konsep yang digunakan untuk membatasi pengaksesan suatu variabel. Ada dua tipe scope yaitu lokal dan global.
- Global variables adalah variabel yang dideklarasikan di luar blok.
- Local variables adalah variabel yang dideklarasikan di dalam suatu blok bisa berupa function-scoped atau block-scoped.
Contoh berikut akan memberikan penjelasan bagaimana value dalam var akan berbeda tergantung scope-nya dan value original pun tidak berubah.
RunKit
Initialize a global variable var digimon = “Agumon”; function evolution() { // Initialize a local, function-scoped variable var digimon = “Greymon”; console.log(digimon); } // Show the result console.log(digimon); evolution(); console.log(digimon); no comments
Variabel yang dideklarasikan dengan var jika di dalam suatu fungsi tidak dapat diakses dari luar atau disebut function-scoped . Untuk let dan const yang merupakan block-scoped (konten di dalam curly brackets {} ) bukan hanya dalam fungsi saja mereka tidak dapat diakses secara global namun semua jenis blok seperti statemen if, for, dan while loops.
RunKit
var trigger = true; // Initialize a global variable let digimon = “Agumon”; if (trigger) { // Initialize a block-scoped variable let digimon = “Greymon”; console.log(`Evolution triggered, you are become ${digimon}.`); } console.log(`Evolution failed, you are still ${digimon}.`);
Hasilnya akan berbeda jika kita menggunakan var dalam contoh di atas.
RunKit
var trigger = true; // Initialize a global variable var digimon = “Agumon”; if (trigger) { // Attempt to create a new variable in a block var digimon = “Greymon”; console.log(`Evolution triggered, you are become ${digimon}.`); } console.log(`Evolution failed, you are still ${digimon}.`);
Global maupun block-scoped variabel menampilkan nilai yang sama yaitu “Greymon”, karena dengan var tidak menganggap dalam if merupakan blok yang berbeda, jadi kita disini hanya melakukan reassign terhadap variabel tersebut. Direkomendasikan untuk mendeklarasikan variabel dengan jenis block-scoped jadi kita dapat terhindar melakukan override pada value dalam suatu variabel tanpa kita duga.
Hoisting
Kita telah menggunakan var untuk mendeklarasikan suatu variabel, dan menginisialisasinya denga suatu value, setelah itu baru kita dapat mengaksesnya atau reassign variabel tersebut.
Jika kita menyoba untuk menggunakan variabel sebelum dideklarasikan dan diinisialisasikan maka akan menghasilkan undefined.
RunKit
RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed.
Sebenarnya apa yang dilihat JavaScript adalah seperti berikut
RunKit
RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed.
Lalu jika kita tidak mendeklarasikannya namun menginisialisasinya maka akan menghasilkan ReferenceError dan akan menghentikan jalannya program. Hoisting hanya akan memindahkan ke atas scope suatu deklarasi variabel bukan inisiasinya.
RunKit
RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed.
Contoh lain jika kita mendeklarasikan secara global x = 100. Tergantung dari statement if, bisa saja x menjadi 200, tapi karena kondisinya false jadi nilai x tidak akan berubah. Namun x ter-hoisting dan nilainya menjadi undefined. Maka dari itu hal sepertinya bisa saja menjadi bugs yang tidak terduga-duga.
RunKit
RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed.
Berbeda hasilnya bila kita menggunakan let ataupunconst, dia tidak akan terpengaruh dengan hoisting.
RunKit
RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed.
Jadi dengan adanya let dan const kita jadi bisa lebih aman dalam mendeklarasikan variabel, karena tidak akan terpengaruh hoisting dan juga dia akan mengeluarkan error bila mencoba menggunakan variabel sebelum mendeklarasikannya atau mencoba mendeklarasikan variabel lebih dari sekali.
Constants
Lanjut gan, sekarang saya akan bahas const atau konstanta yang berarti bernilai tetap. Umumnya untuk menulis identifier const dengan huruf kapital semua atau uppercase untuk membedakannya dengan variabel yang lain const UNIVERSE = "Digimon". Seperti sudah dijelaskan di atas const tidak dapat dideklarasikan ulang atau pun di reassign, jika kalian memaksa kalian akan mendapatkan error.
RunKit
RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed.
RunKit
RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed.
Walapun tidak dapat di-reassign, namun ada pengecualian terhadap tipe data object dalam const yang bersifat mutable.
RunKit
RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed.
Jadi kesimpulannya const sangat membantu untuk kedepannya bila ada rencana bahwa variabel tersebut tidak boleh di-reassign. Jika kita berencana bisa mengubahnya di kemudian hari yah pakai saja let untuk mendeklarasikan suatu variabel.
DISCLAIMER: Konten ini saya tulis dari beberapa sumber namun paling utama dari artikel DigitalOcean ini yah!