Cara menggunakan SCOOE di JavaScript

Apa itu variabel?

Variabel adalah wadah untuk menyimpan data atau bisa juga disebut nama yang mewakili suatu nilai. Variabel dapat diisi dengan berbagai nilai seperti string [teks], angka [angka], objek array dan seterusnya 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.

Sintaksis.  

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

Keterangan

• kata kunci diisi dengan var , biarkan , dan const.
• variable-name adalah nama variabel yang bisa ditentukan sesuai keinginan kita, namun harus tetap sesuai dengan aturan.
• = adalah operator penugasan.
• nilai adalah nilai yang ingin Anda masukkan ke dalam variabel.
• ;[titik koma] digunakan untuk mengakhiri pernyataan. Tapi titik koma di JavaScript bersifat opsional

Contoh variabel

Lihat Pena
Contoh variabel oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Konvensi penamaan variabel

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

• Dapat berisi huruf, angka, garis bawah [_], dan tanda dolar [$].
• Harus dimulai dengan huruf, garis bawah [_], atau tanda dolar [$].
• Case sensitive [Case sensitive], variabel nama akan dianggap berbeda dengan Nama.
• Tidak dapat menggunakan kata kunci terbalik atau kata-kata yang sudah digunakan oleh JavaScript seperti const, let, var, function, class, if, for dan sebagainya pada.

Berikut ini adalah contoh penamaan variabel yang benar

Lihat Pena
Contoh true variable oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Berikut adalah contoh penamaan yang salah

Lihat Pena
Contoh variabel yang salah oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

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

Berikut adalah contoh nama variabel yang menggunakan gaya penulisan camelCase. Nama depan, generateLoginToken

Jika nama variabel hanya berisi satu kata, maka harus ditulis dengan huruf kecil semua. Jika ada lebih dari satu kata, maka huruf pertama kata kedua dan seterusnya ditulis dengan huruf kapital

Gaya penamaan ini bersifat opsional, kita bisa menggunakan semua huruf kecil atau semua huruf besar atau menggunakan garis bawah sebagai pemisah, namun disarankan untuk menggunakan camelCase

Deklarasi dan Inisialisasi variabel javascript

Saat kita mendeklarasikan sebuah variabel, artinya kita meminta ruang kosong di memori, sedangkan inisialisasi adalah mengisi data ke dalam ruang memori tersebut

Kita dapat membuat atau mendeklarasikan variabel atau wadah terlebih dahulu, lalu menginisialisasi atau memasukkan datanya nanti

Lihat Pena
Deklarasi variabel oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Isi variabel data diubah dengan tipe data yang berbeda [tipe Dinamis]

Dalam beberapa bahasa pemrograman, saat kita membuat variabel dengan data numerik, kita tidak bisa menggantinya dengan data selain angka

Selain itu, kita juga perlu menuliskan secara eksplisit jenis data yang akan ditampung oleh suatu variabel

Namun, dalam JavaScript, tidak demikian, kita dapat mengubah isi variabel menggunakan tipe data yang berbeda, dan kita tidak perlu menulis tipe data secara eksplisit saat membuat variabel. Kita dapat melakukannya jika membuat variabel menggunakan kata kunci var atau biarkan.

Contoh

Lihat Pena
Tanpa judul oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Perbedaan var , mari , dan const

Ada beberapa kata kunci yang bisa digunakan untuk membuat variabel bukan tanpa alasan, masing-masing memiliki perilaku yang berbeda.

Singkatnya, inilah perbedaannya.  

Mari belajar lebih banyak

Var

Sebelum ES6 muncul, kita hanya bisa membuat variabel menggunakan kata kunci var. Namun, variabel yang dibuat menggunakan kata kunci var memiliki beberapa kekurangan.  

Itulah mengapa kata kunci baru diperkenalkan. Baiklah, Sekarang kita pelajari dulu behavior variable var.

Var dapat dideklarasikan ulang

Ketika sebuah variabel dibuat dengan kata kunci var, kita dapat mendeklarasikan ulang variabel dengan nama yang sama, nilai sebelumnya akan ditimpa

Lihat Pena
deklarasi ulang var oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Nilai var dapat diubah

Variabel yang dideklarasikan menggunakan kata kunci var dapat diubah nilainya, baik menggunakan tipe data yang sama maupun berbeda

Lihat Pena
var bisa diubah oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Lingkup Fungsi di var

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

Ketika variabel var dideklarasikan di dalam ruang lingkup fungsi, variabel hanya dapat digunakan di dalam fungsi, tidak dapat digunakan di luar fungsi

Ini juga berlaku untuk let dan const, variabel yang dideklarasikan dengan kata kunci apa pun di dalam fungsi tidak dapat diakses di luar fungsi

Lihat Pena
function scope var by Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Lingkup Blok di var

Sebuah variabel dikatakan berada dalam cakupan blok jika berada di antara { dan } pernyataan bersyarat [if, else, else if], pengulangan [for, while , do while], switch statement, dan lain-lain di luar cakupan fungsi atau global.

Lihat Pena
Tanpa judul oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Ini masalahnya, berdasarkan kode di atas kita telah mendeklarasikan variabel nama. Jika kita secara sadar ingin mendeklarasikan ulang variabel nama ini tidak masalah sama sekali, tetapi jika niat kita adalah membuat variabel baru bernama nama dalam lingkup blok sedangkan variabel nama telah dideklarasikan dalam lingkup global yang terjadi seperti pada contoh di atas. Itu bahkan mengubah nilai variabel yang diubah sebelumnya.

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

