7 Tips "Clean Code" Trong JavaScript Bạn Nên Biết

MayFest2024

1. Giới thiệu

Clean Code" là một khái niệm quan trọng trong phát triển phần mềm, đặc biệt là khi viết mã bằng JavaScript. Việc áp dụng các nguyên tắc "Clean Code" trong JavaScript sẽ giúp mã của bạn dễ đọc, dễ bảo trì và ít lỗi hơn. Điều này không chỉ cải thiện chất lượng phần mềm mà còn tạo ra một môi trường làm việc hiệu quả và dễ dàng hơn cho cả đội ngũ phát triển. Trong bài viết này hãy cùng mình tìm hiểu một số mẹo cơ bản giúp "Clean Code" trong JavaScript nhé.

2. "Clean code" trong java script

2.1. Sử dụng tên có nghĩa

Việc đặt tên cho mọi thứ thật không dễ dàng. Những cái tên vô nghĩa về mặt lâu dài sẽ gây ra hiểu nhầm cũng như gây khó chịu cho người đọc. Bất cứ khi nào bạn phải đặt tên cho một biến, một hàm hay một lớp... hãy sử dụng những cái tên có ý nghĩa phù hợp với ngữ cảnh, mục đích sử dụng của nó .

Không tốt:

function su(e, pw) {
  const u = new U(e, pw);
  // What the ...?
}

Tốt:

function signup(email, password) {
  const user = new User(email, password);
  // Ah, now I understand!
}

2.2. Thay thế các con số không có ý nghĩa bằng hằng số (constants)

Số không có ý nghĩa là gì ? Nó là một giá trị số được mã hoá cứng. Đây là một anti-parten khiến người đọc mã nguồn khó hiểu được mục đích và chức năng của đoạn mã đó. Vì vậy nó nên được thay thế bằng một hằng số mô tả đúng mục đích của nó.

Không tốt:

for (let i = 0; i < 52; i++) {
  // ...um, why again do we use `52` here?
}

Tốt:

const DECK_SIZE = 52;

for (let i = 0; i < DECK_SIZE; i++) {
  // It's about a deck of playing cards.
}

2.3. Không nên sử dụng boolean flags để xác định hành vi

Thông thường chúng ta sẽ gặp một hàm có hai hành vi rất giống nhau. Để phân biệt giữa chúng, bạn thường để đơn giản thêm một flags boolean vào tham số của hàm. Tuy nhiên, điều này sẽ làm đoạn mã của bạn thật khó đọc và khó hiểu hơn. Thay vào đó, hãy thử tách thành hai hàm riêng biệt, bạn sẽ thấy nó hữu ích hơn đấy

Không tốt:

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

// One eternity later…

loadSchema("…", true);
// Wait, what is `true` here? Sync? Async? 
// Something else? I'm so forgetful.

Tốt:

function loadSchema(schema) {
  //
}

function loadSchemaSync(schema) {
  //
}

// One eternity later…

loadSchemaSync("…");
// Ah, it's the synchronous variant.

2.4. Hạn chế các đoạn mã lồng nhau

Việc sử dụng các đoạn mã lồng nhau khiến mã nguồn trở nên phức tạp khó hiểu hơn. Với một số mẹo đơn giản bạn có thể giảm thiểu việc lồng nhau một cách tối thiểu.

Không tốt:

async function handle(request) {
  if (request.user) {
    if (request.user.can("CREATE_POST")) {
      // Wow, this is deep.
      // Handle request here.
    } else {
      // User is not authorized.
      return new Response({ status: 403 });
    }
  } else {
    // User is not authenticated.
    return new Response({ status: 401 });
  }
}

Tốt:

async function handle(request) {
  if (!request.user) {
    // User is not authenticated.
    return new Response({ status: 401 });
  }

  if (!request.user.can("CREATE_POST")) {
    // User is not authorized.
    return new Response({ status: 403 });
  }

  // We can safely assume the user
  // is authenticated and authorized.
  // Handle request here.
}

Trong một vài trường hợp cụ thể để tránh trường hợp sử dụng if esle đến chết bạn nên tối ưu nó bằng switch case :

// repalce if else => switch case there are more than 3 conditions
switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

2.5. Tận dụng các tính năng của ngôn ngữ mới

JavaScript không ngừng thay đổi. Điều này mang đến cho bạn những tính năng tuyệt vời mới có thể cải thiện mã nguồn của bạn. Bạn có thể sử dụng destructuring, classes, cú pháp async-await, numeric separator và nhiều tính năng khác nữa như toán tử spread (...), toán tử optional-chaining (?.) và nullish-coalescing (??)...

Không tốt:

// Assigning a default value should be easier...
const port = typeof config.port !== "undefined" ? config.port : 3000;

// Did I mess up? It's nine zeros, right?
const oneBillion = 1000000000;

// Deep properties and nesting...urghs
if (user.team) {
  if (user.team.subscription) {
    if (user.team.subscription.invoices) {
      //
    }
  }
}

Tốt:

// Let's use nullish-coalescing (`??`).
const port = config.port ?? 3000;

// The numeric separator makes it easy to tell.
const oneBillion = 1_000_000_000;

// Here, we can use optional-chaining.
if (user.team?.subscription?.invoices) {
  //
}

2.6. Sử dụng ESLint

Đây là một mẹo hữu ích khi bạn sử dụng IDE VsCode trong việc viết mã. Hãy sử dụng công cụ tuyệt vời gọi là ESLint. Nó miễn phí và dễ sử dụng, chắc chắn sẽ cải thiện mã nguồn của bạn. Nó phát hiện và sửa các vấn đề thường gặp. Ngoài ra, bạn có thể cài đặt các preset và plugin hữu ích để phát hiện thêm nhiều vấn đề và định dạng lại mã của bạn.

Mình thường sử dụng ESLint với các plugin cho standard và prettier. Bên cạnh đó, nế làm việc với Vue, mình sẽ thêm eslint-plugin-vue. Tuy nhiên, việc giải thích cách cài đặt và cấu hình ESLint cũng nằm ngoài phạm vi của bài viết này.

2.7. Cân nhắc về việc sử dụng TypeScript

TypeScript là một ngôn ngữ lập trình mã nguồn mở được phát triển bởi Microsoft. Nó là một phần mở rộng của JavaScript, cung cấp thêm các tính năng như kiểu dữ liệu tĩnh (static typing) và các công cụ hỗ trợ phát triển mạnh mẽ hơn.

Vì sao nên sử dụng TypeScript thay vì JavaScript?

Kiểu dữ liệu tĩnh (Static Typing): TypeScript cho phép bạn xác định kiểu dữ liệu cho các biến, hàm và đối tượng. Điều này giúp phát hiện lỗi sớm hơn trong quá trình phát triển và giảm thiểu các lỗi runtime.
Công cụ hỗ trợ mạnh mẽ: Các IDE và trình soạn thảo mã nguồn như Visual Studio Code hỗ trợ TypeScript rất tốt, cung cấp tính năng tự động hoàn thành mã, gợi ý lỗi và hỗ trợ refactor mã hiệu quả.
Mã nguồn dễ bảo trì: Kiểu dữ liệu tĩnh giúp tài liệu hóa mã nguồn một cách rõ ràng, làm cho mã dễ đọc và dễ hiểu hơn. Điều này rất hữu ích khi làm việc trong các dự án lớn hoặc khi làm việc nhóm.
Tính năng tiên tiến: TypeScript hỗ trợ các tính năng của JavaScript mới nhất và cho phép sử dụng các tính năng như async/await, decorators, và nhiều tính năng khác trước khi chúng được hỗ trợ hoàn toàn trong JavaScript.
Cộng đồng và hệ sinh thái: TypeScript có một cộng đồng phát triển lớn và nhiều thư viện hỗ trợ. Nhiều dự án mã nguồn mở lớn như Angular, Vue.js và React đều hỗ trợ TypeScript.
Chuyển đổi dễ dàng: TypeScript cho phép bạn chuyển đổi từ JavaScript dần dần. Bạn có thể bắt đầu bằng cách thêm một tệp .ts vào dự án JavaScript của mình và từ từ chuyển đổi các tệp khác.

3. Tổng kết

Có rất nhiều cách bạn có thể làm để tạo ra một cơ sở mã sạch và dễ bảo trì. Hi vọng với bài viết của mình bạn có một cái nhìn tổng quan hơn về "Clean code" trong JavaScript và mã nguồn của mình .