Cara menggunakan VERIABLES pada JavaScript

Pada pembahasan kali ini kita akan belajar membuat variabel menggunakan ketiga kata kunci yaitu var, let, dan const supaya kita bisa membuat variabel yang tepat sesuai dengan kondisi yang kita buat dalam pemrograman Javascript nantinya. sekarang kita akan membahas variabel javascript ini.

Selain membahas variable kita juga akan membahas tentang hosting dan scope. Di JavaScript kita dapat membuat variabel menggunakan kata kunci var, let, dan const, masing-masing memiliki beberapa perbedaan. Kenapa kita perlu memahami varibale? Karena variable ini berkaitan dengan cara kita menyimpan data di memori.

1. Apa itu variabel?
2. Cara membuat variabel
3. Aturan penamaan variabel
4. Deklarasi dan Inisialisasi
5. Isi variabel data diubah dengan tipe data yang berbeda (Dynamic type)
6. Perbedaan var,let, dan const
   • VAR
   • LET
   • CONST
7. Kesimpulan

Apa itu variabel?

Variabel adalah sebuah wadah untuk menyimpan data atau bisa dibilang nama yang mewakili sebuah nilai. Variabel bisa diisi dengan berbagai macam nilai seperti string (teks), number (angka), objek array dan sebagainya yang akan dibahas pada artikel tipe data . Pertama mari kita mulai dengan belajar tentang variabel javascript.

Cara membuat variabel JavaScript

Untuk membuat variabel di JavaScript kita bisa menggunakan var, let, dan const. 

Syntax : 

keyword nama-variabel; 
//atau 
keyword nama-variabel = value;

Keterangan:

• keyword diisi dengan var, let, dan const.
• nama-variabel adalah nama variabel yang bisa ditentukan sesuai keinginan kita, tetapi tetap harus sesuai aturan.
• = adalah operator assignment.
• value adalah nilai yang ingin dimasukkan ke dalam variabel.
• ;(semicolon) digunakan untuk mengakhiri statement. Namun semicolon di JavaScript bersifat opsional

Contoh variabel :

See the Pen
Contoh variabel by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Aturan penamaan variabel 

Nama variabel dapat dibuat sesuai keinginan, namun harus sesuai dengan beberapa aturan yaitu :

• Boleh berisi huruf, angka, underscore (_), dan tanda dolar ($).
• Harus diawali dengan huruf, underscore (_), atau tanda dolar ($).
• Case sensitive (Peka huruf besar dan kecil), variabel name akan dianggap berbeda dengan Name.
• Tidak boleh menggunakan reversed keyword atau kata-kata yang sudah digunakan oleh JavaScript Seperti const, let, var, function, class, if, for dan sebagainya. 

Berikut ini contoh penamaan variabel yang benar :

See the Pen
Contoh variabel benar by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Berikut ini contoh penamaan yang salah :

See the Pen
Contoh variabel salah by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Penulisan nama variabel biasanya ditulis menggunakan gaya camelCase yang digunakan oleh para programmer JavaScript, jadi sangat disarankan untuk mengikutinya.

Berikut ini contoh nama variabel yang menggunakan gaya penulisan camelCase : namaDepan, generateLoginToken.

Jika nama variabel hanya mengandung satu kata, sebaiknya ditulis dengan huruf kecil semua. Jika lebih dari satu kata, huruf pertama dari kata kedua dan seterusnya ditulis menggunakan huruf besar.

Gaya penamaan ini opsional, kita bisa menggunakan huruf kecil semua atau huruf besar semua atau menggunakan underscore sebagai pemisah, namun disarankan menggunakan camelCase.

Deklarasi dan Inisialisasi variabel javascript

Ketika kita mendeklarasikan variabel, itu berarti kita meminta ruang kosong di memori, sedangkan inisialisasi adalah mengisi data ke dalam ruang memori tersebut.

