1. Giới thiệu

Khái niệm 'Clean Code' rất quan trọng trong phát triển phần mềm, đặc biệt là khi lập trình bằng JavaScript. Áp dụng các nguyên tắc của 'Clean Code' giúp mã nguồn trở nên dễ đọc, dễ bảo trì và giảm thiểu lỗi. Điều này không chỉ nâng cao chất lượng phần mềm mà còn tạo ra môi trường làm việc hiệu quả và thuận lợi cho toàn bộ đội ngũ phát triển. Bài viết này sẽ chia sẻ với bạn một số mẹo cơ bản để viết 'Clean Code' trong JavaScript.

2. Các Nguyên Tắc 'Clean Code' Trong JavaScript

2.1. Sử Dụng Tên Có Nghĩa

Việc đặt tên cho biến, hàm hay lớp là một kỹ năng cần thiết. Tên gọi rõ ràng, ý nghĩa giúp người đọc hiểu được mục đích của chúng. Tránh sử dụng tên gọi mơ hồ.

Ví dụ:

Không tốt:

function su(e, pw) {
  const u = new U(e, pw);
  // Cái gì vậy?...
}

Tốt:

function signup(email, password) {
  const user = new User(email, password);
  // À, bây giờ tôi hiểu rồi!
}

2.2. Thay Thế Các Con Số Không Có Nghĩa Bằng Hằng Số (Constants)

Các con số mã hóa cứng gây nhầm lẫn cho người đọc. Hãy thay thế chúng bằng các hằng số có ý nghĩa.

Ví dụ:

Không tốt:

for (let i = 0; i < 52; i++) {
  // Ủa, sao lại dùng `52` ở đây nhỉ?
}

Tốt:

const DECK_SIZE = 52;

for (let i = 0; i < DECK_SIZE; i++) {
  // Đây là một bộ bài.
}

2.3. Hạn Chế Sử Dụng Boolean Flags Để Xác Định Hành Vi

Nếu hàm của bạn có hai hành vi tương tự, thay vì dùng boolean flag, hãy tạo hai hàm riêng. Điều này giúp mã nguồn dễ đọc hơn.

Ví dụ:

Không tốt:

function loadSchema(schema, sync = false) {
  // ...
}

Tốt:

function loadSchema(schema) {
  // ...
}

function loadSchemaSync(schema) {
  // ...
}

2.4. Hạn Chế Các Đoạn Mã Lồng Nhau

Đoạn mã lồng nhau làm cho mã nguồn trở nên phức tạp hơn. Hãy tổ chức lại để giảm thiểu tối đa việc này.

Ví dụ:

Không tốt:

async function handle(request) {
  if (request.user) {
    if (request.user.can("CREATE_POST")) {
      // Wow, đây là sâu lắm.
    } else {
      return new Response({ status: 403 });
    }
  } else {
    return new Response({ status: 401 });
  }
}

Tốt:

async function handle(request) {
  if (!request.user) {
    return new Response({ status: 401 });
  }
  
  if (!request.user.can("CREATE_POST")) {
    return new Response({ status: 403 });
  }
  // Xử lý yêu cầu ở đây
}

2.5. Tận Dụng Tính Năng Của Ngôn Ngữ Mới

JavaScript luôn phát triển, với nhiều tính năng hỗ trợ mã nguồn tốt hơn như destructuring, async-await, hay toán tử optional-chaining.

Ví dụ:

Không tốt:

const port = typeof config.port !== "undefined" ? config.port : 3000;

Tốt:

const port = config.port ?? 3000;

2.6. Sử Dụng ESLint

Sử dụng ESLint để kiểm soát chất lượng mã nguồn trong VSCode. Công cụ này giúp phát hiện và sửa lỗi một cách hiệu quả, cải thiện mã của bạn.

2.7. Cân Nhắc Về Việc Sử Dụng TypeScript

TypeScript không chỉ mở rộng JavaScript mà còn cung cấp kiểu dữ liệu tĩnh, giúp phát hiện lỗi sớm và mã nguồn dễ bảo trì hơn. Khả năng chuyển đổi từ JavaScript cũng dễ dàng.

3. Tổng Kết

Có rất nhiều cách để tạo ra một mã nguồn sạch và dễ bảo trì. Hy vọng bài viết này sẽ giúp bạn có cái nhìn rõ ràng hơn về việc viết 'Clean Code' trong JavaScript. Hãy áp dụng những mẹo này để nâng cao chất lượng mã nguồn của bạn.
source: viblo