Tutorial Belajar JavaScript Part 10: Pengertian dan Cara Pembuatan Variabel dalam JavaScript

Dalam tutorial belajar JavaScript kali ini, kita akan mempelajari Pengertian dan Cara Pembuatan Variabel dalam JavaScript. Termasuk juga aturan penamaan variabel dan konsep Variable Scope.


Pengertian dan Sifat Variabel di Dalam JavaScript

Dalam bahasa pemograman, variabel adalah ‘penampung’ sebuah nilai. Tergantung dengan ‘nilai’ dari variabel tersebut, sebuah variabel di dalam JavaScript dapat bertipe Angka (Number), String, Boolean, atau yang lainnya.

Tidak seperti bahasa pemograman desktop seperti C++ dan Visual Basic, di dalam JavaScript kita tidak perlu mendeklarasikan jenis tipe data. Seluruh variabel di dalam JavaScript dapat berisi nilai apapun (tipe data apapun), dan dapat diubah menjadi tipe lain sepanjang program. Jenis pemograman seperti ini dikenal juga dengan Typeless Programming Language.

Salah satu bahasa pemograman yang juga berjenis Typeless Programming Language adalah PHP.


Aturan Penamaan Variabel JavaScript

Aturan penamaan variabel pernah kita bahas pada tutorial Aturan Dasar Penulisan Kode Program JavaScript yakni sama dengan aturan pembuatan identifier:

  • Karakter pertama harus diawali dengan huruf, underscore (_) atau tanda dollar ($)
  • Karakter kedua dan seterusnya bisa ditambahkan dengan huruf, angka, underscore (_) atau tanda dollar ($).

Cara Membuat Variabel JavaScript

Walaupun kita tidak perlu menyebutkan jenis tipe data dari suatu variabel, namun kita tetap harus mendeklarasikan variabel di dalam JavaScript. Cara membuat variabel di dalam JavaScript di bedakan menjadi 2, yakni dengan menggunakan keyword var, dan tanpa var.

Jika menggunakan kata kunci var, berikut adalah contoh penulisannya:

<script>
  var a;
  var b, c, d;
  var e; var f;
  var g=12;
  var h="Saya Sedang Belajar JavaScript di Duniailkom";
</script>

Pada 2 baris terakhir saya membuat variabel, sekaligus memberikan nilai ke dalam variabel tersebut.

Cara kedua untuk membuat variabel adalah tanpa menggunakan keyword var, seperti berikut ini:

<script>
  a;
  b=12;
  c=" Saya Sedang Belajar JavaScript di Duniailkom";
</script>

Pembuatan variabel tanpa menggunakan keyword var memang lebih cepat, akan tetapi tidak disarankan. Walaupun variabel yang dideklarasikan tanpa keyword var akan tetap berfungsi sebagaimana mestinya seperti variabel dengan var, namun JavaScript ‘menyimpan’ variabel tersebut dengan cara yang berbeda. Salah satu perbedaannya adalah tentang variabel scope (yang akan kita bahas setelah ini). Sedapat mungkin kita selalu membuat variabel menggunakan keyword var.


Jangkauan Variabel (Variabel Scope) dalam JavaScript

Jangkauan Variabel (atau Variabel Scope) adalah konsep tentang pembatasan akses dari sebuah variabel. Yaitu pada bagian mana sebuah variabel masih bisa diakses.

Sebuah variabel jika dideklarasikan (baik dengan keyword var ataupun tanpa var), akan bersifat global, atau dikenal dengan istilah global variable. Sebuah variabel akan menjadi global variabel sepanjang variabel tersebut di deklarasikan di luar fungsi.

Jika sebuah variabel di deklarasikan di dalam fungsi, maka variabel tersebut hanya akan bisa diakses di dalam fungsi tersebut, atau bersifat lokal (dikenal juga dengan local variable).

Apabila kita membuat 2 variabel dengan nama yang sama sebagai global variabel, dan juga local variable di dalam sebuah fungsi, maka local variable akan memiliki prioritas yang lebih tinggi dibandingkan global variabel.

Variabel di dalam fungsi hanya akan bersifat lokal jika dideklarasikan menggunakan keyword var. Jika sebuah variabel di dalam fungsi di buat tanpa menggunakan keyword var, efeknya akan sama dengan membuat variabel global.

Berikut adalah contoh efek konsep global variable dan local variable dalam JavaScript:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Belajar JavaScript</title>
 
<script>
var nilai = "global";
function test() {
   var nilai = "lokal";
   var nilai_lokal = "duniailkom";
   tanpa_var = "no_scope"; //akan menjadi global variabel!!
   console.log(nilai);
   }

test(); // print: lokal
console.log(nilai); // print: global
console.log(tanpa_var); //print: no_scope (bisa diakses)
console.log(nilai_lokal); //error, karena nilai_lokal adalah lokal variabel
</script>
 
</head>
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript di duniailkom.com </p>
</body>
</html>

Contoh Cara Penggunaan Global Variabel dan Local Variabel JavaScriptDalam contoh kode diatas, saya membuat dan mendeklarasikan beberapa variabel secara global maupun lokal.

Pada baris ke-8, saya membuat sebuah variabel global, dengan nama nilai, dan memberikan nilai string “global” ke dalam variabel ini.

Selanjutnya, saya membuat fungsi test() dan mendeklarasikan kembali variabel nilai, namun kali ini memberikan nilai string “lokal”. Di dalam fungsi ini saya juga membuat variabel baru, yakni nilai_lokal dan tanpa_var.

Khusus untuk variabel tanpa_var, sesuai dengan namanya, saya mendeklarisakannya tanpa keyword var. sehingga efeknya, variabel tanpa_var akan menjadi variabel global.

Dengan membuat beberapa perintah console.log, kita dapat mencari tahu apa yang terjadi dari contoh kode diatas.

Variabel nilai apabila diakses dari luar fungsi akan bernilai “global”, sedangkan jika diakses dari dalam fungsi akan bernilai “lokal”. Variabel tanpa_var juga sukses ditampilkan, karena variabel ini telah menjadi variabel global.

Saat mencoba mengakses variabel nilai_lokal, web browser akan menampilkan error. Hal ini terjadi karen variabel nilai_lokal bersifat lokal di dalam fungsi test, sehingga apabila diakses dari luar fungsi, JavaScript ‘tidak melihat’ variabel ini, dan menampilkan error.

Pengertian dan Cara Penulisan Variabel JavaScript yang kita bahas pada tutorial kali ini tidak akan berguna tanpa ‘diberikan‘ data. Dalam tutorial JavaScript berikutnya, kita akan membahas tentang Jenis dan Pengertian Tipe data dalam JavaScript.


eBook JavaScript Uncover Duniailkom
JavaScript sudah menjadi fitur wajib di setiap website modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih lengkap, mulai dari dasar hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut bisa ke eBook JavaScript Uncover Duniailkom.

Tutorial Terkait:

9 Comments

  1. anum
    19 May 15
  2. Afif
    21 Jun 15
  3. MAs Rudy
    26 Jul 15
  4. El_Bharosy
    13 Dec 15
    • Andre
      14 Dec 15
  5. Wijayana Cell
    25 Feb 16
  6. Fikri
    01 May 16
    • Andre
      02 May 16
  7. Albie
    20 Aug 17

Add Comment