Panduan Gaya JavaScript: Menulis Kode yang Bersih dan Konsisten

Hai teman-teman yang sedang belajar coding! Saya sangat senang untuk memulai perjalanan ini bersama Anda saat kita telusuri dunia panduan gaya JavaScript. Sebagai seseorang yang telah mengajar pemrograman selama bertahun-tahun, saya sungguh-sungguh ingin menekankan 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 bicarakan mengapa kita memerlukan panduan gaya. Bayangkan Anda sedang bekerja pada proyek kelompok, dan setiap orang menulis kode mereka dengan cara yang berbeda. Itu akan menjadi chaos! Panduan gaya adalah seperti set aturan yang semua orang setuju untuk mengikuti, membuat kode mudah untuk dibaca dan dikelola.

Sekarang, mari kita masuk ke detil 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: Menyinggahi 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. Berikut adalah cara 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 siswa
*/
function greetStudent(name) {
// Kode disini
}

Ingat, komentar yang bagus menjelaskan mengapa, bukan apa. Kode itu sendiri seharusnya cukup jelas untuk menunjukkan apa yang dilakukannya.

Declarasi 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 menggunakan 'var' dalam JavaScript modern
// var oldWay = "Kita tidak melakukan ini lagi";

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

Nama Identifier dalam camelCase

H3: Konvensi Nama yang Mengerti

Dalam JavaScript, kita menggunakan camelCase untuk sebagian besar identifier. Itu seperti menyatukan kata-kata, tetapi mengkapitalkan 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; // Ekscepsi: konstanta seringkali dalam ALL_CAPS

Spasi dan Kurung

H3: Memberikan Ruang untuk Kode Anda

Penempatan spasi membuat kode Anda mudah dibaca. Itu seperti menambah paragraf ke esei 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 terkait. Berikut adalah cara 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 terorganisir. Itu akan menghindari Anda dari kesulitan nanti!

Aturan Pernyataan

H3: Satu Pernyataan, Satu Baris

Secara umum, kita mencoba untuk menjaga setiap pernyataan di baris sendiri. Itu seperti menulis kalimat-kalimat dalam esei - setiap kalimat harus mengekspresikan satu ide 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 didebug.

Panjang Baris

H3: Menyusun Hal-hal Kompak

Cobalah untuk menjaga panjang baris kode Anda dalam batasan yang wajar - biasanya sekitar 80-100 karakter. Jika suatu baris menjadi terlalu panjang, cobalah untuk membaginya:

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

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

Ini meningkatkan keterbacaan dan membuat kode Anda terlihat rapih.

Menyusun Semua Hal Bersama

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

/**
* 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;

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

return total.toFixed(2);
}

// Contoh penggunaan
const shoppingCart = [
{ name: "T-shirt", price: 15.99 },
{ name: "Jeans", price: 39.99 },
{ name: "Shoes", price: 59.99 }
];

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

Contoh ini menunjukkan indentasi yang baik, komentar, deklarasi variabel, camelCase, penempatan spasi, penggunaan objek, dan adherens ke panduan panjang baris.

Ingat, mengikuti panduan gaya ini akan membuat kode Anda mudah dibaca dan mudah dikelola. Itu adalah keterampilan yang akan membantu Anda sepanjang perjalanan pemrograman Anda. Selamat coding, 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)`	Mengformatkan sebuah bilangan agar memiliki dua desimal

Credits: Image by storyset

Tutorial Sebelumnya:

JavaScript - Kinerja