Mengangkat di var

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

Deklarasi variabel dan menggunakan var serta deklarasi fungsi akan diangkat [diangkat] di atas ruang lingkupnya sebelum eksekusi kode

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

Agar lebih mudah dipahami, Anda dapat menggunakan alat yang dapat memvisualisasikan eksekusi kode JavaScript. Sehingga Anda dapat melihat langkah-langkah eksekusi di JavaScript

Contoh.  

Lihat Pena
mengangkat var oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Hasil dari contoh diatas adalah undefined, dan perlu anda ketahui bahwa undefined adalah salah satu dari nilai atau tipe data.  

Lalu, mengapa JavaScript menginisialisasi dengan nilai tersebut padahal kita tidak pernah menulisnya. Selain itu, variabel var batch = 255; . log[batch];juga dideklarasikan setelah console.log[batch]; secara logis kita seharusnya tidak dapat menggunakan variabel.

Inilah yang dimaksud dengan istilah hoisting [diangkat]

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

1. Sebelum dieksekusi, naikkan dan inisialisasi variabel dengan kata kunci var dengan nilai undefined
2. Jalankan konsol. log[kumpulan].
3. Inisialisasi dengan nilai variabel

membiarkan

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

let Tidak dapat dideklarasikan ulang

Tidak seperti var, variabel yang dideklarasikan dengan kata kunci let tidak dapat dideklarasikan ulang.

Contoh

Lihat Pena
biar tidak bisa dideklarasikan ulang oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Nilai biarkan dapat diubah

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

Lihat Pena
biar bisa diubah oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Lingkup Fungsi di biarkan

Ini juga berlaku untuk biarkan dan const , variabel yang dideklarasikan dengan kata kunci apa pun di dalam fungsi tidak dapat diakses di luar fungsi.

Sama seperti var, variabel let yang dideklarasikan di dalam ruang lingkup fungsi hanya dapat diakses di dalamnya, tidak dapat diakses di luar fungsi.

Lihat Pena
Tanpa judul oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Blok Lingkup di biarkan

Mari selesaikan masalah block scope yang terjadi pada variabel var . Variabel biarkan yang dideklarasikan di dalam ruang lingkup blok hanya dapat digunakan di dalamnya, tidak dapat digunakan di luar.

Contoh

Lihat Pena
Tanpa judul oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Contoh diatas adalah contoh yang mirip dengan contoh pada variabel var tadi. Tapi konsol. log[name] menghasilkan hasil yang berbeda. Karena variabel nama yang ada di lingkup blok hanya bisa digunakan di lingkup blok.

Mengangkat biarkan

Variabel biar tidak diangkat seperti var , jadi kita tidak dapat mengakses variabel sebelum deklarasi.

Lihat Pena
Mengangkat let oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Konst

Sama seperti biarkan, tetapi nilai variabel const tidak dapat diubah.

Const tidak dapat dideklarasikan ulang

Kita tidak dapat mendeklarasikan ulang variabel const.

Lihat Pena
deklarasi ulang const oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Nilai const tidak dapat diubah

Nilai variabel yang dibuat menggunakan const tidak dapat diubah.

Lihat Pena
Tanpa judul oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Tapi kita bisa mengubah elemen dalam array

Lihat Pena
const dengan array oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Hal yang sama berlaku untuk objek

Lihat Pena
objek menggunakan const oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Lingkup Fungsi di const

Sama seperti biarkan , variabel const dideklarasikan di dalam ruang lingkup fungsi hanya dapat diakses di dalam, tidak dapat diakses di luar.

Lihat Pena
function scope const oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Lingkup Blok di const

Sama seperti biarkan , variabel const dideklarasikan di dalam ruang lingkup blok hanya dapat diakses di dalam, tidak dapat diakses di luar.

Lihat Pena
block scope const oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Mengangkat di const

Masalah hoisting juga sama dengan biarkan , variabel const tidak bisa digunakan sebelum dideklarasikan.

Lihat Pena
mengangkat const oleh Aulia Brahmantio Diaz [@brahmantiodiaz]
di CodePen

Kesimpulan  

1. Biarkan dan const mengikuti sistem cakupan blok, di mana cakupan variabel hanya dapat diakses di dalam blok
2. Semua kata kunci mengikuti sistem ruang lingkup fungsi, di mana ruang lingkup variabel hanya dapat diakses di dalam fungsi
3. Nilai let dan var dapat diubah
4. Nilai const tidak dapat diubah
5. Biasakan menggunakan let dan const jika tidak ingin kebingungan nilai saat kita mengakses variabel yang sudah ada di blok lain
6. Gunakan const saat data tidak dapat diubah

Demikian pembahasan kita kali ini. Jika Anda tertarik untuk mempelajari lebih lanjut tentang pemrograman javascript dan bahasa pemrograman lainnya, Anda dapat mengunjungi media sosial Akademi Xsis untuk informasi lebih lanjut tentang Bootcamp

Apa ruang lingkup dalam javascript?

Apa itu ruang lingkup fungsi?

Bagaimana cara mendeklarasikan variabel dalam javascript?

Apa itu ruang lingkup leksikal?