Coding Standard JavaScript giúp code luôn gọn gàng, dễ đọc

2611

Coding standard – tiêu chuẩn code riêng có thể dẫn đến các kết quả như sau:

  Junior developer là gì? Những quy tắc bất biến giành cho Junior developer
  Định dạng chuẩn và quy ước viết code trong HTML5

Để đạt được những điều đó thì mình đã đặt ra các tiêu chuẩn code như sau:

Khi so sánh thì dùng === thay vì ==

== và === dù chỉ khác nhau 1 dấu bằng, nhưng sẽ dẫn đến các kết quả rất khác nhau trong JavaScript.

Không nên:

if (val == 2)

Nên:

if (val === 2)

Đừng dùng var mà hãy dùng let

Lý do đơn giản là vì let có thể xử lý các vấn đề phạm vi (scoping issue) của var trong JavaScript

Không nên:

var myVar = 10;

Nên:

let myVar = 10;

Dùng const thay cho let

Cái này sẽ ngăn chặn dev thay đổi những thứ không cần thiết và giúp cải thiện readability.

Không nên:

let VAT_PERCENT = 20;

Nên:

const VAT_PERCENT = 20;

Luôn luôn dùng dấu chấm phẩy (;)

Dù dấu chấm phẩy không bắt buộc trong JavaScript khi kết thúc câu lệnh như các ngôn ngữ khác, tuy nhiên nếu dùng ; sẽ giữ tính nhất quán ở các dòng code, giúp phân cách giữa các dòng lệnh.

Không nên:

const VAT_PERCENT = 20;

let amount = 10
return addVat(amount, vatPercent)

Nên:

const vatPercent = 20;
let amount = 10;
return addVat(amount, vatPercent);

Quy tắc đặt tên trong JavaScript

  • let nên dùng camelCase (in hoa chữ cái đầu tiên ở từ thứ hai). Ví dụ:

let tênBiến;

  • const thì quy theo upper case (in hoa) nếu đứng ở vị trí đầu file: MY_CONST, còn nếu không xuất hiện ở đầu thì đặt theo camelCase
  • class nên đặt theo PascalCasing (in hoa chữ cái đầu của mỗi từ) MyClass
  • functions thì đặt theo camelCase. myFunction
  • Tên biến, function, class không được có khoảng trắng, bắt đầu bắt một chữ cái, ký tự gạch dưới (_) hoặc dollar ($)
  • Tên biến trong JavaScript phân biệt chữ hoa và chữ thường, ví dụ const mypet sẽ khác với const myPet

Xem thêm Quy chuẩn đặt tên trong lập trình: camelCase, underscore hay PascalCase?

Sử dụng template literal (template strings) để khai báo chuỗi

Template literal thực chất cũng là string literal, cú pháp để khai báo chuỗi trong JavaScript. Đây là tính năng mới có trong ECMA6, cho phép embed biểu thức JavaScript bên trong chuỗi mà không cần dùng phép cộng.

Không nên:

let fullName = firstName + " " + lastName;

Nên:

let fullName = `${firstName} ${lastName}`;

Ưu tiên dùng arrow function ES6

Khi viết biểu thức hàm (function) thì dùng arrow function sẽ có cú pháp ngắn gọn hơn, chúng là hàm nặc danh và thay đổi con trỏ this bind đến functions.

Xem thêm Tìm hiểu về ES6 trong Javascript

Không nên:

var multiply = function(a, b) {
  return a* b;
};

Nên

const multiply = (a, b) => a * b;

Dùng dấu ngoặc nhọn với cấu trúc điều khiển

Với các cấu trúc điều kiện (ví dụ như if, else, for, do, while,…) thí dùng ngoặc nhọn {} là điều bắt buộc. Bởi nếu không dùng thì sẽ gây hiện tượng tạo nên 1 statement bên dưới như sau:

Ví dụ:

if (myNumber === 0)
   doSomething();
   doSomethingElse();  // Đây là câu lệnh// 

Nhưng đây mới là cách nó chạy
if (myNumber === 0) {
    doSomething();
}
doSomethingElse();

Có thể sửa như sau:

Chưa đúng:

if (valid)
   doSomething();if (amount > 100) 
    doSomething();
