Kenal JavaScript: Variable

Jundi Alwan
Jul 25, 2017 · 7 min read
Merak Jantan. Sumber: WIkipedia

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.

Hubungan antara declaration, initialization, dan assignment

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:

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?

Mencetak variable yang sudah dideklarasikan namun belum diberi value. Via repl.it

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.

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:

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

Variable telah di-assign dengan value 7. (Hiraukan tulisan undefined berwarna hijau) Via repl.it

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.

Reassigning variable pada JavaScript

Declaring dan Assigning Dalam Satu Statement

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

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.

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

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.

Tidak ada error yang menunjukkan bahwa variable belum dideklarasikan karena secara otomatis variable dideklarasikan secara global

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:

Walaupun begitu Anda tetap diperbolehkan menggunakan angka pada nama variable.
Contoh valid:

(2) Nama variabel tidak boleh mengandung operator matematika, operator logika, atau operator bitwise

Contoh tidak valid:

Operator 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:

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

Contoh valid:

(4) Nama variabel tidak boleh mengandung spasi

Contoh tidak valid:

: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:

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

Untuk 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

-

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:

(2) underscore_case

Contoh:

(3) PascalCase

Contoh:

-

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.


Jundi Alwan

Written by

A Polymath. Learn everyday, everywhere. Currently working with amazing team at Bahasa.ai.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade