Hướng dẫn phong cách JavaScript: Viết mã sạch và nhất quán

Xin chào các bạn đang học lập trình! Tôi rất vui mừng được bắt đầu hành trình này cùng các bạn khi chúng ta khám phá thế giới của các hướng dẫn phong cách JavaScript. Là một người đã dạy lập trình trong nhiều năm, tôi không thể nhấn mạnh đủ tầm quan trọng của việc viết mã sạch và nhất quán. Điều này giống như việc giữ phòng của bạn ngăn nắp - nó giúp bạn dễ dàng tìm thấy và quản lý mọi thứ hơn!

Tại sao chúng ta cần một hướng dẫn phong cách?

Trước khi chúng ta đi sâu vào, hãy nói về lý do chúng ta cần một hướng dẫn phong cách. Hãy tưởng tượng bạn đang làm việc trên một dự án nhóm, và mọi người viết mã theo cách khác nhau. Đó sẽ là hỗn loạn! Một hướng dẫn phong cách giống như một bộ quy tắc mà mọi người đồng ý tuân theo, giúp mã dễ đọc và duy trì hơn.

Bây giờ, hãy cùng tìm hiểu chi tiết về các hướng dẫn phong cách JavaScript!

Định dạng mã

H3: Nền tảng của mã dễ đọc

Định dạng mã giống như nền tảng của một ngôi nhà - nó rất quan trọng cho cấu trúc và稳定性. Trong JavaScript, chúng ta thường sử dụng khoảng trống hoặc tab để định dạng mã. Hãy xem một ví dụ:

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

Trong ví dụ này, chúng ta đã định dạng mã bên trong hàm và câu lệnh if-else. Điều này giúp rõ ràng phần mã nào thuộc cùng một nhóm.

Bình luận

H3: Để lại những dấu vết cho tương lai

Bình luận giống như những ghi chú nhỏ bạn để lại cho chính mình (hoặc người khác) trong mã. Chúng giải thích mã làm gì mà không ảnh hưởng đến cách nó chạy. Dưới đây là cách chúng ta sử dụng chúng:

// Đây là một bình luận một dòng

/*
Đây là một
bình luận nhiều dòng
*/

/**
* Đây là một bình luận JSDoc
* Nó được sử dụng để tài liệu hóa hàm
* @param {string} name - Tên của học sinh
*/
function greetStudent(name) {
// Mã ở đây
}

Nhớ rằng, bình luận tốt giải thích tại sao, không phải là gì. Mã itself nên rõ ràng để thấy nó đang làm gì.

Khai báo biến

H3: Giới thiệu các nhân vật trong mã của bạn

Biến giống như những nhân vật trong câu chuyện của mã. Trong JavaScript, chúng ta có một số cách để khai báo chúng:

// Sử dụng 'let' cho các biến có thể thay đổi
let age = 25;

// Sử dụng 'const' cho các biến không thay đổi
const PI = 3.14159;

// Tránh sử dụng 'var' trong JavaScript hiện đại
// var oldWay = "Chúng ta không làm như vậy nữa";

Luôn khai báo biến trước khi sử dụng chúng, và cố gắng sử dụng const除非你知道 giá trị sẽ thay đổi.

Tên nhận biết trong camelCase

H3: Quy ước đặt tên hợp lý

Trong JavaScript, chúng ta sử dụng camelCase cho hầu hết các nhận biết. Nó giống như gộp các từ lại với nhau, nhưng viết hoa mỗi từ mới (trừ từ đầu tiên). Dưới đây là cách nó trông như thế nào:

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

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

const MAX_SIZE = 100; // ngoại lệ: các hằng số thường viết in hoa

Khoảng cách và dấu ngoặc

H3: Đưa mã của bạn thở

Khoảng cách phù hợp làm cho mã của bạn dễ đọc hơn. Nó giống như thêm đoạn văn vào một bài luận dài. Hãy xem chúng ta sử dụng khoảng cách và dấu ngoặc như thế nào:

// Khoảng cách tốt
if (condition) {
doSomething();
} else {
doSomethingElse();
}

// Gọi hàm
console.log("Hello, World!");

// Mảng và đối tượng
let colors = ["red", "green", "blue"];
let person = { name: "Alice", age: 30 };

Chú ý rằng chúng ta sử dụng khoảng trống xung quanh các toán tử và sau dấu phẩy. Đó là những chi tiết nhỏ làm cho mã của bạn trông chuyên nghiệp!

Quy tắc đối tượng

H3: Cấu trúc dữ liệu của bạn

Đối tượng giống như các容器 chứa dữ liệu liên quan. Dưới đây là cách chúng ta thường cấu trúc chúng:

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

// Truy cập thuộc tính đối tượng
console.log(student.name);
console.log(student["age"]);

Giữ các thuộc tính đối tượng của bạn nhất quán và tổ chức tốt. Nó sẽ giúp bạn tránh được những cơn đau đầu sau này!

Quy tắc câu lệnh

H3: Một suy nghĩ, một dòng

Nói chung, chúng ta cố gắng giữ mỗi câu lệnh trên một dòng. Nó giống như viết câu trong một bài luận - mỗi câu nên biểu đạt một suy nghĩ hoàn chỉnh:

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

if (c > 10) {
console.log("c lớn hơn 10");
}

Điều này làm cho mã của bạn dễ đọc và gỡ lỗi hơn.

Độ dài dòng

H3: Giữ mọi thứ gọn gàng

Hãy cố gắng giữ các dòng mã của bạn ở độ dài hợp lý - thường là khoảng 80-100 ký tự. Nếu một dòng quá dài, hãy chia nó ra:

// Quá dài
let result = veryLongFunctionName(extremelyLongVariableName1, extremelyLongVariableName2, extremelyLongVariableName3);

// Tốt hơn
let result = veryLongFunctionName(
extremelyLongVariableName1,
extremelyLongVariableName2,
extremelyLongVariableName3
);

Điều này cải thiện khả năng đọc và làm cho mã của bạn trông ngăn nắp hơn.

Kết hợp tất cả lại

Bây giờ chúng ta đã xem xét tất cả các hướng dẫn phong cách, hãy xem một ví dụ hoàn chỉnh rằng kết hợp tất cả các yếu tố:

/**
* Tính tổng giá trị của các mặt hàng trong giỏ hàng
* @param {Object[]} items - Mảng các mặt hàng trong giỏ hàng
* @returns {number} Tổng giá trị
*/
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;

// Đăng ký giá của mỗi mặt hàng với thuế
console.log(`${item.name}: $${itemPrice.toFixed(2)}`);
}

return total.toFixed(2);
}

// Ví dụ sử dụng
const shoppingCart = [
{ name: "Áo phông", price: 15.99 },
{ name: "Quần jean", price: 39.99 },
{ name: "Giày", price: 59.99 }
];

let finalPrice = calculateTotalPrice(shoppingCart);
console.log(`Tổng giá: $${finalPrice}`);

Ví dụ này展示 proper định dạng, bình luận, khai báo biến, camelCase đặt tên, khoảng cách, sử dụng đối tượng và tuân theo quy tắc độ dài dòng.

Nhớ rằng, tuân theo các hướng dẫn phong cách này sẽ làm cho mã của bạn dễ đọc và duy trì hơn. Đây là một kỹ năng sẽ phục vụ bạn tốt trong suốt hành trình lập trình của bạn. Chúc các bạn may mắn và mã của bạn luôn sạch và nhất quán!

Credits: Image by storyset