else if(amount > 200)
    doSomethingElse();

Nên làm rõ câu lệnh ra như sau:

if (valid) {
   doSomething();
}if (amount > 100) {
   doSomething();
} 
else if(amount > 200) {
    doSomethingElse();
}

Tham khảo tuyển dụng javascript lương cao trên TopDev

Đặt dấu ngoặc ở cùng dòng với if với dấu space

Chưa đúng:

if (myNumber === 0)
{
    doSomething();
}

Nên viết:

if (myNumber === 0) {
    doSomething();
}
  Tìm hiểu Conditional Border Radius trong CSS

Hạn chế nesting

If lồng trong if rất dễ gây nhầm lẫn và khá khó để đọc, hãy cố gắng lựa chọn cách viết khác để thay đổi cấu trúc này, biết đâu có lúc cần kiểm lại code và thay đổi code thì sao:

Không nên:

if (myNumber > 0) {
  if (myNumber > 100) {
       if (!hasDiscountAlready) {
           return addDiscountPercent(0);
       } else {
           return addDiscountPercent(10);
       }
  } else if (myNumber > 50) {
    if (!hasDiscountAlready) {
       return addDiscountPercent(5);
    }
  } else {
    if (!hasDiscountAlready) {
      return addDiscountPercent(0);
    } else {
      return addDiscountPercent(1);
    }
  }
} else {
     error();
}

Nên:

if (myNumber <= 0) {
   return error;
}if (!hasDiscountAlready) {
    return addDiscountPercent(0);
}if (myNumber > 100) { 
    return addDiscountPercent(10);
}if (myNumber > 50) { 
    return addDiscountPercent(5);
}return addDiscountPercent(1);

Đoạn code trên có thể thấy là dễ đọc hơn rất nhiều, phần lớn mình luôn cố gắng hạn chế if else, bí kíp của mình như sau:

Thay vì:

if (valid) { 
   return buy();
} else { 
   return error();
}

Thì viết:

return valid ? buy() : error();

Tận dụng tối đa số dòng cho files và functions

Tuy rằng mỗi dự án mỗi khác nên sẽ rất khó để thực hiện điều này, nhưng hãy cân nhắc mỗi khi thấy vài đoạn code đang trở nên phình to hơn, khi có kinh nghiệm rồi bạn sẽ tìm được độ dài phù hợp.

Ví dụ:

files chứa tối đa 80 dòng code

functions chứa tối đa là 15 dòng code

Tên file viết thường

MyFile.js nên để là myFile.js

Dùng tham số mặc định

Trong JavaScript nếu bạn không gán giá trị bới tham số khi gọi function thì nó sẽ thành undefined

Không nên:

myFunction(a, b) {
  return a + b;
}

Nên:

myFunction(a = 0, b = 0) { 
   return a + b;
}

Shorthand cho boolean

Không nên:

if (isValid === true)
if (isValid === false)

Nên:

if (isValid)
if (!isValid)

Hạn chế ternary statements không cần thiết

Thay vì:

const boo = a ? a : b;

Hày dùng:

const boo = a || b;

Dùng một biến duy nhất mỗi lần khai báo

Có nhiều ý kiến khác nhau về việc tách ra kiểu vầy nhưng mình thì cảm thấy khai báo nhiều cái một lúc sẽ dễ bị nhầm lẫn hay sót.

Thay vì viết:

let a = 1, b = 2;

Thì mình làm:

let a = 1;
let b = 2;

Kết luận

  • Coding standard trong bất kỳ ngôn ngữ nào đều giúp cải thiện độ readability và maintainability – tính bảo trì của application. Bạn có thể gặp rào cản trong việc thống nhất coding standard trong team, thì hãy thử qua những cách sau:
  • Desk review (nghiên cứu tại bàn), xem xét từng dòng code một
  • Tạo một application thống nhất từ đầu đến cuối, để các lập trình viên biết cần thêm/update cái gì
  • Khi tạo cái gì mới thì hãy để senior dev bắt đầu để tạo nên guideline cho các thành viên khác trong team.

Tham khảo thêm tại Medium

Có thể bạn quan tâm:

Xem thêm việc làm IT hấp dẫn tại TopDev