Memahami Variable, Scope, dan Hoisting di JavaScript

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.

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.

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.

Hasilnya akan berbeda jika kita menggunakan var dalam contoh di atas.

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.

Sebenarnya apa yang dilihat JavaScript adalah seperti berikut

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.

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.

Berbeda hasilnya bila kita menggunakan let ataupunconst, dia tidak akan terpengaruh dengan hoisting.

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.

Walapun tidak dapat di-reassign, namun ada pengecualian terhadap tipe data object dalam const yang bersifat mutable.

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!

ES6 JavaScript

astronoix

catatan penunda lupa

Memahami Variable, Scope, dan Hoisting di JavaScript

RunKit

Scope

RunKit

RunKit

RunKit

Hoisting

RunKit

RunKit

RunKit

RunKit

RunKit

Constants

RunKit

RunKit

RunKit

Leave a Reply Cancel reply