Variabel pada JavaScript berfungsi sebagai penampung untuk menyimpan nilai data sementara.
Dalam contoh ini, x, y, dan z adalah variabel, variabel dideklarasikan dengan keyword var.
Contoh :
<!DOCTYPE html> <html> <body> <h2>Variabel pada JavaScript</h2> <p>Dalam contoh ini, x, y, dan z adalah variabel</p> <p id="demo"></p> <script> var x = 5; var y = 6; var z = x + y; document.getElementById("demo").innerHTML = "Nilai dari z adalah: " + z; </script> </body> </html>
Dari contoh di atas, dapat dijelaskan bahwa:
- x menyimpan nilai 5
- y menyimpan nilai 6
- z menyimpan nilai 11
Section Artikel
- 1 Penggunaan let dan const (2015)
- 2 Deklarasi variabel Seperti Aljabar
- 3 JavaScript Identifier
- 4 Operator Assignment
- 5 Tipe Data JavaScript
- 6 Mendeklarasikan (Membuat) Variabel JavaScript
- 7 Satu Statement, Banyak Variabel
- 8 Value = undefined
- 9 Re-Declaring Variable JavaScript
- 10 Aritmatika pada JavaScript
- 11 Tanda Dolar $ JavaScript
- 12 JavaScript Underscore (_)
Penggunaan let dan const (2015)
Sebelum tahun 2015, deklarasi variabel menggunakan keyword var adalah satu-satunya cara untuk mendeklarasikan variabel pada JavaScript.
Namun dengan adanya JavaScript versi 2015 (ES6 – ECMAScript 2015) memungkinkan penggunaan keyword const untuk menentukan variabel yang tidak dapat ditetapkan kembali, dan keyword let untuk menentukan variabel dengan cakupan terbatas.
Karena sedikit rumit untuk menjelaskan perbedaan antara keyword const dan let, dan karena keyword tersebut tidak didukung di browser lama, maka contoh dari tutorial ini akan sering menggunakan var.
Safari 10 dan Edge 14 adalah browser pertama yang sepenuhnya mendukung ES6:
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
Deklarasi variabel Seperti Aljabar
Dalam contoh ini, harga1, harga2, dan total adalah variabel:
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Variabel pada JavaScript</h2>
<p id="demo"></p>
<script>
var harga1 = 5;
var harga2 = 6;
var total = harga1 + harga2;
document.getElementById("demo").innerHTML =
"Jumlahnya adalah: " + total;
</script>
</body>
</html>
Dalam pemrograman pendeklarasian variabel seperti “harga1” untuk menyimpan nilai sama seperti dalam aljabar.
Dalam pemrograman penggunaan variabel dalam ekspresi seperti “total = harga1 + harga2” seperti dalam aljabar.
Dari contoh di atas dapat dihitung totalnya menjadi 11.
Variabel JavaScript adalah penampung untuk menyimpan nilai data.
JavaScript Identifier
Semua variabel JavaScript harus diidentifikasi dengan nama unik.
Nama-nama unik ini disebut identifier.
Identifier bisa berupa teks pendek (seperti x dan y) atau nama yang lebih deskriptif (age, sum, totalVolume).
Aturan umum untuk membuat nama variabel (identifier unik) adalah:
- Nama dapat berisi huruf, angka, garis bawah, dan tanda dolar.
- Nama harus dimulai dengan huruf
- Nama juga bisa dimulai dengan $ dan _ (tapi tidak akan digunakan dalam tutorial ini)
- Nama case sensitive (y dan Y adalah variabel yang berbeda)
- Reserved word (seperti keyword JavaScript) tidak dapat digunakan sebagai nama
JavaScript identifier adalah case sensitive (peka terhadap besar kecilnya huruf).
Operator Assignment
Dalam JavaScript, tanda sama dengan (=) merupakan operator “assignment”, bukan operator “sama dengan”.
Hal ini berbeda dengan aljabar, deklarasi ini tidak masuk akal pada aljabar:
x = x + 5
Namun dalam JavaScript bagaimanapun hal ini masuk akal: operator ini memberikan nilai x + 5 ke x.
(Operator ini menghitung nilai x + 5 dan memasukkan hasilnya ke dalam x. Nilai x bertambah dengan 5.)
Operator “sama dengan” ditulis seperti == di JavaScript.
Tipe Data JavaScript
Variabel JavaScript dapat menampung nilai angka seperti “100” dan nilai teks seperti “John Doe”.
Dalam pemrograman, nilai teks disebut string.
JavaScript dapat menangani banyak jenis data, tetapi untuk tutorial kali ini hanya akan menggunakan angka dan string.
String ditulis di dalam tanda kutip ganda atau tunggal. Angka ditulis tanpa tanda kutip.
Jika kita memasukkan angka dalam tanda kutip, angka tersebut akan di anggap sebagai string.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Variabel JavaScript</h2>
<p>String ditulis di dalam tanda kutip.</p>
<p>Angka ditulis tanpa tanda kutip.</p>
<p id="demo"></p>
<script>
var pi = 3.14;
var person = "John Doe";
var answer = 'Ya, saya!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
Mendeklarasikan (Membuat) Variabel JavaScript
Membuat variabel di JavaScript disebut “mendeklarasikan” variabel.
Kita dapat mendeklarasikan variabel di dalam JavaScript dengan keyword var:
var carName;
Setelah deklarasi, variabel tidak memiliki nilai (secara teknis akan memiliki nilai tidak terdefinisi atau undefined).
Untuk menetapkan nilai ke variabel, gunakan tanda sama dengan:
carName = "Volvo";
Kita juga dapat menetapkan nilai ke variabel saat mendeklarasikannya:
var carName = "Volvo";
Pada contoh di bawah ini, menunjukan cara membuat variabel yang disebut carName dan menetapkan nilai “Volvo” pada variabel tersebut.
Kemudian akan menampilkan nilai di dalam paragraf HTML dengan id = “demo”:
<!DOCTYPE html>
<html>
<body>
<h2>Variabel JavaScript</h2>
<p>Buat variabel, tetapkan nilainya, dan tampilkan:</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Cara mendeklarasikan variabel dalam pemrograman yang baik adalah mendeklarasikan semua variabel di awal script.
Satu Statement, Banyak Variabel
Kita juga dapat mendeklarasikan banyak variabel dalam satu statement.
Caranya mulai statement dengan var dan pisahkan variabel dengan koma:
Contoh :
var person = "John Doe", carName = "Volvo", price = 200;
Deklarasi dapat mencakup beberapa baris:
<!DOCTYPE html>
<html>
<body>
<h2>Variabel JavaScript</h2>
<p>Anda dapat mendeklarasikan banyak variabel menjadi satu statement.</p>
<p id="demo"></p>
<script>
var person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Value = undefined
Dalam program komputer, variabel sering dideklarasikan tanpa nilai. Nilainya bisa berupa sesuatu yang harus dihitung, atau sesuatu yang akan diberikan nanti, seperti input pengguna.
Variabel yang dideklarasikan tanpa nilai akan memiliki nilai tidak terdefinisi atau undefined.
Variabel carName akan memiliki nilai undefined setelah eksekusi statement ini.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Variabel JavaScript</h2>
<p>Variabel yang dideklarasikan tanpa nilai akan memiliki nilai tidak terdefinisi.</p>
<p id="demo"></p>
<script>
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Re-Declaring Variable JavaScript
Jika Anda mendeklarasikan ulang variabel JavaScript, nilainya tidak akan hilang.
Variabel carName akan tetap memiliki nilai “Volvo” setelah menjalankan statement berikut.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Variabel JavaScript</h2>
<p>Jika Anda mendeklarasikan ulang variabel JavaScript, nilainya tidak akan hilang.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Aritmatika pada JavaScript
Seperti halnya aljabar, kita juga dapat melakukan perhitungan aritmatika dengan variabel JavaScript menggunakan operator, seperti = dan +.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Variabel JavaScript</h2>
<p>Hasil penjumlahan 5 + 2 + 3:</p>
<p id="demo"></p>
<script>
var x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Anda juga dapat menjumlahkan string, tetapi hasilnya string akan digabungkan:
<!DOCTYPE html>
<html>
<body>
<h2>Variabel JavaScript</h2>
<p>Hasil dari penjumlahan "John" + "" + "Doe":</p>
<p id="demo"></p>
<script>
var x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Coba juga contoh ini:
<!DOCTYPE html>
<html>
<body>
<h2> Variabel JavaScript</h2>
<p>Hasil penjumlahan 5 + 2 + 3:</p>
<p id="demo"></p>
<script>
x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Jika kita memasukkan variabel angka dalam tanda kutip, maka akan dianggap sebagai string, dan hasilnya digabungkan.
Sekarang coba contoh ini:
<!DOCTYPE html>
<html>
<body>
<h2>Variabel JavaScript</h2>
<p>Hasil penjumlahan 2 + 3 + "5":</p>
<p id="demo"></p>
<script>
var x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Tanda Dolar $ JavaScript
Ingatlah bahwa penamaan variabel pada JavaScript harus dimulai dengan:
- Sebuah huruf (A-Z atau a-z)
- Tanda dolar ($)
- Atau garis bawah (_)
Karena JavaScript memperlakukan tanda dolar sebagai huruf, identifier yang berisi $ merupakan nama variabel yang valid:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript $</h2>
<p>JavaScript menganggap tanda dolar sebagai huruf</p>
<p id="demo"></p>
<script>
var $ = 2;
var $myMoney = 5;
document.getElementById("demo").innerHTML = $ + $myMoney;
</script>
</body>
</html>
Penggunaan tanda dolar tidak terlalu umum di JavaScript, tetapi programmer profesional sering menggunakannya sebagai alias untuk fungsi utama di library JavaScript.
Pada libray JavaScript jQuery misalnya, fungsi utama $ digunakan untuk memilih elemen HTML. Di jQuery $ (“p”); berarti “pilih semua elemen p”.
JavaScript Underscore (_)
Karena JavaScript mengaggap garis bawah (underscore) sebagai huruf, identifier yang berisi _ adalah nama variabel yang valid:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript _</h2>
<p>Garis bawah diperlakukan sebagai huruf dalam nama JavaScript.</p>
<p id="demo"></p>
<script>
var _x = 2;
var _100 = 5;
document.getElementById("demo").innerHTML = _x + _100;
</script>
</body>
</html>
Menggunakan garis bawah tidak terlalu umum di JavaScript, tetapi programmer profesional biasanya menggunakannya sebagai alias untuk variabel “private (tersembunyi)”.
