Các quy tắc cần tuân thủ khi viết code JS

​

Các quy tắc cần tuân thủ khi viết code JavaScript

Viết mã JavaScript sạch, dễ đọc và dễ bảo trì là một kỹ năng quan trọng đối với mọi lập trình viên. Dưới đây là danh sách các quy tắc phổ biến và tốt nhất mà bạn nên tuân thủ khi viết code JavaScript:

Quy tắc về định dạng và cấu trúc

a. Sử dụng indentation (thụt lề)

• Sử dụng 2 hoặc 4 dấu cách (spaces) để thụt lề.
• Tránh sử dụng tab vì nó có thể gây ra sự không nhất quán giữa các môi trường.

Ví dụ:

function calculateSum(a, b) {
    if (typeof a !== "number" || typeof b !== "number") {
        throw new Error("Both arguments must be numbers");
    }
    return a + b;
}

b. Đặt dấu chấm phẩy (;) ở cuối mỗi câu lệnh

Mặc dù JavaScript cho phép bỏ qua dấu chấm phẩy trong nhiều trường hợp, nhưng việc thêm dấu chấm phẩy giúp tránh lỗi và tăng tính rõ ràng.

Ví dụ:

let x = 10;
let y = 20;
console.log(x + y);

c. Viết hoa và đặt tên biến, hàm theo quy ước camelCase

• Biến và hàm: Sử dụng camelCase (viết thường chữ cái đầu tiên, viết hoa chữ cái đầu của từ tiếp theo).
• Class: Sử dụng PascalCase (viết hoa chữ cái đầu tiên của mỗi từ).

Ví dụ:

// Biến và hàm
let userName = "Alice";
function calculateTotal() {}

// Class
class UserAccount {}

d. Tránh sử dụng khoảng trắng thừa

Không để khoảng trắng thừa ở cuối dòng hoặc giữa các toán tử.

Ví dụ:

// Không nên
let x = 10   ;

// Nên
let x = 10;

Quy tắc về khai báo biến

a. Luôn sử dụng const và let, tránh dùng var

• const: Sử dụng khi giá trị không thay đổi.
• let: Sử dụng khi giá trị có thể thay đổi.
• var: Không khuyến khích vì phạm vi hoạt động không rõ ràng (hoisting).

Ví dụ:

const pi = 3.14;
let counter = 0;

counter++;

b. Khai báo biến trước khi sử dụng

Tránh sử dụng biến mà chưa khai báo, điều này có thể dẫn đến tạo biến toàn cầu không mong muốn.

Ví dụ:

// Không nên
x = 10;

// Nên
let x = 10;

Quy tắc về hàm

a. Hạn chế độ dài của hàm

Hàm nên ngắn gọn và thực hiện một nhiệm vụ cụ thể. Nếu hàm quá dài, hãy tách thành các hàm nhỏ hơn.

Ví dụ:

// Không nên
function processUserData(user) {
    // Xử lý dữ liệu phức tạp...
}

// Nên
function validateUser(user) { /* ... */ }
function formatUserData(user) { /* ... */ }

b. Sử dụng tham số mặc định

Thiết lập giá trị mặc định cho tham số để tránh lỗi khi người dùng không truyền đủ đối số.

Ví dụ:

function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

c. Tránh side effects

Hạn chế việc thay đổi trạng thái bên ngoài (global variables, DOM,...) trong hàm. Hãy sử dụng pure functions càng nhiều càng tốt.

Ví dụ:

// Không nên
let total = 0;

function addToTotal(amount) {
    total += amount;
}

// Nên
function addToTotal(total, amount) {
    return total + amount;
}

Quy tắc về kiểm tra và xử lý lỗi

a. Kiểm tra kiểu dữ liệu đầu vào

Luôn kiểm tra kiểu dữ liệu của tham số để đảm bảo hàm hoạt động đúng.

Ví dụ:

function add(a, b) {
    if (typeof a !== "number" || typeof b !== "number") {
        throw new Error("Both arguments must be numbers");
    }
    return a + b;
}

b. Xử lý lỗi bằng try-catch

Sử dụng try-catch để bắt và xử lý lỗi trong các đoạn mã có khả năng gây lỗi runtime.

Ví dụ:

function divide(a, b) {
    try {
        if (b === 0) throw new Error("Cannot divide by zero");
        return a / b;
    } catch (error) {
        console.error(error.message);
    }
}

Quy tắc về hiệu suất

a. Tránh lặp lại công việc không cần thiết

Nếu một giá trị được tính toán nhiều lần, hãy lưu trữ nó trong một biến để tránh tính toán lại.

Ví dụ:

// Không nên
for (let i = 0; i < Math.random(); i++) {
    console.log(i);
}

// Nên
const randomValue = Math.random();
for (let i = 0; i < randomValue; i++) {
    console.log(i);
}

b. Tối ưu hóa vòng lặp

Tránh sử dụng các phương thức nặng nề (như .map, .filter) trong vòng lặp lớn nếu không cần thiết.

Ví dụ:

// Không nên
for (let i = 0; i < array.length; i++) {
    array[i] = array[i] * 2;
}

// Nên
array.forEach((item, index) => {
    array[index] = item * 2;
});

Quy tắc về tài nguyên

a. Giải phóng bộ nhớ khi không cần thiết

Tránh giữ lại các tham chiếu không cần thiết đến đối tượng hoặc biến, đặc biệt khi làm việc với closure.

Ví dụ:

function createClosure() {
    let bigArray = new Array(1000000).fill("data");
    return function () {
        console.log(bigArray.length);
    };
}

const closure = createClosure();
closure = null; // Giải phóng bộ nhớ

b. Quản lý sự kiện và timer

Luôn xóa sự kiện hoặc timer khi không còn sử dụng để tránh memory leaks.

Ví dụ:

let intervalId = setInterval(() => {
    console.log("Running...");
}, 1000);

clearInterval(intervalId); // Xóa timer khi không cần

Quy tắc về tài liệu và chú thích

a. Thêm chú thích rõ ràng

Chú thích giúp người khác hiểu rõ ý nghĩa của mã nguồn.

Ví dụ:

/**
 * Hàm tính tổng hai số
 * @param {number} a - Số thứ nhất
 * @param {number} b - Số thứ hai
 * @returns {number} Tổng của hai số
 */
function add(a, b) {
    return a + b;
}

b. Viết README và tài liệu hướng dẫn

Nếu dự án lớn, hãy viết tài liệu mô tả cách sử dụng và cấu trúc của mã nguồn.

Quy tắc về testing

a. Viết unit test

Sử dụng các thư viện như Jest, Mocha để viết unit test cho mã nguồn.

Ví dụ:

test("adds 1 + 2 to equal 3", () => {
    expect(add(1, 2)).toBe(3);
});

b. Test các trường hợp biên

Kiểm tra các trường hợp đặc biệt như đầu vào rỗng, null, undefined, hoặc giá trị cực đại/cực tiểu.

Quy tắc về cộng đồng và coding style

a. Theo dõi các chuẩn coding style

Tuân thủ các chuẩn coding style như:

• Airbnb JavaScript Style Guide
• Google JavaScript Style Guide

b. Sử dụng ESLint/Prettier

Cài đặt và sử dụng các công cụ như ESLint và Prettier để tự động kiểm tra và định dạng mã nguồn.

Tổng kết

Dưới đây là các quy tắc chính cần tuân thủ khi viết code JavaScript:

1. Định dạng và cấu trúc: Thụt lề, dấu chấm phẩy, đặt tên biến.
2. Khai báo biến: Sử dụng const và let, tránh var.
3. Hàm: Hạn chế độ dài, tránh side effects, sử dụng default parameters.
4. Kiểm tra và xử lý lỗi: Kiểm tra kiểu dữ liệu, sử dụng try-catch.
5. Hiệu suất: Tránh lặp lại công việc, tối ưu hóa vòng lặp.
6. Tài nguyên: Giải phóng bộ nhớ, quản lý sự kiện và timer.
7. Tài liệu và chú thích: Viết chú thích rõ ràng, tài liệu hướng dẫn.
8. Testing: Viết unit test, test các trường hợp biên.
9. Coding style: Theo dõi chuẩn coding style, sử dụng ESLint/Prettier.

Tuân thủ các quy tắc này sẽ giúp bạn viết mã JavaScript sạch, dễ đọc, dễ bảo trì và giảm thiểu lỗi.