> For the complete documentation index, see [llms.txt](https://gitbook.panditya.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gitbook.panditya.com/bahasa-pemrograman/javascript/variabel.md).

# Variabel

*Variable* merupakan sebuah wadah/tempat bagi kita untuk menyimpan sebuah nilai, *value. Value* tersebut dapat berupa kata, angka, dll. Jika membahas variabel akan ada tiga istilah yang akan kita jumpai, yaitu *declaring* dan *assigning,* dan *initializing.* Kamu mungkin sering mendengar istilah ‘*Declaring variable’* atau *‘Assigning variable’. Initializing* mungkin kurang familiar karena memang dilakukan secara implisit oleh JavaScript. Ketiga istilah tersebut disebutkan berbeda karena memang merujuk pada hal yang berbeda. Jika digambarkan keterhubungan antara ketiga istilah tersebut maka akan menjadi seperti berikut.Hubungan antara declaration, initialization, dan assignment.

Pada saat melakukan deklarasi variabel, JavaScript secara otomatis juga melakukan inisiasi variabel tersebut, karena itu sebelumnya *initialization* dilakukan secara implisit oleh JavaScript. Oleh karena itu pada story ini kita akan fokus pada *declaration* dan *assignment* saja.

### Declaring Variable <a href="#id-717f" id="id-717f"></a>

Mendeklarasikan, *declaring,* variabel dapat dilakukan dengan mudah, yaitu dengan menggunakan *keyword* **var.** Seperti contoh berikut:

```
var suhu;
```

Dengan kode diatas kita baru saja melakukan deklarasi variabel dengan nama **suhu.** Variabel **suhu** diatas sudah dideklarasikan namun belum memiliki nilai karena kita baru hanya mendeklarasikan **suhu,** belum dilakukan *assignment* nilai pada **suhu.**

Tidak seperti beberapa bahasa lainnya seperti Java, dll, pada JavaScript  tidak perlu mendefinisikan tipe data suatu variable. Pada Java mungkin kamu menemukan jika ingin mendeklarasikan variable perlu menentukan tipe data seperti apa yang ingin diberikan pada variable tersebut dan tipe data tersebut tidak bisa diubah jika telah dideklarasikan.

```
// Java
String kalimat;
int bilangan;
boolean benarAtauSalah;
```

JavaScript memiliki sifat *loosely typed* atau *dynamic language,* yang berarti kamu tidak perlu mendeklarasikan tipe data, hanya perlu mendeklarasikan nama variabel. Tipe data akan otomatis dideteksi oleh JavaScript engine jika variabel telah diberikan nila&#x69;*.*

### Assigning Variable <a href="#fd78" id="fd78"></a>

*Assigning variable,* memberikan nilai kepada variabel, dilakukan setelah *declaring variable. Assigning* dapat dilakukan dengan menggunakan operator ‘=’. Seperti contoh berikut:

```
suhu = 36;
```

Setelah melakukan *assignment,* variabel sudah resmi memiliki nilai sesuai dengan apa nilai yang diberikan. Jika kita mencetak **suhu** maka seharusnya akan muncul angka 36.

*Assignment* untuk setiap tipe data berbeda. Pada contoh diatas *assignment* variabel untuk tipe data *number.*

### **Reassigning Variable** <a href="#ced7" id="ced7"></a>

*Reassiging variable* dilakukan jika kamu ingin memberikan nilai baru pada suatu variable. Nilai variable tersebut akan dibuang dan digantikan dengan nilai yang baru di-*assign.* Contohnya seperti berikut.Reassigning variable pada JavaScript

### Declaring dan Assigning Dalam Satu *Statement* <a href="#ca33" id="ca33"></a>

Kamu juga dapat melakukan deklarasi dan memberi nilai pada suatu variable dalam satu baris *statement* seperti contoh berikut.

```
var suhu = 36;
```

Pada kode diatas kita melakukan deklarasi variabel **suhu** dan juga memberikan nilai 36 pada **suhu.** Cara diatas lebih singkat dan biasanya memang lebih sering dilakukan dibanding memisahkan langkah *declaring* dan *assigning* seperti pada contoh sebelumnya, namun hasilnya akan tetap sama.Melakukan deklarasi dan memberi nilai variabel dalam satu baris *expression.*

Jika hasilnya sama lalu apa perbedaan penggunaan kedua contoh diatas?

Contoh pertama, memisahkan *declaration* dan *assignment,* dapat digunakan apabila tidak perlu ada value awal untuk variabel tersebut atau

### Assigning Variable Tanpa Declaring Variable Terlebih Dahulu <a href="#db30" id="db30"></a>

JavaScript memungkinkan kamu melakukan assignment variable tanpa mendeklarasikan variable tersebut terlebih dahulu namun hal tersebut agak berbahaya karena variable tersebut akan otomatis dianggap sebagai **global variable**. Artinya, variable dapat diakses dari bagian manapun ada file tersebut. Hal ini tentu tidak baik karena terkadang kita hanya ingin mendeklarasikan variable pada *scope* tertentu saja, misalkan hanya dapat diakses di dalam suatu *function* saja.Tidak ada error yang menunjukkan bahwa variable belum dideklarasikan karena secara otomatis variable dideklarasikan secara global.

## Variable Naming Rules <a href="#id-5181" id="id-5181"></a>

*Naming rules* merupakan salah satu hal yang penting dan perlu dipahami oleh developer. Jika n*aming rules* diabaikan kode bisa memungkinkan error. Ada beberapa aturan penamaan variabel yang perlu kamu ikuti, antara lain:

### **(1) Nama variabel tidak boleh&#x20;*****dimulai*****&#x20;dengan angka** <a href="#id-2000" id="id-2000"></a>

Contoh ***tidak valid***:

```
// tidak valid
39celc, 2021lockdown
```

Walaupun begitu kamu tetap diperbolehkan menggunakan angka pada nama variable.\
Contoh **valid**:

```
// valid
covid19, vaksin2021
```

### **(2) Nama variabel tidak boleh mengandung operator matematika, operator logika, atau operator bitwise** <a href="#id-1104" id="id-1104"></a>

Contoh **tidak valid:**

```
// tidak valid
4*2equals // mengandung operator matematika
perhatian! // mengandung operator logika
```

Operator yang tidak diperbolehkan antara lain +, -, /, %, \*, --, ++, ^, !, \\, &, |, \~, <, >, dll. Kamu dapat melihat daftar operator tersebut pada halaman <https://www.w3schools.com/js/js_operators.asp>

### **(3) Nama variabel tidak boleh mengandung tanda baca** <a href="#id-8ea6" id="id-8ea6"></a>

Contoh **tidak valid:**

```
// tidak valid
some:variable
number#
don't
```

Khusus untuk *underscore (\_),* kamu dapat menggunakan *underscore* sebagai bagian dari nama variabel baik **didepan, ditengah, maupun dibelakang** nama variabel.

Contoh **valid:**

```
// valid
_square
back_to_the_future
block_
```

### **(4) Nama variabel tidak boleh mengandung spasi** <a href="#d141" id="d141"></a>

Contoh **tidak valid:**

```
// tidak valid
saya ganteng
kamu cantik
```

### **(5) Nama variabel tidak boleh dari&#x20;*****reserve keywords*****&#x20;JavaScript** <a href="#c152" id="c152"></a>

*Reserve keyword* merupakan kata yang sudah didefinisikan oleh JavaScript untuk digunakan dalam program.

Contoh **tidak valid:**

```
// tidak valid
this, window, location, break, continue
```

Walaupun begitu nama variabel kamu tetap diperbolehkan mengandung *reserve word* tersebut. Contoh **valid:**

```
// valid
thisWindow, theLocation, letsContinue
```

Untuk daftar *reserve keyword* lebih lengkap, kamu dapat lihat pada halaman <https://www.w3schools.com/js/js_statements.asp>. Perlu dicatat, halaman tersebut hanya mencakup *reserve keyword* untuk ES5.

### **(6) Nama variabel&#x20;*****case-sensitive*** <a href="#e094" id="e094"></a>

```
covidvirus
CovidVirus
coVidvirus
```

\-

Pastikan kamu memahami keenam peraturan tersebut. Jika kamu masih ragu apakah nama variabel kamu valid atau tidak, kamu dapat melakukan pengecekan nama variabel kamu dengan tools <https://mothereff.in/js-variables>

Gimana masih bingung atau penasaran cara kerjanya? Kamu bisa coba langsung disini pake CodeSandbox

{% embed url="<https://codesandbox.io/s/elastic-architecture-k8cer?file=/src/index.js>" %}
