Hari ini kami menerbitkan terjemahan dari bagian selanjutnya dari manual JavaScript. Di sini kita berbicara tentang gaya kode dan struktur leksikal program.
→
Bagian 1: program pertama, fitur bahasa, standar→
Bagian 2: gaya kode dan struktur program→
Bagian 3: variabel, tipe data, ekspresi, objek→
Bagian 4: fitur→
Bagian 5: array dan loop→
Bagian 6: pengecualian, titik koma, literal wildcard→
Bagian 7: mode ketat, kata kunci ini, acara, modul, perhitungan matematis→
Bagian 8: Tinjauan Umum Fitur ES6→
Bagian 9: Gambaran Umum Standar ES7, ES8, dan ES9
Gaya pemrograman
"Gaya pemrograman" atau "standar pengkodean" atau "gaya kode" adalah seperangkat konvensi yang digunakan dalam program penulisan. Mereka mengatur fitur desain kode dan prosedur untuk menggunakan konstruksi ambigu. Dalam kasus kami, kami berbicara tentang program yang ditulis dalam JavaScript. Jika seorang programmer bekerja pada proyek tertentu sendiri, maka gaya kode yang digunakan olehnya mewakili "kontrak" dengan dirinya sendiri. Jika kita berbicara tentang tim, maka ini adalah perjanjian yang digunakan oleh semua anggota tim. Kode yang ditulis menggunakan seperangkat aturan tertentu membuat basis kode suatu proyek perangkat lunak seragam, meningkatkan keterbacaan dan kelengkapan kode.
Ada banyak panduan gaya. Berikut adalah 2 di antaranya yang paling umum digunakan di dunia JavaScript:
Anda dapat memilih salah satu dari mereka atau membuat aturan sendiri. Yang paling penting adalah konsisten menggunakan aturan yang sama saat mengerjakan proyek tertentu. Selain itu, jika, misalnya, Anda mematuhi satu set aturan, dan dalam proyek yang sudah ada yang perlu Anda kerjakan, aturan Anda sendiri digunakan, Anda harus mematuhi aturan proyek.
Anda dapat memformat kode secara manual, atau Anda dapat menggunakan alat otomatisasi untuk proses ini. Sebenarnya, memformat kode JS dan memeriksanya sebelum diluncurkan adalah topik besar yang terpisah.
Berikut adalah salah satu publikasi kami yang ditujukan untuk alat-alat yang relevan dan fitur penggunaannya.
Gaya yang digunakan dalam panduan ini
Penulis materi ini, sebagai contoh panduan gayanya sendiri, mengutip seperangkat aturan yang ia coba ikuti ketika menulis kode. Dia mengatakan bahwa kode dalam contoh berfokus pada versi standar terbaru, tersedia dalam versi browser modern. Ini berarti bahwa untuk menjalankan kode seperti itu di browser lama, Anda harus menggunakan transpiler seperti
Babel . Transponder JS memungkinkan Anda untuk mengkonversi kode yang ditulis menggunakan fitur baru bahasa sehingga dapat dijalankan di browser yang tidak mendukung fitur-fitur baru ini. Transpiler dapat memberikan dukungan untuk fitur bahasa yang belum standar, yaitu, tidak diterapkan bahkan di sebagian besar browser modern.
Berikut adalah daftar aturan yang dimaksud.
- Perataan. Untuk menyelaraskan blok kode, spasi digunakan (2 spasi per 1 tingkat penyelarasan), tab tidak digunakan.
- Titik koma. Titik koma tidak digunakan.
- Panjang garis 80 karakter (jika mungkin).
- Satu baris komentar. Komentar semacam itu digunakan dalam kode.
- Komentar multi-baris. Komentar-komentar ini digunakan untuk mendokumentasikan kode.
- Kode yang tidak digunakan. Kode yang tidak digunakan tidak tetap dalam program berkomentar jika Anda membutuhkannya nanti. Kode seperti itu, jika masih diperlukan, dapat ditemukan di sistem kontrol versi, jika digunakan, atau dalam sesuatu seperti catatan dari seorang programmer yang dimaksudkan untuk menyimpan kode tersebut.
- Aturan berkomentar. Tidak perlu mengomentari hal-hal yang jelas, tambahkan komentar ke kode yang tidak membantu untuk memahami esensinya. Jika kode menjelaskan sendiri berkat fungsi yang dipilih dengan baik dan nama variabel serta deskripsi fungsi JSDoc, Anda tidak boleh menambahkan komentar tambahan ke kode ini.
- Deklarasi variabel. Variabel selalu dinyatakan secara eksplisit untuk mencegah polusi pada objek global. Kata kunci
var tidak digunakan. Jika tidak direncanakan untuk mengubah nilai variabel selama eksekusi program, itu dinyatakan dalam bentuk konstanta (konstanta serupa juga sering disebut "variabel") menggunakan kata kunci const , menggunakannya secara default - kecuali untuk kasus-kasus ketika ia direncanakan untuk mengubah nilai variabel. Dalam kasus seperti itu, kata kunci let digunakan. - Konstanta Jika beberapa nilai dalam program ini adalah konstanta, namanya terdiri dari huruf kapital. Misalnya,
CAPS . Garis bawah ( _ ) digunakan untuk memisahkan bagian-bagian nama yang terdiri dari beberapa kata. - Fungsi Deklarasi fungsi menggunakan sintaks panah. Deklarasi fungsi reguler hanya berlaku dalam kasus khusus. Secara khusus, dalam metode objek atau desainer. Ini dilakukan karena fitur
this . Fungsi harus dideklarasikan menggunakan kata kunci const , dan, jika mungkin, perlu untuk secara eksplisit mengembalikan hasil pekerjaan mereka dari mereka. Penggunaan fungsi bersarang tidak dilarang untuk menyembunyikan beberapa mekanisme tambahan dari kode utama.
Berikut adalah contoh dari sepasang fungsi panah sederhana:
const test = (a, b) => a + b const another = a => a + 2
- Memberi Nama Entitas. Nama fungsi, variabel dan metode objek selalu dimulai dengan huruf kecil, nama yang terdiri dari beberapa kata ditulis menggunakan gaya unta (nama-nama seperti
camelCase ). Hanya nama fungsi dan kelas konstruktor yang dimulai dengan huruf kapital. Jika Anda menggunakan kerangka kerja yang memiliki persyaratan khusus untuk penamaan entitas, gunakan aturan yang ditentukan olehnya. Nama file harus terdiri dari huruf kecil, kata-kata terpisah dalam nama dipisahkan dengan tanda hubung ( - ). - Aturan untuk membuat dan memformat ekspresi.
jika . Berikut adalah beberapa cara untuk menulis
if conditional
if :
if (condition) { statements } if (condition) { statements } else { statements } if (condition) { statements } else if (condition) { statements } else { statements }
untuk . Untuk mengatur loop, baik standar
for konstruksi digunakan, contoh yang diberikan di bawah ini, atau
for of loop.
for in .hasOwnProperty() harus dihindari - kecuali mereka digunakan dengan konstruksi
.hasOwnProperty() . Berikut adalah diagram lingkaran untuk:
for (initialization; condition; update) { statements }
sementara Berikut ini adalah contoh skematik dari
while :
while (condition) { statements }
lakukan . Berikut adalah struktur dari
do loop:
do { statements } while (condition);
beralih . Berikut ini adalah diagram
switch kondisi bersyarat:
switch (expression) { case expression: statements default: statements }
coba . Berikut adalah beberapa opsi desain untuk konstruksi
try-catch . Contoh pertama menunjukkan konstruksi ini tanpa blok
finally , yang kedua dengan blok seperti itu.
try { statements } catch (variable) { statements } try { statements } catch (variable) { statements } finally { statements }
- Spasi . Spasi harus digunakan dengan bijak, yaitu, sehingga mereka berkontribusi pada peningkatan keterbacaan kode. Jadi, spasi ditempatkan setelah kata kunci diikuti oleh tanda kurung buka, mereka dikelilingi oleh operator yang berlaku untuk dua operan (
+ , - , / , * , && dan lainnya). Spasi digunakan di dalam for loop, setelah setiap titik koma, untuk memisahkan bagian-bagian dari header loop dari satu sama lain. Spasi ditempatkan setelah koma. - Baris kosong . Baris kosong menandai blok kode yang berisi operasi yang terhubung secara logis satu sama lain.
- Tanda kutip . Saat bekerja dengan string, tanda kutip tunggal (
' ) digunakan, bukan tanda kutip ganda ( " ). Kutipan ganda biasanya ditemukan dalam atribut HTML, jadi menggunakan tanda kutip tunggal membantu menghindari masalah saat bekerja dengan string HTML. Jika Anda perlu melakukan beberapa operasi dengan string, menyiratkan , misalnya, gabungannya, literal templat harus digunakan, yang digambar menggunakan backticks ( ` ).
Struktur leksikal kode JavaScript
Mari kita bicara tentang blok bangunan kode JavaScript. Khususnya - tentang penggunaan pengkodean Unicode, tentang titik koma, spasi, tentang kepekaan bahasa terhadap huruf, tentang komentar, tentang literal, tentang pengidentifikasi dan tentang kata-kata yang dicadangkan.
NicUodeode
Kode JavaScript diwakili menggunakan pengkodean Unicode. Ini, khususnya, berarti bahwa dalam kode, Anda dapat menggunakan, mengatakan, karakter emotikon sebagai nama variabel. Untuk melakukannya, tentu saja, tidak disarankan. Penting di sini bahwa nama-nama pengidentifikasi, tunduk pada
aturan tertentu, dapat ditulis dalam bahasa apa pun, misalnya, dalam bahasa Jepang atau Cina.
▍ titik koma
Sintaks JavaScript mirip dengan sintaks C. Anda dapat menemukan banyak proyek di mana, di akhir setiap baris, ada tanda titik koma. Namun, titik koma di akhir baris dalam JavaScript adalah opsional. Dalam sebagian besar kasus, Anda dapat melakukannya tanpa titik koma. Pengembang yang, sebelum JS, menggunakan bahasa di mana tanda titik koma tidak diterapkan, cenderung menghindarinya dalam JavaScript.
Jika, ketika menulis kode, Anda tidak menggunakan konstruksi aneh, atau tidak memulai baris dengan tanda kurung atau kurung siku, maka dalam 99,9% kasus Anda tidak akan membuat kesalahan (jika ada, linter dapat memperingatkan Anda tentang kemungkinan kesalahan). Untuk "desain aneh", misalnya, kita dapat mengaitkan ini:
return variable
Apakah menggunakan titik koma atau tidak adalah masalah pribadi bagi setiap programmer. Penulis manual ini, misalnya, mengatakan bahwa ia memutuskan untuk tidak menggunakan titik koma di mana mereka tidak diperlukan, sebagai akibatnya, mereka sangat jarang dalam contoh yang diberikan di sini.
▍ Kesenjangan
JavaScript tidak memperhatikan spasi. Tentu saja, dalam situasi tertentu, ketiadaan ruang akan mengarah pada kesalahan (dan juga ruang yang tidak patut di mana seharusnya tidak ada), tetapi seringkali tidak ada perbedaan antara tidak adanya ruang di bagian tertentu dari program dan keberadaan satu atau lebih ruang. Pernyataan serupa juga berlaku tidak hanya untuk spasi, tetapi juga untuk umpan baris, dan untuk tab. Ini terutama terlihat, misalnya, pada kode yang diperkecil. Lihatlah, misalnya, ke dalam kode apa yang diproses dengan
Kompiler Penutupan berubah menjadi.
Secara umum, harus dicatat bahwa, dengan memformat kode program, lebih baik tidak melakukan ekstrem, mengikuti seperangkat aturan tertentu.
▍ Sensitivitas Huruf
JavaScript adalah bahasa yang case-sensitive. Ini berarti bahwa itu membedakan, misalnya, nama-nama variabel
something dan
Something . Hal yang sama berlaku untuk pengidentifikasi apa pun.
▍ Komentar
Anda dapat menggunakan dua jenis komentar dalam JavaScript. Jenis pertama adalah komentar satu baris:
//
Mereka, seperti namanya, terletak pada satu baris. Segala sesuatu yang mengikuti
// karakter dianggap sebagai komentar.
Tipe kedua adalah komentar multi-baris:
/* */
Di sini, komentar adalah semua yang ada di antara kombinasi karakter
/* dan
*/ .
▍ Literal dan pengidentifikasi
Literal adalah nilai tertentu yang ditulis dalam kode sumber program. Misalnya, dapat berupa string, angka, nilai logis, atau struktur yang lebih kompleks - objek literal (memungkinkan Anda membuat objek, diformat dengan kurung kurawal) atau array literal (memungkinkan Anda membuat array, diformat menggunakan kurung siku). Berikut ini beberapa contohnya:
5 'Test' true ['a', 'b'] {color: 'red', shape: 'Rectangle'}
Tidak akan ada manfaat khusus dari meluncurkan program di mana konstruksi tersebut ditemui. Untuk bekerja dengan literal dalam program, mereka pertama kali ditugaskan ke variabel atau diteruskan ke fungsi.
Identifier adalah urutan karakter yang dapat digunakan untuk mengidentifikasi variabel, fungsi, objek. Itu dapat dimulai dengan huruf, tanda dolar (
$ ) atau dengan garis bawah (
_ ), dapat berisi angka, dan, jika perlu, karakter Unicode seperti emotikon (meskipun, seperti yang telah disebutkan, lebih baik tidak melakukan ini). Berikut adalah beberapa contoh pengidentifikasi:
Test test TEST _test Test1 $test
Tanda dolar biasanya digunakan saat membuat pengidentifikasi yang menyimpan referensi ke elemen DOM.
▍ Kata-kata yang dicadangkan
Berikut ini adalah daftar kata yang disediakan oleh bahasa. Anda tidak dapat menggunakannya sebagai pengidentifikasi.
breakdoinstanceoftypeofcaseelsenewvarcatchfinallyreturnvoidcontinueforswitchwhiledebuggerfunctionthiswithdefaultifthrowdeleteintryclassenumextendssuperconstexportimportimplementsletprivatepublicinterfacepackageprotectedstaticyield
Ringkasan
Hari ini kita membahas gaya dan struktur program yang ditulis dalam JavaScript. Lain kali kita akan berbicara tentang variabel, tipe data, ekspresi, dan objek.
Pembaca yang budiman! Panduan gaya JavaScript apa yang Anda gunakan?