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.
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>
Dalam 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.
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