skip to Main Content
Tutorial Javascript Dasar #03 – Variabel JavaScript: Var, Let, Dan Const

Tutorial Javascript Dasar #03 – Variabel JavaScript: var, let, dan const

Tutorial Javascript Dasar #03 – Variabel JavaScript: var, let, dan const

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.

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

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.

Variabel yang dideklarasikan menggunakan keyword var dapat diubah nilainya, entah itu menggunakan tipe data yang sama maupun berbeda.

See the Pen
var dapat diubah
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. 

Tidak seperti var, variabel yang dideklarasi dengan keyword let tidak dapat dideklarasi ulang.

Contoh :

See the Pen
let tidak dapat di deklarasi ulang
by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Sama seperti var, variabel yang dideklarasi menggunakan let nilainya dapat diubah menggunakan tipe data yang sama ataupun tipe data yang berbeda.

See the Pen
let dapat di ubah
by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

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.

Nilai variabel yang dibuat menggunakan const tidak dapat diubah.

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

Namun kita bisa mengubah elemen yang ada di dalam array:

See the Pen
const with array
by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

Begitu juga dengan object :

See the Pen
object using const
by Aulia Brahmantio Diaz (@brahmantiodiaz)
on CodePen.

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.

Soal hoisting juga sama seperti let, variabel const tidak dapat digunakan sebelum dideklarasikan.

See the Pen
hoisting 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

Tutorial JavaScript Dasar

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top