Kita bisa membuat atau mendeklarasikan variabel atau wadah terlebih dahulu, lalu menginisialisasinya atau memasukkan datanya nanti.

See the Pen
Deklarasi variabel by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Isi variabel data diubah dengan tipe data yang berbeda (Dynamic type) 

Di beberapa bahasa pemrograman, ketika kita membuat variabel dengan data angka, kita tidak bisa menggantinya dengan data selain angka.

Selain itu, kita juga perlu menuliskan secara eksplisit tipe data yang akan ditampung oleh sebuah variabel.

Namun di JavaScript hal tersebut tidak berlaku, kita bisa mengubah isi dari variabel menggunakan tipe data yang berbeda, dan kita tidak perlu menuliskan tipe data secara eksplisit saat membuat variabel. Ini dapat kita lakukan jika kita membuat variabel menggunakan keyword var atau let.

Contoh :

See the Pen
Untitled by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Perbedaan var,let, dan const

Adanya beberapa keyword yang bisa digunakan untuk membuat variabel bukan karena tanpa alasan, masing-masing memiliki behavior yang berbeda-beda.

Secara singkat, inilah perbedaannya : 

Mari kita pelajari lebih lanjut

Var

Sebelum ES6 muncul, kita hanya bisa membuat variabel menggunakan keyword var. Tapi, variabel yang dibuat menggunakan keyword var memiliki beberapa kekurangan. 

Itulah mengapa keyword baru diperkenalkan. Nah, Sekarang mari kita pelajari terlebih dahulu behavior variabel var.

Ketika variabel dibuat dengan keyword var, kita bisa mendeklarasikan ulang variabel dengan nama yang sama, nilai sebelumnya akan ditimpa.

See the Pen
deklarasi ulang var by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Kode yang kita tulis dapat dikatakan berada di dalam function scope (lingkup fungsi) jika berada di antara { dan } sebuah fungsi. Kita akan mempelajari lebih banyak tentang fungsi di JavaScript nanti. 

Ketika variabel var di deklarasikan di dalam function scope, variabel tersebut hanya bisa digunakan di dalam function tersebut, tidak bisa digunakan di luar fungsi.

Ini berlaku juga untuk let dan const, variabel yang dideklarasikan dengan keyword apapun di dalam fungsi tidak dapat diakses di luar fungsi.

See the Pen
function scope var by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Variabel dikatakan berada di dalam block scope jika berada di antara { dan } conditional statement (if, else, else if), perulangan (for, while, do while), switch statement, dan sebagainya selain lingkup fungsi atau global.

See the Pen
Untitled by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Disinilah masalahnya, berdasarkan kode diatas kita sudah mendeklarasikan variabel nama. Jika kita secara sadar mau mendeklarasikan ulang variabel nama ini tidak menjadi masalah sama sekali, tetapi jika niat kita ingin membuat variabel baru bernama nama di dalam block scope sementara variabel nama tersebut sudah dideklarasikan di global scope yang terjadi seperti contoh di atas. Itu malah mengubah nilai pada variabel sebelumnya berubah.

Jika kita telah menggunakan nama di bagian lain dari kode yang telah kita buat, ini bisa menjadi masalah dan menyebabkan bug. Itulah sebabnya let dan const hadir.

Hoisting adalah istilah yang digunakan untuk menggambarkan bagaimana konteks eksekusi bekerja di JavaScript.

Deklarasi variabel dan menggunakan var dan juga deklarasi fungsi akan diangkat (hoisting) ke atas cakupannya sebelum eksekusi kode.

Sebelum eksekusi, JavaScript akan mencari variabel var dan deklarasi fungsi terlebih dahulu, kemudian menginisialisasinya dengan undefined.

Untuk memudahkan memahaminya, kamu dapat menggunakan alat yang dapat memvisualisasikan eksekusi kode JavaScript. Agar kamu dapat melihat langkah-langkah eksekusi di JavaScript

Contoh : 

