Cara menggunakan html call javascript variable

Dalam tutorial belajar JavaScript kali ini kita akan bahas Pengertian dan Cara Pembuatan Variabel dalam JavaScript. Di EcmaScript 6, variabel bisa dibuat dengan perintah var dan let.


Pengertian Variabel dalam JavaScript

Variabel adalah penanda identitas yang digunakan untuk menampung suatu nilai.

Secara teknis, variabel merujuk ke sebuah alamat di memory komputer (RAM). Ketika kita membuat sebuah variabel, satu ‘slot’ memory akan disiapkan untuk menampung nilai tersebut. Setiap variabel memiliki nama yang dipakai sebagai identitas variabel.

Sesuai dengan namanya, isi variabel bisa berubah sepanjang kode program. Sebagai contoh, jika saya membuat program menghitung luas persegi, maka bisa menyiapkan variabel panjang dan lebar yang diisi angka 10 dan 12. Nantinya isi variabel panjang dan lebar bisa ditukar dengan angka 35, 40, atau angka lain.

Tidak seperti bahasa pemograman C++ atau Java, di dalam JavaScript kita tidak perlu mendeklarasikan jenis tipe data. Seluruh variabel di dalam JavaScript bisa di isi nilai apapun dan dapat diubah menjadi tipe lain sepanjang program. Jenis bahasa pemograman seperti ini dikenal juga sebagai Typeless Programming Language.


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 ($).

Naming convention atau kebiasaan pemberian nama untuk variabel di JavaScript adalah dengan camelCase.

camelCase adalah cara penulisan dimana karakter pertama setiap kata ditulis dengan huruf besar, kecuali kata pertama. Contohnya: banyakAnggota, totalBiaya, mainBox, atau jumlahKlikSatuHari. Jika variabel tersebut hanya terdiri dari 1 kata, ditulis dengan huruf kecil semua.

Ini hanya kebiasaan dan bukan kewajiban. JavaScript tidak akan komplain jika kita tetap ingin membuat nama variabel dengan huruf besar semua, atau setiap kata dipisah dengan underscore.


Cara Membuat Variabel JavaScript

Untuk membuat variabel di dalam JavaScript, kita bisa memakai keyword var atau let.

Hingga beberapa tahun lalu, var menjadi satu-satunya perintah untuk membuat variabel. Kemudian ES6 memperkenalkan perintah let untuk mengatasi kelemahan var di dalam konsep scope (pembatasan hak akses). Materi terkait scope akan kita bahas terpisah, tapi untuk saat ini bisa disebut kalau var dan let nyaris tidak berbeda.

Karena terkesan lebih modern dan relatif baru, hampir semua kode program JavaScript saat ini sudah menggunakan let untuk membuat variabel. Berikut adalah contoh penulisannya:

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

Proses pembuatan variabel dikenal dengan istilah deklarasi. Dan pada 2 baris terakhir saya membuat variabel, sekaligus memberikan nilai ke dalam variabel tersebut.

Proses memberikan nilai awal ke sebuah variabel disebut juga dengan istilah inisialisasi.


Mengisi Nilai Variabel

Di dalam JavaScript, sebuah variabel bisa diisi dengan data apa saja, apakah itu teks, angka, atau data lain yang lebih kompleks seperti object.

Untuk memberi nilai ke dalam variabel, pakai operator assignment menggunakan tanda sama dengan ” = “. Berikut contohnya:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <script>
    let angka;
    angka = 125;
    console.log(angka);
  </script>
</body>
</html>

Cara menggunakan html call javascript variable

Di baris 10 saya membuat sebuah variabel bernama angka. Variabel ini kemudian diberi nilai 125. Selanjutnya variabel angka ditampilkan di baris 12 dengan perintah console.log().

Saat file di atas dijalankan, akan tampil angka 125 di tab console developer tools.

Bagi yang baru pertama kali belajar bahasa pemrograman, mungkin sedikit bingung dengan perintah angka = 125. Operasi assignment atau proses memberikan nilai ke variabel dibaca dari kanan ke kiri. Artinya, 125 “dimasukkan” sebagai nilai ke variabel angka.

Sepanjang pembuatan program dengan JavaScript, variabel akan sangat sering dipakai. Dalam tutorial selanjutnya, kita akan bahas ‘saudara’ dari variabel, yakni konstanta. Berikutnya dalam Pengertian dan Cara Membuat Konstanta JavaScript.


Saat ini di Duniailkom tersedia eBook / buku JavaScript Uncover. Dengan total lebih dari 650 halaman A4, materi di buku jauh lebih banyak daripada tutorial di web Duniailkom. Penjelasan lebih lanjut bisa ke: JavaScript Uncover – Panduan Belajar JavaScript.