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.

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.

KeywordScopeHoistingCan be reassignedCan be redeclared
varFunction scopeYesYesYes
letBlock scopeNoYesNo
constBlock scopeNoNoNo

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

RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed.

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

RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed.

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

RunKit

RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed.

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!

Leave a Reply

Your email address will not be published. Required fields are marked *