Cách đơn giản hóa câu lệnh if trong JavaScript

Các câu lệnh có điều kiện là một phần thiết yếu của JavaScript. Chúng cho phép bạn thực thi mã dựa trên việc một điều kiện nhất định là đúng hay sai và bạn có thể lồng nhiều khác tuyên bố (và một khác) để đánh giá nhiều hơn một điều kiện.

Nhưng đây là vấn đề—khi viết phức tạp nếu khác chuỗi, mọi thứ có thể nhanh chóng trở nên lộn xộn và bạn có thể dễ dàng tạo ra mã khó đọc và khó hiểu.

Cùng học cách refactor dài và phức tạp nếu…nếu…khác chuỗi điều kiện thành một phiên bản ngắn gọn hơn, rõ ràng hơn và dễ hiểu hơn.

Chuỗi if…else phức tạp

Khi viết các câu lệnh if…else phức tạp trong JavaScript, điều cần thiết là bạn phải viết mã rõ ràng, ngắn gọn và dễ hiểu. Ví dụ, hãy nhìn vào nếu khác chuỗi điều kiện bên trong hàm bên dưới:

 function canDrink(person) {
  if(person?.age != null) {
    if(person.age < 18) {
     console.log("Still too young")
    } else if(person.age < 21) {
      console.log("Not in the US")
    } else {
      console.log("Allowed to drink")
    }
  } else {
    console.log("You're not a person")
  }
}
const person = {
  age: 22
}
canDrink(person)
 

Logic ở đây rất đơn giản. đầu tiên nếu như tuyên bố đảm bảo rằng người đối tượng có một tuổi tài sản (nếu không thì người đó không phải là người). Bên trong đó nếu như khối, bạn đã thêm một nếu…khác…nếu chuỗi về cơ bản nói:

Nếu một người dưới 18 tuổi, họ còn quá trẻ để uống rượu. Nếu dưới 21 tuổi, họ vẫn chưa đủ tuổi uống rượu hợp pháp ở Hoa Kỳ. Nếu không, họ có thể uống một cách hợp pháp.

Mặc dù đoạn mã trên hợp lệ nhưng việc lồng mã khiến bạn khó hiểu mã hơn. May mắn thay, bạn có thể cấu trúc lại mã ngắn gọn và dễ đọc hơn bằng cách sử dụng điều khoản bảo vệ.

Điều khoản bảo vệ

Bất cứ lúc nào bạn có một nếu như câu lệnh bao bọc tất cả mã của bạn, bạn có thể sử dụng một điều khoản bảo vệ để loại bỏ tất cả các lồng:

 function canDrinkBetter() {
  if(person?.age == null) return console.log("You're not a person") 
  if(person.age < 18) {
    console.log("Still too young")
  } else if(person.age < 21) {
    console.log("Not in the US")
  } else {
    console.log("Allowed to drink")
  }
} 

Khi bắt đầu hàm, bạn đã xác định một mệnh đề bảo vệ cho biết rằng nếu điều kiện cụ thể đó không được đáp ứng, bạn muốn thoát khỏi hàm. canDrinkBetter() hoạt động ngay lập tức (và đăng nhập “Bạn không phải là người” trên bảng điều khiển).

Nhưng nếu điều kiện được đáp ứng, bạn đánh giá nếu khác chain để xem khối nào được áp dụng. Chạy mã cho bạn kết quả giống như ví dụ đầu tiên, nhưng mã này dễ đọc hơn.

Không sử dụng một lợi nhuận duy nhất

Bạn có thể lập luận rằng kỹ thuật trên không phải là một nguyên tắc lập trình tốt vì chúng ta đang sử dụng nhiều lệnh trả về trong cùng một hàm và bạn tin rằng tốt hơn là chỉ có một câu lệnh trả về (hay còn gọi là chính sách trả về một lần).

Nhưng đây là một cách tồi tệ để viết mã vì nó buộc bạn phải rơi vào tình huống lồng nhau điên rồ giống như chúng ta đã thấy trong mẫu mã đầu tiên.

Như đã nói, bạn có thể sử dụng nhiều trở lại các câu lệnh để đơn giản hóa hơn nữa mã của bạn (và loại bỏ việc lồng nhau):

 function canDrinkBetter() {
  if(person?.age == null) return console.log("You're not a person") 
  if(person.age < 18) {
    console.log("Still too young")
    return
  } 
  if(person.age < 21) {
    console.log("Not in the US")
    return
  }
  console.log("Allowed to drink") 
}
 

Mã này hoạt động giống như hai ví dụ trước và nó cũng sạch hơn một chút.

Khối mã cuối cùng của chúng tôi sạch hơn hai khối đầu tiên, nhưng nó vẫn chưa tốt như mong muốn.

Thay vì có một thời gian dài nếu khác chuỗi bên trong một chức năng, bạn có thể tạo một chức năng riêng biệt canDrinkResult() kiểm tra cho bạn và trả về kết quả:

 function canDrinkResult(age) {
  if(age < 18) return "Still too young"
  if(age < 21) return "Not in the US"
  return "Allowed to drink"
} 

Sau đó, bên trong chức năng chính, tất cả những gì bạn cần làm trước tiên là áp dụng mệnh đề bảo vệ trước khi gọi hàm canDrinkResult() (với tham số là tuổi) để nhận kết quả:

 function canDrinkBetter() { 
  if(person?.age == null) return console.log("You're not a person") 
  let result = canDrinkResult(person.age)
  console.log(result)
} 

Vì vậy, trong trường hợp này, bạn đã giao nhiệm vụ kiểm tra tuổi uống rượu cho một chức năng riêng và chỉ gọi nó khi cần thiết. Điều này làm cho mã của bạn ngắn gọn và dễ làm việc hơn tất cả các ví dụ trước.

Tránh xa câu lệnh có điều kiện

Bạn đã học cách tái cấu trúc các chuỗi điều kiện phức tạp, lồng nhau thành các chuỗi ngắn hơn, dễ đọc hơn bằng cách sử dụng các mệnh đề bảo vệ và kỹ thuật trích xuất hàm.

Cố gắng giữ khác câu lệnh tránh xa các điều kiện của bạn càng nhiều càng tốt bằng cách sử dụng cả mệnh đề bảo vệ và kỹ thuật trích xuất hàm.

Nếu bạn vẫn chưa quen với việc sử dụng JavaScript nếu khác tuyên bố, bắt đầu với những điều cơ bản.