Kenal JavaScript: Variable

Kenal JavaScript merupakan salah satu seri tentang JavaScript. Seri ini memperkenalkan hal-hal dasar seputar JavaScript. Setiap minggu akan ada 1–2 artikel baru pada seri ini.
Sebelumnya di ‘Kenal JavaScript’
Kita telah membahas dan melakukan instalasi beberapa tools yang dapat kita gunakan untuk belajar JavaScript. Beberapa diantaranya adalah node.js, text editor, dan JavaScript playground seperti repl.it
Sebelumnya: Kenal JavaScript: node.js, Text Editor, dan tools Lainnya
Pada Story kali ini saya akan mulai untuk membahas teknis dari JavaScript tentang variable. Kita akan hands-on langsung beberapa contoh yang akan saya berikan disini. Sebelumnya saya ingin memberikan beberapa catatan terlebih dahulu sebagai panduan untuk mengikuti seri ‘Kenal JavaScript’ ini sampai dengan story-story selanjutnya. Beberapa diantaranya:
- Saya akan menggunakan ES5
Oleh karena itu, tidak ada sintaks ES2015+ yang akan muncul pada seri ‘Kenal JavaScript’ ini. ES2015 akan saya bahas spesifik pada seri terpisah - Story akan selalu ditulis dalam bahasa Indonesia, istilah khusus akan ditulis sesuai dengan penulisan aslinya.
Saya rasa itu saja yang perlu saya jelaskan. Selanjutnya mari kita langsung membahas Variable di JavaScript.
Variable
Hal pertama yang ingin saya bagi dengan Anda jika membahas tentang JavaScript adalah variable. 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. Anda 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.

Gambar diatas menjelaskan secara sederhana bagaimana tahapan yang terjadi saat kita melakukan deklarasi variabel pada JavaScript. Pada saat Anda melakukan deklarasi variabel, JavaScript secara otomatis juga melakukan inisiasi variabel tersebut, karena itu saya sebut sebelumnya bahwa initialization dilakukan secara implisit oleh JavaScript. Oleh karena itu pada story ini kita akan fokus pada declaration dan assignment saja.
Anda melihat kata scope pada gambar diatas? Apa itu scope? Scope akan kita bahas khusus pada story lainnya.
Declaring Variable
Mendeklarasikan, declaring, variabel dapat dilakukan dengan mudah, yaitu dengan menggunakan keyword var. Seperti contoh berikut:
var variabelSaya;Dengan kode diatas kita baru saja melakukan deklarasi variabel dengan nama variabelSaya. Variabel variabelSaya diatas sudah dideklarasikan namun belum memiliki nilai karena kita baru hanya mendeklarasikan variabelSaya, belum dilakukan assignment nilai pada variabelSaya. Bagaimana hasilnya jika kita melakukan pemanggilan/mencetak variable yang sudah dideklarasikan namun belum diberi nilai?

Console akan mencetak undefined yang berarti tidak memiliki nilai. Undefined merupakan salah satu tipe data primitif pada JavaScript.
Tidak seperti beberapa bahasa lainnya seperti Java, dll, pada JavaScript Anda tidak perlu mendefinisikan tipe data suatu variable. Pada Java mungkin Anda menemukan jika ingin mendeklarasikan variable Anda 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 Anda tidak perlu mendeklarasikan tipe data, hanya perlu mendeklarasikan nama variabel. Tipe data akan otomatis dideteksi oleh JavaScript engine jika variabel telah diberikan nilai.
Assigning Variable
Assigning variable, memberikan nilai kepada variabel, dilakukan setelah declaring variable. Assigning dapat dilakukan dengan menggunakan operator ‘=’. Seperti contoh berikut:
variabelSaya = 7;Setelah melakukan assignment, variabel sudah resmi memiliki nilai sesuai dengan apa nilai yang diberikan. Jika kita mencetak variabelSaya maka seharusnya akan muncul angka 7.

Assignment untuk setiap tipe data berbeda. Pada contoh diatas saya mencontohkan assignment variabel untuk tipe data number.
Reassigning Variable
Reassiging variable dilakukan jika Anda ingin memberikan nilai baru pada suatu variable. Nilai variable tersebut akan dibuang dan digantikan dengan nilai yang baru di-assign. Contohnya seperti berikut.

Declaring dan Assigning Dalam Satu Statement
Anda juga dapat melakukan deklarasi dan memberi nilai pada suatu variable dalam satu baris statement seperti contoh berikut.
var variabelSaya = 7;Pada kode diatas kita melakukan deklarasi variabel variabelSaya dan juga memberikan nilai 7 pada variabelSaya. 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.

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
JavaScript memungkinkan Anda 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.

Penjelasan detail tentang hal ini akan saya jabarkan lebih jelas pada story tentang scope. Untuk saat ini pastikan saja bahwa Anda selalu mendeklarasikan variable Anda sebelum melakukan assignment untuk menghindari global variable.
Variable Naming Rules
Naming rules merupakan salah satu hal yang penting dan perlu dipahami oleh developer. Jika naming rules diabaikan kode bisa memungkinkan error. Ada beberapa aturan penamaan variabel yang perlu Anda ikuti, antara lain:
(1) Nama variabel tidak boleh dimulai dengan angka
Contoh tidak valid:
// tidak valid
1stTime, 21JumpStreet, 7upWalaupun begitu Anda tetap diperbolehkan menggunakan angka pada nama variable.
Contoh valid:
// valid
the7sins, variable1, variable2(2) Nama variabel tidak boleh mengandung operator matematika, operator logika, atau operator bitwise
Contoh tidak valid:
// tidak valid
4*2equals // mengandung operator matematika
attention! // mengandung operator logikaOperator yang tidak diperbolehkan antara lain +, -, /, %, *, --, ++, ^, !, \, &, |, ~, <, >, dll. Anda dapat melihat daftar operator tersebut pada halaman https://www.w3schools.com/js/js_operators.asp
(3) Nama variabel tidak boleh mengandung tanda baca
Contoh tidak valid:
// tidak valid
some:variable
number#
don'tKhusus untuk underscore (_), Anda 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
Contoh tidak valid:
// tidak valid
saya jelek
anda ganteng:P
(5) Nama variabel tidak boleh dari reserve keywords JavaScript
Reserve keyword merupakan kata yang sudah didefinisikan oleh JavaScript untuk digunakan dalam program.
Contoh tidak valid:
// tidak valid
this, window, location, break, continueWalaupun begitu nama variabel Anda tetap diperbolehkan mengandung reserve word tersebut. Contoh valid:
// valid
thisWindow, theLocation, letsContinueUntuk daftar reserve keyword lebih lengkap, Anda 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 case-sensitive
sepiringberdua
sepiringBerdua
Sepiringberdua
SepiringBerdua// 4 variabel yang berbeda
-
Pastikan Anda memahami keenam peraturan tersebut. Jika Anda masih ragu apakah nama variabel Anda valid atau tidak, Anda dapat melakukan pengecekan nama variabel Anda dengan tools https://mothereff.in/js-variables
Penulisan Nama Variabel
Ada beberapa konvensi yang bisa Anda digunakan untuk menulis nama variabel dalam JavaScript. Beberapa diantaranya, yaitu:
(1) camelCase
Contoh:
var camelCase = 7;
var namaSaya = 'Jundi';(2) underscore_case
Contoh:
var my_name = 'Jundi';
var my_variable = 7;(3) PascalCase
Contoh:
var MyName = 'Jundi';
var MyVariable = 7;-
Ketiga konvensi diatas merupakan konvensi yang paling sering digunakan. Biasanya camelCase paling populer untuk penulisan nama variabel. Konvensi penulisan biasanya ditentukan oleh tim developer untuk menyelaraskan penulisan antar developer sehingga tidak membingungkan dan selalu konsisten. Anda bisa mengikuti salah satu konvensi tersebut dan menggunakannya secara konsisten.
Oops…
Saya rasa beberapa bagian dalam story ini membingungkan karena ada istilah maupun kode yang belum pernah saya perkenalkan dalam seri ini. Membahas dasar-dasar suatu bahasa pemrograman memang perlu pemahaman yang menyeluruh. Satu bahasan akan terkait dengan bahasan lainnya. Saya akan cover semua hal tersebut pada story berbeda.
Selanjutnya: Kenal JavaScript: Data Types — Part 1
Sumber dan bahan bacaan lanjut:
