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>
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.
terima kasih
Maksutnya di akses dari luar fungsi dan dari dalam fungsi itu gimana ya om ?
Referensi yang bagus … thx
Sebelumnya Mohon maaf Mas Andry.
Kalau untuk membuat tampilan heder dan footer variabel yang kuat scriptnya seperti apa ya mas..
Saya kurang paham maksudnya seperti apa nih, kalau untuk membuat tampilan footer dan header, g perlu pakai JavaScript kok mas, cukup HTML dan CSS saja :)
Masih bingung dengan belajar javascript
Nama variabel case sensitive atau tidak gan?
Di JavaScript nama variabel case sensitive gan (huruf besar dan kecil dianggap berbeda)
Terima Kasih gan tutorialnya sangat membantu
mas kok yang variabel nilai_lokal kok gk keluar yah mas karna itu lokal variabel,
tapi yang variabel nilai kok keluar mas,padahal kan itu lokal variabel juga,sama sama di dalam fungsi juga,
mas yang variabel nilai_lokal kok gak keluar yah karna itu lokal variabel,
tapi yang variabel nilai kan juga lokal variabel tapi kok keluar output,sedangkan yang nilai_lokal engga,padahal dalam satu fungsi.
maap sebelumnya mas,berarti kode
test();
ini mengeluarkan semua nilai local variabel yang berada di dalam fungsi tersebut,namun jika ada yang global,ia tidak akan mengeluarkannya??,dan namun bila ada yang mengakses di luar fungsi,itu tidak akan bisa ?
(maap kesimpulan saya seperti itu,,)
iya ga keluar bang, kan itu emng ga ditampilin. coba cek yang di dlm function test(), itu kan yg paling bawah ada script console.log(nilai), ini yg bikin muncul kata 'lokal'.
kalo mau munculin kata 'duniailkom, tinggal tambahin aja dibawahnya, console.log(nilai_lokal); di dlm function test().
kalo $ bisa digunain buat apa aja yah maaf ??
Tanda dollar di JavaScript biasanya sebagai pemanggilan singkat dari fungsi jQuery (sebuah library JavaScript). Contohnya bisa kesini: https://www.duniailkom.com/tutorial-belajar-jquery-cara-mencari-elemen-html-dengan-jquery-selector/
Tapi agar sebelum ke jQuery, harus paham konsep dasar JavaScript terlebih dahulu.
maap hanya saran, saya masih pemula dalam belajar JavaScript. apakah bisa lebih terperinci lagi atau lebih mudah dipahami kembali dalam menuliskan kata-katanya?? jujur saya sedikit bingang tentang perbedaan variabel lokal dan variabel global. (penulisan masih agak membingungkan bagi pemula)
saya juga masih bingung, apakh ada penjelasan. Dimana javascript pada variabel global akan ditampilkan dan bagaimana cara mengeceknya jika perintah itu bisa berjalan dan pertanyaan untuk variabel lokal juga sama. Terima Kasih :)
Terima kasih sarannya… Betul, seharusnya di tahap ini belum pas untuk masuk ke bahasan tentang variabel lokal dan variabel global. Kedua konsep ini lebih baik dipelajari setelah paham tentang function.
Namun jika ingin mempelajari JavaScript dengan lebih dalam, boleh dipertimbangkan untuk order eBook JavaScript Uncover Duniailkom. Disana materi seperti ini saya jelaskan kembali dengan bahasan yang lebih detail.
Materi tentang variabel lokal dan variabel global nantinya ada di dalam bab khusus tentang function, sehingga bisa langsung dicoba apa perbedaannya, gimana cara aksesnya, termasuk cara baru pembuatan variabel di JavaScript dengan perintah 'let'.
Mas boleh tanya, saya menyalin contoh yang mas berikan pada tutorial belajar javascript #10 tapi tidak muncul seperti tampilan pada contoh yang muncul hanya Belajar JavaScript dan kalimat dibawahnya.
yang hasil dari console.log tidak muncul. Kenapa ya? contoh sudah disalin tanpa salah. mohon petunjuknya. Trims
mas kok saat saya hapus test()
si tanpa_var nya is not defined
Pendefinisian variabel tanpa_var ada di dalam function test(). Kalau pemanggilan function test()-nya dihapus, maka variabel tanpa_var tidak pernah di definisikan.
oalah seperti itu mas,saya pikir global variabel dapat diakses tanpa harus memanggil fungsi nya,terima kasih mas,bisa tenang akhirnya