Panduan gaya JavaScript: Menulis kode bersih dan konsisten

Hai teman-teman pemula penulis kode! Saya sangat senang untuk memulai perjalanan ini bersama Anda saat kita telusuri dunia panduan gaya JavaScript. Sebagai seseorang yang telah mengajar pemrograman selama tahun tahun, saya sungguh-sungguh tidak bisa menekankan cukup betapa pentingnya menulis kode yang bersih dan konsisten. Itu seperti menjaga kamar Anda rapi - itu membuat segala sesuatu mudah untuk ditemukan dan dikelola!

JavaScript - Style Guide

Mengapa Kita Butuh Panduan Gaya?

Sebelum kita mendalam, mari berbicara tentang mengapa kita memerlukan panduan gaya. Bayangkan Anda bekerja pada proyek kelompok, dan setiap orang menulis kode mereka secara berbeda. Itu akan menjadi chaos! Panduan gaya adalah seperti set aturan yang semua orang setuju untuk mengikuti, membuat kode lebih mudah untuk dibaca dan dipelihara.

Sekarang, mari kita masuk ke hal-hal mendalam panduan gaya JavaScript!

Indentasi Kode

H3: Dasar Kode yang Mudah Dibaca

Indentasi adalah seperti dasar rumah - itu sangat penting untuk struktur dan stabilitas. Dalam JavaScript, kita biasanya menggunakan spasi atau tab untuk mengindentasi kode kita. Mari lihat contoh:

function greetStudent(name) {
if (name) {
console.log("Hello, " + name + "!");
} else {
console.log("Hello, student!");
}
}

Dalam contoh ini, kita mengindentasi kode di dalam fungsi dan pernyataan if-else. Hal ini membuat jelas bagian mana dari kode yang bersama-sama.

Komentar

H3: Menyingkap Jejak untuk Nanti

Komentar adalah seperti catatan kecil yang Anda tinggalkan untuk diri Anda sendiri (atau orang lain) dalam kode Anda. Mereka menjelaskan apa yang dilakukan kode tanpa mengganggu bagaimana kode berjalan. Mari lihat bagaimana kita menggunakannya:

// Ini adalah komentar baris tunggal

/*
Ini adalah
komentar multi-baris
*/

/**
* Ini adalah komentar JSDoc
* Itu digunakan untuk mendokumentasikan fungsi
* @param {string} name - Nama murid
*/
function greetStudent(name) {
// Kode disini
}

Ingat, komentar yang bagus menjelaskan mengapa, bukan apa. Kode itu sendiri harus cukup jelas untuk menunjukkan apa yang sedang dilakukan.

Deklarasi Variabel

H3: Mengenalkan Karakter dalam Cerita Kode Anda

Variabel adalah seperti karakter dalam cerita kode Anda. Dalam JavaScript, kita memiliki beberapa cara untuk mendeklarasikan mereka:

// Menggunakan 'let' untuk variabel yang dapat berubah
let age = 25;

// Menggunakan 'const' untuk variabel yang tidak akan berubah
const PI = 3.14159;

// Hindari penggunaan 'var' dalam JavaScript modern
// var oldWay = "Kami tidak melakukan ini lagi";

Selalu deklarasikan variabel Anda sebelum menggunakannya, dan cobalah untuk menggunakan const kecuali Anda tahu nilai akan berubah.

Nama Pengenal dalam camelCase

H3: Konvensi Nama yang Menggunakan Akal

Dalam JavaScript, kita menggunakan camelCase untuk sebagian besar pengenal. Itu seperti menyatukan kata-kata, tetapi mengkapitalisir setiap kata baru (kecuali yang pertama). Mari lihat bagaimana itu terlihat:

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;

function calculateArea(width, height) {
return width * height;
}

const MAX_SIZE = 100; // Ekspektasi: konstanta seringkali dalam ALL_CAPS

Spasi dan Kurung

H3: Memberi Kode Anda Ruang untuk Bernapas

Penempatan spasi membuat kode Anda mudah dibaca. Itu seperti menambah paragraf ke esai yang panjang. Mari lihat bagaimana kita menggunakan spasi dan kurung:

