Seringkali, aplikasi JavaScript perlu bekerja dengan informasi. Berikut dua contohnya:
Toko online – informasinya mungkin mencakup barang yang dijual dan keranjang belanja.
Aplikasi obrolan – informasinya mungkin mencakup pengguna, pesan, dan banyak lagi.
Variabel digunakan untuk menyimpan informasi ini.
Variabel adalah “penyimpanan bernama” untuk data. Kita bisa menggunakan variabel untuk menyimpan barang, pengunjung, dan data lainnya.
Untuk membuat variabel dalam JavaScript, gunakan kata kunci let .
Pernyataan di bawah ini membuat (dengan kata lain: mendeklarasikan ) sebuah variabel dengan nama “pesan”:
biarkan pesan;
Sekarang, kita dapat memasukkan beberapa data ke dalamnya dengan menggunakan operator penugasan = :
biarkan pesan; pesan = 'Halo'; // simpan string 'Halo' dalam variabel bernama pesan
String tersebut sekarang disimpan ke dalam area memori yang terkait dengan variabel. Kita dapat mengaksesnya menggunakan nama variabel:
biarkan pesan; pesan = 'Halo!'; peringatan (pesan); // menampilkan konten variabel
Singkatnya, kita dapat menggabungkan deklarasi dan penugasan variabel ke dalam satu baris:
biarkan pesan = 'Halo!'; // tentukan variabelnya dan tetapkan nilainya peringatan (pesan); // Halo!
Kita juga bisa mendeklarasikan beberapa variabel dalam satu baris:
biarkan pengguna = 'John', umur = 25, pesan = 'Halo';
Ini mungkin tampak lebih singkat, tetapi kami tidak menyarankannya. Demi keterbacaan yang lebih baik, harap gunakan satu baris per variabel.
Varian multiline sedikit lebih panjang, namun lebih mudah dibaca:
biarkan pengguna = 'John'; misalkan umur = 25; biarkan pesan = 'Halo';
Beberapa orang juga mendefinisikan banyak variabel dalam gaya multiline ini:
biarkan pengguna = 'John', umur = 25, pesan = 'Halo';
…Atau bahkan dengan gaya “koma-pertama”:
biarkan pengguna = 'John' , umur = 25 , pesan = 'Halo';
Secara teknis, semua varian ini melakukan hal yang sama. Jadi, ini soal selera dan estetika pribadi.
var bukannya let
Dalam skrip lama, Anda mungkin juga menemukan kata kunci lain: var dari pada let :
var pesan = 'Halo';
Kata kunci var hampir sama dengan let . Ini juga mendeklarasikan variabel tetapi dengan cara yang sedikit berbeda, “jadul”.
Ada sedikit perbedaan antara let dan var , tapi itu belum menjadi masalah bagi kami. Kami akan membahasnya secara rinci di bab "Var" yang lama.
Kita dapat dengan mudah memahami konsep “variabel” jika kita membayangkannya sebagai “kotak” data, dengan stiker bernama unik di atasnya.
Misalnya, variabel message dapat dibayangkan sebagai kotak berlabel "message" dengan nilai "Hello!" di dalamnya:
Kita dapat memasukkan nilai apa pun ke dalam kotak.
Kita juga dapat mengubahnya sebanyak yang kita inginkan:
biarkan pesan; pesan = 'Halo!'; pesan = 'Dunia!'; // nilai berubah peringatan (pesan);
Ketika nilainya diubah, data lama dihapus dari variabel:
Kita juga dapat mendeklarasikan dua variabel dan menyalin data dari satu variabel ke variabel lainnya.
biarkan halo = 'Halo dunia!'; biarkan pesan; // salin 'Halo dunia' dari halo ke dalam pesan pesan = halo; // sekarang dua variabel menyimpan data yang sama waspada (halo); // Halo dunia! peringatan (pesan); // Halo dunia!
Mendeklarasikan dua kali memicu kesalahan
Sebuah variabel harus dideklarasikan hanya sekali.
Deklarasi berulang dari variabel yang sama adalah sebuah kesalahan:
biarkan pesan = "Ini"; // mengulangi 'biarkan' menyebabkan kesalahan biarkan pesan = "Itu"; // SyntaxError: 'pesan' telah dideklarasikan
Jadi, kita harus mendeklarasikan suatu variabel satu kali dan kemudian merujuknya tanpa let .
Bahasa fungsional
Menarik untuk dicatat bahwa ada bahasa pemrograman fungsional murni, seperti Haskell, yang melarang perubahan nilai variabel.
Dalam bahasa seperti itu, setelah nilainya disimpan “di dalam kotak”, nilai itu akan tetap ada selamanya. Jika kita perlu menyimpan sesuatu yang lain, bahasa tersebut memaksa kita untuk membuat kotak baru (mendeklarasikan variabel baru). Kita tidak bisa menggunakan kembali yang lama.
Meskipun mungkin tampak sedikit aneh pada pandangan pertama, bahasa-bahasa ini cukup mampu untuk berkembang secara serius. Lebih dari itu, ada area seperti komputasi paralel dimana batasan ini memberikan manfaat tertentu.
Ada dua batasan pada nama variabel di JavaScript:
Nama hanya boleh berisi huruf, angka, atau simbol $ dan _ .
Karakter pertama tidak boleh berupa angka.
Contoh nama yang sah:
biarkan nama pengguna; biarkan tes123;
Jika nama berisi banyak kata, camelCase biasanya digunakan. Yaitu: kata-kata berjalan satu demi satu, setiap kata kecuali yang pertama dimulai dengan huruf kapital: myVeryLongName .
Menariknya – tanda dolar '$' dan garis bawah '_' juga dapat digunakan pada nama. Itu adalah simbol biasa, seperti huruf, tanpa arti khusus.
Nama-nama ini valid:
misalkan $ = 1; // mendeklarasikan variabel dengan nama "$" misalkan _ = 2; // dan sekarang menjadi variabel dengan nama "_" peringatan($+ _); // 3
Contoh nama variabel yang salah:
biarkan 1a; // tidak bisa dimulai dengan angka biarkan namaku; // tanda hubung '-' tidak diperbolehkan dalam nama
Kasus penting
Variabel bernama apple dan APPLE adalah dua variabel yang berbeda.
Huruf non-Latin diperbolehkan, namun tidak disarankan
Dimungkinkan untuk menggunakan bahasa apa pun, termasuk huruf Sirilik, logogram Cina, dan sebagainya, seperti ini:
biarkan имя = '...'; misalkan 我 = '...';
Secara teknis, tidak ada kesalahan di sini. Nama seperti itu diperbolehkan, namun terdapat konvensi internasional untuk menggunakan bahasa Inggris dalam nama variabel. Sekalipun kita menulis naskah kecil, umurnya mungkin panjang. Orang-orang dari negara lain mungkin perlu membacanya suatu saat nanti.
Nama yang dipesan
Terdapat daftar kata-kata yang dicadangkan, yang tidak dapat digunakan sebagai nama variabel karena digunakan oleh bahasa itu sendiri.
Misalnya: let , class , return , dan function dicadangkan.
Kode di bawah ini memberikan kesalahan sintaksis:
biarkan biarkan = 5; // tidak dapat memberi nama variabel "biarkan", error! biarkan kembali = 5; // juga tidak bisa menamainya "return", error!
Sebuah tugas tanpa use strict
Biasanya, kita perlu mendefinisikan variabel sebelum menggunakannya. Namun di masa lalu, secara teknis dimungkinkan untuk membuat variabel hanya dengan menetapkan nilai tanpa menggunakan let . Ini masih berfungsi sekarang jika kita tidak menggunakan use strict pada skrip kita untuk menjaga kompatibilitas dengan skrip lama.
// catatan: tidak ada "use strict" dalam contoh ini angka = 5; // variabel "num" dibuat jika tidak ada peringatan(angka); // 5
Ini adalah praktik buruk dan akan menyebabkan kesalahan dalam mode ketat:
"gunakan ketat"; angka = 5; // kesalahan: angka tidak ditentukan
Untuk mendeklarasikan variabel konstan (tidak berubah), gunakan const dari pada let :
const ulang tahunku = '18.04.1982';
Variabel yang dideklarasikan menggunakan const disebut “konstanta”. Mereka tidak dapat ditugaskan kembali. Upaya untuk melakukannya akan menyebabkan kesalahan:
const ulang tahunku = '18.04.1982'; ulang tahunku = '01.01.2001'; // error, tidak dapat menetapkan ulang konstanta!
Ketika seorang programmer yakin bahwa suatu variabel tidak akan pernah berubah, mereka dapat mendeklarasikannya dengan const untuk menjamin dan mengkomunikasikan fakta tersebut kepada semua orang.
Ada praktik luas yang menggunakan konstanta sebagai alias untuk nilai yang sulit diingat yang diketahui sebelum eksekusi.
Konstanta tersebut diberi nama menggunakan huruf kapital dan garis bawah.
Sebagai contoh, mari kita membuat konstanta untuk warna dalam format “web” (heksadesimal):
const COLOR_RED = "#F00"; const COLOR_GREEN = "#0F0"; const COLOR_BLUE = "#00F"; const COLOR_ORANGE = "#FF7F00"; // ...saat kita perlu memilih warna misalkan warna = COLOR_ORANGE; peringatan(warna); // #FF7F00
Manfaat:
COLOR_ORANGE jauh lebih mudah diingat daripada "#FF7F00" .
Jauh lebih mudah untuk salah mengetik "#FF7F00" dibandingkan COLOR_ORANGE .
Saat membaca kode, COLOR_ORANGE jauh lebih bermakna daripada #FF7F00 .
Kapan kita harus menggunakan huruf kapital untuk sebuah konstanta dan kapan kita harus memberi nama secara normal? Mari kita perjelas.
Menjadi “konstan” berarti nilai suatu variabel tidak pernah berubah. Namun beberapa konstanta diketahui sebelum eksekusi (seperti nilai heksadesimal untuk warna merah) dan beberapa konstanta dihitung saat run-time, selama eksekusi, namun tidak berubah setelah penetapan awalnya.
Misalnya:
const pageLoadTime = /* waktu yang dibutuhkan halaman web untuk memuat */;
Nilai pageLoadTime tidak diketahui sebelum halaman dimuat, sehingga diberi nama secara normal. Namun tetap konstan karena tidak berubah setelah penugasan.
Dengan kata lain, konstanta dengan nama kapital hanya digunakan sebagai alias untuk nilai “hard-coded”.
Berbicara tentang variabel, ada satu hal lagi yang sangat penting.
Nama variabel harus memiliki arti yang bersih dan jelas, yang menggambarkan data yang disimpannya.
Penamaan variabel adalah salah satu keterampilan paling penting dan kompleks dalam pemrograman. Sekilas nama variabel dapat mengungkapkan kode mana yang ditulis oleh pemula versus pengembang berpengalaman.
Dalam proyek nyata, sebagian besar waktu dihabiskan untuk memodifikasi dan memperluas basis kode yang ada daripada menulis sesuatu yang benar-benar terpisah dari awal. Ketika kita kembali ke suatu kode setelah melakukan sesuatu yang lain selama beberapa waktu, akan lebih mudah untuk menemukan informasi yang diberi label dengan baik. Atau dengan kata lain, ketika variabel mempunyai nama baik.
Harap luangkan waktu untuk memikirkan nama yang tepat untuk suatu variabel sebelum mendeklarasikannya. Melakukan hal itu akan memberi Anda imbalan yang besar.
Beberapa aturan yang baik untuk diikuti adalah:
Gunakan nama yang dapat dibaca manusia seperti userName atau shoppingCart .
Jauhi singkatan atau nama pendek seperti a , b , dan c , kecuali Anda tahu apa yang Anda lakukan.
Buatlah nama sedeskriptif dan sesingkat mungkin. Contoh nama buruk adalah data dan value . Nama-nama seperti itu tidak berarti apa-apa. Anda hanya boleh menggunakannya jika konteks kode memperjelas data atau nilai mana yang dirujuk oleh variabel.
Setujui persyaratan dalam tim Anda dan dalam pikiran Anda. Jika pengunjung situs disebut “pengguna” maka kita harus memberi nama variabel terkait currentUser atau newUser bukan currentVisitor atau newManInTown .
Kedengarannya sederhana? Memang benar, tetapi membuat nama variabel yang deskriptif dan ringkas dalam praktiknya tidak demikian. Lakukanlah.
Gunakan kembali atau buat?
Dan catatan terakhir. Ada beberapa pemrogram malas yang, alih-alih mendeklarasikan variabel baru, malah cenderung menggunakan kembali variabel yang sudah ada.
Akibatnya, variabel-variabelnya seperti kotak di mana orang-orang melemparkan benda-benda berbeda tanpa mengganti stikernya. Apa yang ada di dalam kotak itu sekarang? Siapa yang tahu? Kita perlu mendekat dan memeriksanya.
Pemrogram seperti itu menghemat sedikit pada deklarasi variabel tetapi kehilangan sepuluh kali lebih banyak pada proses debug.
Variabel tambahan itu baik, bukan jahat.
Minifier dan browser JavaScript modern mengoptimalkan kode dengan cukup baik, sehingga tidak akan menimbulkan masalah kinerja. Menggunakan variabel berbeda untuk nilai berbeda bahkan dapat membantu mesin mengoptimalkan kode Anda.
Kita dapat mendeklarasikan variabel untuk menyimpan data dengan menggunakan kata kunci var , let , atau const .
let – adalah deklarasi variabel modern.
var – adalah deklarasi variabel kuno. Biasanya kami tidak menggunakannya sama sekali, tapi kami akan membahas perbedaan halus dari let di bab "var" yang lama, kalau-kalau Anda membutuhkannya.
const – seperti let , tetapi nilai variabelnya tidak dapat diubah.
Variabel harus diberi nama sedemikian rupa sehingga memudahkan kita memahami apa yang ada di dalamnya.
pentingnya: 2
Deklarasikan dua variabel: admin dan name .
Tetapkan nilai "John" ke name .
Salin nilai dari name ke admin .
Tampilkan nilai admin menggunakan alert (harus menampilkan “John”).
Pada kode di bawah, setiap baris berhubungan dengan item dalam daftar tugas.
biarkan admin, nama; // dapat mendeklarasikan dua variabel sekaligus nama = "Yohanes"; admin = nama; peringatan( admin ); // "Yohanes"
pentingnya: 3
Buat variabel dengan nama planet kita. Bagaimana Anda memberi nama variabel seperti itu?
Buat variabel untuk menyimpan nama pengunjung situs web saat ini. Bagaimana Anda memberi nama variabel itu?
Sederhana saja:
biarkan ourPlanetName = "Bumi";
Perhatikan, kita bisa menggunakan nama yang lebih pendek planet , tapi mungkin tidak jelas planet apa yang dimaksud. Senang rasanya menjadi lebih bertele-tele. Setidaknya sampai variabelnya NotTooLong.
biarkan CurrentUserName = "John";
Sekali lagi, kita dapat menyingkatnya menjadi userName jika kita mengetahui dengan pasti bahwa pengguna tersebut adalah pengguna saat ini.
Editor modern dan pelengkapan otomatis membuat nama variabel yang panjang mudah ditulis. Jangan menghematnya. Nama dengan 3 kata di dalamnya tidak masalah.
Dan jika editor Anda tidak memiliki pelengkapan otomatis yang tepat, dapatkan yang baru.
pentingnya: 4
Periksa kode berikut:
const ulang tahun = '18.04.1982'; const age = someCode(ulang tahun);
Di sini kita mempunyai konstanta birthday untuk tanggal tersebut, dan juga konstanta age .
age dihitung dari birthday menggunakan someCode() , yang berarti pemanggilan fungsi yang belum kami jelaskan (kami akan segera menjelaskannya!), tetapi detailnya tidak penting di sini, intinya age dihitung berdasarkan pada birthday .
Apakah benar menggunakan huruf besar untuk birthday ? Untuk age ? Atau bahkan untuk keduanya?
const ULANG TAHUN = '18.04.1982'; // jadikan ulang tahun menjadi huruf besar? const AGE = someCode(BIRTHDAY); // buat age menjadi huruf besar?
Kami biasanya menggunakan huruf besar untuk konstanta yang “dikodekan keras”. Atau dengan kata lain, ketika nilainya diketahui sebelum dieksekusi dan langsung ditulis ke dalam kode.
Dalam kode ini, birthday persis seperti itu. Jadi kita bisa menggunakan huruf besar untuk itu.
Sebaliknya, age dievaluasi dalam run-time. Hari ini kita mempunyai satu umur, setahun setelahnya kita akan mempunyai umur yang lain. Itu konstan dalam arti tidak berubah melalui eksekusi kode. Tapi ini sedikit “kurang konstan” dibandingkan birthday : ini dihitung, jadi kita harus menggunakan huruf kecil untuk itu.