See the Pen
hoisting var by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Hasil dari contoh di atas adalah undefined, dan kalian harus tahu bahwa undefined itu merupakan salah satu nilai atau tipe data. 

Lalu, mengapa JavaScript menginisialisasinya dengan nilai tersebut padahal kita tidak pernah menuliskannya. Selain itu variabel var batch = 255; juga dideklarasikan setelah console.log(batch); secara logika harusnya kita tidak bisa menggunakan variabel tersebut.

Inilah yang dimaksud dengan istilah hoisting (diangkat).

Berikut ini adalah langkah-langkah yang dilakukan JavaScript untuk mengeksekusi kode di atas: 

1. Sebelum eksekusi, angkat dan inisialisasi variabel dengan keyword var dengan nilai undefined.
2. Eksekusi console.log(batch).
3. Inisialisasi dengan nilai dari variabel tersebut.

let

Keyword let biasanya digunakan untuk membuat variabel yang nilainya dapat diubah. Ini diperkenalkan untuk mengatasi masalah var yang telah dibahas di atas. 

Ini berlaku juga untuk let dan const, variabel yang dideklarasikan dengan keyword apapun di dalam fungsi tidak dapat diakses di luar fungsi.

Sama seperti var, variabel let yang di deklarasi di dalam function scope hanya bisa diakses di dalamnya, tidak dapat diakses di luar fungsi.

See the Pen
Untitled by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Let menyelesaikan masalah block scope yang terjadi pada variabel var. Variabel let yang di deklarasikan di dalam block scope hanya bisa digunakan di dalamnya, tidak bisa digunakan di luar. 

Contoh :

See the Pen
Untitled by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Contoh di atas adalah contoh yang mirip dengan contoh pada variabel var tadi. Tapi console.log(nama) menghasilkan hasil yang berbeda. Karena variabel nama yang berada di block scope hanya dapat digunakan di dalam block scope.

Variabel let tidak diangkat (hoisting) seperti var, jadi kita tidak bisa mengakses variabel sebelum deklarasi.

See the Pen
Hoisting let by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Const

Sama seperti let, namun nilai variabel const tidak dapat diubah.

Sama seperti let, variabel const yang dideklarasikan di dalam function scope hanya bisa diakses di dalamnya, tidak bisa diakses di luar.

See the Pen
function scope const by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Sama seperti let, variabel const yang dideklarasikan di dalam block scope hanya bisa diakses di dalamnya, tidak bisa diakses di luar.

See the Pen
block scope const by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Kesimpulan 

1. Let dan const menganut sistem block scope, yang mana cakupan variabelnya hanya bisa di akses di dalam bloknya saja.
2. Semua keyword menganut sistem function scope, yang mana cakupan variabelnya hanya bisa di akses di dalam functionnya saja.
3. Nilai pada let dan var bisa diubah.
4. Nilai pada const tidak bisa diubah.
5. Biasakan gunakan let dan const jika tidak ingin terjadi kerancuan nilai ketika kita mengakses variabel yang ternyata sudah ada di dalam block lain.
6. Gunakan const ketika datanya tidak berubah-ubah.

Demikian pembahasan kita kali ini. Jika kalian berminat untuk belajar lebih lanjut tentang pemrograman javascript dan bahasa pemrograman lainnya bisa coba kunjungi social media Xsis Academy untuk info lebih lanjut mengenai Bootcamp Xsis Academy.

Temukan video tutorial lainnya dari Tim Trainer Xsis Academy pada channel ETG berikut ini Youtube Equine Technologies Group

———–

Penulis : Aulia Brahmantio Diaz – Webmaster Xsis Mitra Utama

Post Views: 412

Bagaimana cara penggunaan variabel pada JavaScript?

Apa yang dimaksud dengan variabel pada JavaScript?

Apa bedanya Let dan Var?

Apa saja yang perlu diperhatikan ketika ingin membuat sebuah variabel?