// Penempatan spasi yang baik
if (condition) {
doSomething();
} else {
doSomethingElse();
}

// Pemanggilan fungsi
console.log("Hello, World!");

// Array dan objek
let colors = ["red", "green", "blue"];
let person = { name: "Alice", age: 30 };

Perhatikan bagaimana kita menggunakan spasi di sekitar operator dan setelah koma. Itu adalah detail kecil yang membuat kode Anda terlihat profesional!

Aturan Objek

H3: Mengstrukturkan Data Anda

Objek adalah seperti wadah untuk data yang berkaitan. Mari lihat bagaimana kita biasanya mengstrukturkan mereka:

const student = {
name: "Bob",
age: 20,
grades: {
math: 90,
science: 85
},
isEnrolled: true
};

// Mengakses properti objek
console.log(student.name);
console.log(student["age"]);

Jaga properti objek Anda konsisten dan teratur. Itu akan menghindari Anda dari kesulitan nanti!

Aturan Pernyataan

H3: Satu Pemikiran, Satu Baris

Secara umum, kita mencoba untuk menjaga setiap pernyataan di baris sendiri. Itu seperti menulis kalimat-kalimat dalam esai - setiap kalimat harus menyatakan pemikiran lengkap:

let a = 5;
let b = 10;
let c = a + b;

if (c > 10) {
console.log("c lebih besar dari 10");
}

Hal ini membuat kode Anda mudah dibaca dan di debug.

Panjang Baris

H3: Menjaga Hal-hal Kompak

Coba untuk menjaga panjang baris kode Anda diukuran yang wajar - biasanya sekitar 80-100 karakter. Jika suatu baris menjadi terlalu panjang, pecahkanlah itu:

// Terlalu panjang
let result = veryLongFunctionName(extremelyLongVariableName1, extremelyLongVariableName2, extremelyLongVariableName3);

// Lebih baik
let result = veryLongFunctionName(
extremelyLongVariableName1,
extremelyLongVariableName2,
extremelyLongVariableName3
);

Hal ini meningkatkan keterbacaan dan membuat kode Anda terlihat rapih.

Menggabungkan Semua

Sekarang kita telah melihat semua panduan gaya ini, mari kita lihat contoh lengkap yang menggabungkan semua hal ini:

/**
* Menghitung harga total item di keranjang belanja
* @param {Object[]} items - Array item di keranjang
* @returns {number} Harga total
*/
function calculateTotalPrice(items) {
let total = 0;
const TAX_RATE = 0.08;

for (let i = 0; i < items.length; i++) {
let item = items[i];
let itemPrice = item.price * (1 + TAX_RATE);

total += itemPrice;

// Catat harga setiap item dengan pajak
console.log(`${item.name}: $${itemPrice.toFixed(2)}`);
}

return total.toFixed(2);
}

// Contoh penggunaan
const shoppingCart = [
{ name: "Kaus", price: 15.99 },
{ name: "Celana", price: 39.99 },
{ name: "Sepatu", price: 59.99 }
];

let finalPrice = calculateTotalPrice(shoppingCart);
console.log(`Harga total: $${finalPrice}`);

Contoh ini menampilkan indentasi yang benar, komentar, deklarasi variabel, penggunaan camelCase, spasi, penggunaan objek, dan adherensi ke panduan panjang baris.

Ingat, mengikuti panduan gaya ini akan membuat kode Anda lebih mudah dibaca dan dipelihara. Itu adalah keterampilan yang akan membantu Anda sepanjang perjalanan pemrograman Anda. Selamat pemrograman, dan may your code always be clean and consistent!

Metode	Deskripsi
`calculateTotalPrice(items)`	Menghitung harga total item di keranjang belanja, termasuk pajak
`console.log()`	Mengeluarkan pesan ke konsol untuk debugging dan informasi
`toFixed(2)`	Memformat sebuah nomor untuk memiliki dua tempat desimal

Credits: Image by storyset

Tutorial Sebelumnya:

JavaScript - Prestasi