Javascript: Những sai lầm thường gặp khi viết một function

Javascript: Những sai lầm thường gặp khi viết một function

Function là một trong những khái niệm căn bản trong lập trình cũng như trong Javascript. Và đặc biệt hơn là Javascript lại thiên về Functional Programming hơn là OOP. Chúng ta sử dụng function mọi nơi trong Javascript, nhưng tôi thường thấy mọi người hiểu sai về function và viết nó một cách hời hợt, có thể ngay cả tôi. Sau khi đọc xong một phần nhỏ trong cuốn Code Complete, tôi nhận ra rằng mình phải ghi xuống một checklist cho việc tại sao phải tạo một function và viết nó cho đúng hơn nữa. Những lỗi sau đây tôi thề là gặp hằng ngày trong code javascript. Việc chỉ cần làm đúng theo checklist của một function đã là một cuộc cải cách chỉ 20% codebase của dự án, nhưng có thể đem lại 80% người dùng của bạn hài lòng. Cool phải không nào.

Chúng ta cùng xem ví dụ sau nhé:

function HandleStuff(
  inputRec,
  crntQtr,
  emptyRec,
  estimRevenue,
  ytdRevenue,
  screenX,
  screenY,
  newColor,
  prevColor,
  status,
  expenseType,
) {
  let i;
  for (i = 0; i < 100; i++) {
    inputRec.revenue[i] = 0;
    inputRec.expense[i] = corpExpense[crntQtr][i];
  }
  UpdateCorpDatabase(empRec);
  estimRevenue = (ytdRevenue * 4.0) / crntQtr;
  newColor = prevColor;
  status = SUCCESS;
  if (expenseType == 1) {
    for (i = 0; i < 12; i++) {
      profit[i] = revenue[i] - expense.type[i];
    }
  } else if (expenseType == 2) {
    for (i = 0; i < 4; i++) {
      profit[i] = revenue[i] - expense.type[i];
    }
  }
}

Có những lỗi nào trong function trên? Bạn nên thử nhìn qua một lần để trả lời trước nhe. Sau đây là những lỗi trong function trên mà Code Complete đã chỉ ra:

  • Function có một bad name: HandleStuff quá chung chung, không nói lên được hàm này dùng để làm gì(Important)
  • Function này không có document
  • Function này format quá xấu và khó đọc
  • Input bị thay đổi, ví dụ biến inputRec bị thay đổi. Đây là một trong những nguyên nhân làm biến đổi state và có quá nhiều source of truth cho chỉ một state. Điều này gây hậu quả vô cùng nghiêm trọng. (Important)
  • Function có side-effect khi đọc và gọi hàm global. Phải dùng hàm pure trong javascript, output chỉ nên chịu ảnh hưởng duy nhất từ input. Một khi bạn muốn dùng impure function hãy thảo luận với team của bạn và xem xét điều đó có thật sự là lựa chọn duy nhất.(Important)
  • Function không có một mục đích duy nhất. Nó làm quá nhiều việc như là khởi tạo một số biến, cập nhật database, tính toán một số thứ. Và tất cả có vẻ không liên qua gì nhau.(Important)
  • Function không catch được những bad data như undefined, chia cho số 0. ytdRevenue*4.0/crntQtr(High)
  • Function có magic number 100, 4, 12
  • Một số tham số không được sử dụng: screenX, screenY
  • Hàm có quá nhiều tham số. Code Complete chỉ ra rằng chỉ tối đa là 7 tham số cho một hàm để có thể dễ đọc và dễ hiểu(High)
  • Các tham số cũng không được sắp xếp theo một trật tự nhất định

Trên đây là một ví dụ trong cuốn Code Complete chỉ ra những lỗi kinh điển chúng ta gặp phải khi viêt một function.

Leave a Comment