15 kỹ thuật lập trình javascript dễ đọc dễ hiểu và dễ bảo trì

Nội dung bài viết

Video học lập trình mỗi ngày

Lập trình javascript là quá trình học và hiểu. Hiểu ở đây, không phải là để code chạy đúng là xong, còn nhanh chậm hay code khó đọc cho những người khác thì không quan tâm. Đó là sai lầm lớn nhất trong nghề lập trình. Trong code của bạn, điều quan trọng nhất có ba yếu tố đó là.


Lập trình javascript nguyên tắc tiêu chuẩn


Không cần cao siêu, ngay từ đầu bạn hãy làm tốt nhất có thể mà bạn đang làm. Chính vì vậy ở bài viết này không cần nhấn mạnh rằng, bạn phải thế này thế nọ, nhưng không nên bỏ qua những tiêu chuẩn trong code của bạn bao gồm 3 yếu tố sau đây: 


  • - Tính nhất quán về dữ liệu và code. 
  • - Dễ đọc và dễ hiểu cho người khác. 
  • - Dễ bảo trì khi gặp sự cố.


Để đạt được 3 yếu tố trên thì tôi sẽ giới thiệu cho các bạn một bài viết trên medium.com ở đó đã lên một khung sườn và tôi sẽ phát hoạ rõ nét hơn cho bạn đọc nhằm hiểu hơn. Bài viết này nằm ngoài Series "Kỹ năng lập trình cho người mới bắt đầu học javascript", nên các bạn muốn có một cách nhìn hoàn hảo hơn về nguyên tắc Object, Array... thì có thể tham khảo hiểu hơn tại series trên. 


Dưới đây là những quan điểm về tiêu chuẩn trong lập trình mà tác giả đã đưa ra. Và tôi sẽ bonus những tài liệu liên quan tương ứng với những vấn đề được nêu ra.


Sử dụng === thay vì == khi so sánh


Điều này rất quan trọng vì JavaScript là ngôn ngữ nhiều kiểu nhất, vì vậy sử dụng == có thể mang lại cho bạn kết quả không mong muốn vì nó cho phép các type khác nhau. 


### Không nên

// BAD 
if (val == 2)

### nên

// GOOD 
if (val === 2)

Tài liệu liên quan:  Tại sao nên sử dụng === thay vì == trong javascript


Không bao giờ sử dụng var, sử dụng let thay thế


Sử dụng let sẽ giúp tránh về vấn đề scope giống như var trong javascript. 


### Không nên

// BAD 
var myVar = 10;

### nên

// GOOD 
let myVar = 10;

Tài liệu liên quan:  Trời sinh ra var sao còn sinh ra let và const javascript


Luôn sử dụng const nếu được


Điều này ngăn các developer (dev) cố gắng thay đổi những điều không nên làm và nó thực sự giúp cải thiện khả năng đọc. Và luôn nên viết hoa khi đặt tên. 


### Không nên

// BAD 
let VAT_PERCENT = 20;

### nên

// GOOD 
const VAT_PERCENT = 20;

Luôn sử dụng dấu chấm phẩy (;)


Mặc dù có những trường hợp chúng ta không để (;) ở cuối câu lệnh không sai giống như ở các ngôn ngữ khác như Python. Nhưng tốt hơn hết để code nhìn có thân thuộc hơn thì chúng ta cũng nên sử dụng (;) ở cuối câu lệnh như một thói quen hữu ích. 


### Không nên

// BAD 
const VAT_PERCENT = 20;
let amount = 10
return addVat(amount, VAT_PERCENT)

### nên

// GOOD 
const VAT_PERCENT = 20;
let amount = 10;
return addVat(amount, VAT_PERCENT);

Sử dụng Template strings khi nối String


Khi sử dụng Template literals (Template strings) trông code có vẻ lịch sử hơn và để lại ấn tượng nhiều hơn. 


### Không nên

// BAD 
let fullName = firstName + " " + lastName;

### nên

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

Tài liệu liên quan:  Template strings Với ES6

Sử dụng function arrow trong ES6 bất cứ khi nào có thể


function arrow là một cú pháp ngắn gọn hơn để viết biểu thức hàm. Nhưng nên nhớ có những trường hợp không nên sử dụng arrow function (Xem thêm tài liệu liên quan) 


### Không nên

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

### nên

// GOOD 
const multiply = (a, b) => { return a * b};

Tài liệu liên quan:  Sự khác nhau giữa Regular và Arrow Functions trong JavaScript


Luôn sử dụng chế độ kiểm soát chặt chẽ nếu sử dụng if else


Tránh được else được thì càng tốt trong check điều kiện 


### Không nên

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

### nên

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

Hãy chắc chắn rằng các dấu ngoặc bắt đầu trên cùng một dòng với khoảng trắng ở giữa


### Không nên

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

### nên

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

Cố gắng tránh lồng các điều kiện


if Trong if đó sẽ trở nên khó hiểu và khó đọc. Đôi khi bạn có thể không giải quyết được vấn đề, nhưng bạn có thể xem xét kỹ cấu trúc mã để xem liệu nó có thể được cải thiện hay không.


### Không nên

// BAD 
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

// GOOD 
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);

Sử dụng tham số default bất cứ khi nào có thể


Trong JavaScript, nếu bạn không truyền tham số khi gọi hàm, giá trị của nó là undefined

### Không nên

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

### nên

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

Tài liệu liên quan:  Default Parameters trong JavaScript


Câu lệnh Switch nên sử dụng break và nên có default

Tôi thường cố gắng không sử dụng switch câu lệnh, nhưng bạn muốn sử dụng nó, đảm bảo rằng mỗi điều kiện break và có sử dụng defalut.


### Không nên

// BAD 
switch (myNumber)
{
  case 10: 
   addDiscountPercent(0);
  case 20: 
   addDiscountPercent(2);
  case 30:
   addDiscountPercent(3);
}

### nên

// GOOD 
switch (myNumber) {
    case 10:
        addDiscountPercent(0);
        break;
    case 20:
        addDiscountPercent(2);
        break;
    case 30:
        addDiscountPercent(3);
        break;
    default:
        addDiscountPercent(0);
        break;
}

Tài liệu liên quan:  Tư duy lập trình qua một ví dụ đơn giản?

Tóm lại


Các tiêu chuẩn trong lập trình của bất kỳ ngôn ngữ nào thực sự có thể giúp cải thiện khả năng đọc và khả năng bảo trì của ứng dụng. Nếu bạn làm việc trong một nhóm, một trong những điều khó khăn là thực thi các tiêu chuẩn code sao cho toàn bộ trong nhóm đều có thể hiểu được bạn đang làm gì. Và bài viết trên là một số gợi ý cho bạn. Nếu bạn cảm thấy chưa hài lòng về những gợi ý trên thì bạn có thể tìm thấy được nhiều hơn về "Những nguyên tắc trong lập trình javascript".

Thank for Reading!

Còn nhiều bài viết về tips and tricks javascript nếu có thời gian rảnh thay vì check FB thì có thể lướt qua. Biết đâu bạn sẽ tìm thấy điều cần tim trong đó.

Có thể bạn đã bị missing