Variables Pada JavaScript

by

Lesson variables pada JavaScript dibuat karena cara compiler JavaScript melihat variable agak berbeda dari bahasa pemograman lainnya.

Pada lesson sebelumnya kita melihat konsep tentang variable yang belum didefinisikan dan bagaimana menyebabkan error.

//code-01
console.log(myVar);

//code-02
console.log(myVar);
var myVar;

//code-03
console.log(myVar);
var myVar = 10;

Jika code-01 dijalankan akan menyebabkan error. Namun apa yang terjadi bila code ditambahkan seperti pada code-02

Ketika code-02 dijalankan, cukup mengherankan, ternyata tidak terjadi error. JavaScript akan mengembalikan informasi undefined. Aneh bukan? Mari kita buat lebih aneh, kita assign value pada variable tersebut (lihat code-03).

Apa yang terjadi ketika code-03 dijalankan? Kita tetap mendapatkan nilai undefined. Kenapa hal ini terjadi? Padahal kita tahu baris deklarasi variable tersebut dijalankan oleh compiler, namun bagian inisialisasi value tidak dijalankan.

Behaviour ini disebut hoisting, dimana JavaScript akan menjalankan semua deklarasi variable pada scope saat ini. Agar lebih jelas, mari kita lihat aturan dari ECMAScript tentang hoisting

“A var statement declares variables that are scoped to the running execution context’s Variable Environment. Var variables are created when their containing Lexical Environment is instantiated and are initialized to undefined when created.”

ECMAScript Standard

Ada 2 point penting dari standar diatas,

  • variables are created when their containing lexical environment is instantiated: variable akan dibuat saat environment (dimana variable berada) dicreate.
  • initilazed to undefined when created: variable akan diinisialisasi ke undefined.

Kembali ke code-03 diatas, dilihat dari kacamata compiler, maka prosesnya akan seperti berikut:

  • Compiler akan membuat scope baru, pada kasus ini global scope.
  • Compiler akan scan baris console.log(myVar).
  • Lalu kebaris var myVar = 10, compiler melihat ada deklarasi variable. Variable akan dibuat sesuai aturan ECMAScript diatas, yaitu myVar = undefined.
  • Karena ini baris terakhir, compiler akan kembali kebaris atas yaitu console.log(myVar).
  • Kali ini compiler akan menjalankan code. Perintah console.log(myVar) akan menghasilkan undefined.
  • Lalu ke baris berikutnya, compiler melihat deklarasi variable lagi, namun kali ini variable sudah ada (sudah dideklarasikan pada proses sebelumnya). Oleh karena itu compiler akan menjalankan perintah myVar = 10 saja.

Nah, jadi sampai disini kita paham kenapa hasil code-03 adalah undefined. Mari kita tambah sedikit kerumitan tentang dengan menambahkan function.

//code-04
var myVar = 10;

function func(){
   myVar = 25;
 }

console.log(myVar);

//code-05
var myVar = 10;

function func(){
   myVar = 25;
 }
func();
console.log(myVar);

Pada code-04, program akan mengembalikan nilai 10. Pada code-05,karena function func() dipanggil maka hasilnya adalah 25. Untuk code-04 apa yang sudah cukup jelas, mari kita bahas code-05.


Pada saat masuk ke fungsi func(), compiler akan memeriksa, apakah ada variable deklarasi pada function scope? Jika tidak ada, maka compiler akan melihat ke scope diatasnya, pada contoh ini adalah global scope.

Pada scope tersebut ada variable yang dimaksud, maka perintah assign value pada fungsi func() akan dijalankan. Setelah itu perintah console.log(myVar) dijalankan, ini sebabnya nilai 25 dicetak ke console.

Sekarang mari bereksperimen dengan menambahkan deklarasi variable pada function seperti pada code berikut.

//code-06
var myVar = 10;

function func(){
  myVar = 25;
  var myVar;
 }
func();
console.log(myVar);

Apa yang dilakukan compiler pada baris code-06? Mari kita lihat step-by-step:

  • Compiler akan mendeklarasikan myVar dan inisialisasi 10.
  • Lalu masuk ke perintah func(). Dari sini compiler akan masuk ke block function func().
  • Compiler melihat myVar = 25.
  • Lalu compiler akan melanjutkan ke var myVar, kembali ke ECMAStandard, maka compiler akan membuat var myVar = undefined pada function scope.
  • Lalu kembali kebaris atas function, dan mengeksekusi perintah myVar = 25.
  • Maka nilai myVar pada function scope adalah 25.
  • Compiler selesai menjalankan perintah func(), lalu menjalankan perintah console.log(myVar).
  • Perintah console.log ada pada global scope, maka variable yang digunakan adalah myVar pada global scope.

Kita dapat pahami, scope bisa bersifat fluid. Tidak hanya dalam JavaScript. Namun karena di JavaScript kita bisa mendeklarasikan variable dimana saja, ini berpotensi menyebabkan error dan kebingungan masalah scope dan nilai undefined.

Kesimpulan

Deklarasikan variable di awal scope. Jika ada deklarasi variable pada global scope, lakukan pada awal scope. Jika ada deklarasi variable pada function, lakukan pada awal scope function. Perhatikan, deklarasi variable tidak berarti harus melakukan inisialisasi.

Dan hindari penggunaan nama variable yang sama seperti yang dilakukan pada contoh disini. Pada contoh disini sengaja dilakukan untuk menunjukan bahwa menggunakan nama yang sama. Ini adalah bad practice yang akan menimbulkan kebingungan.

Sharing is caring: