Bài viết này chúng ta sẽ tìm hiểu những lỗi kiểm tra điều kiện trong JavaScript mà các lập trình viên mới ra trường hay gặp trong môi trường thật sự.
Giới thiệu
Thật ra việc làm cho code tường mình (clean code) không phải chỉ cho chương trình bạn viết mà là cho những developers khác. Và cho bản thân của bạn ở những ứng dụng tiếp theo và trong tương lai.
Bài viết này một phần nào đó để giúp bạn vượt qua những trường hợp đó và để giúp bạn tổ chức các câu lệnh có điều kiện một cách tốt hơn. Trong quá trình tôi làm việc với một số bạn mới ra trường thì có thể nói là việc các bạn hiểu logic rất tốt.
Vấn đề nắm bắt nhanh nhưng lúc triển khai thì các bạn lại bối rối, để rồi khi các bạn viết code cũng theo một chuẩn trong trường học. Cho nên nó làm những người như tôi cảm thấy bối rối theo.
Vậy trong bài này chúng ta sẽ tìm hiểu những lỗi check Conditionals trong JavaScriptmà các lập trình viên mới ra trường hay gặp trong môi trường thật sự. Dưới đây là các tips về cấu trúc câu lệnh khi có sử dụng if…else. Có thể giúp các bạn viết ít code hơn nhưng có thể hiệu quả hơn với cách cũ.
Các lỗi check Conditionals trong JavaScript mà Dev mới thường mắc
Lạm dụng các điều kiện phủ định.
Việc sử dụng các điều kiện phủ định nó sẽ gây nhầm lẫn rất nhiều trong khi triển khai code.
Ví dụ:
const isEmailNotVerified = (email) => {
// implementation
}
if (!isEmailNotVerified(email)) {
// do something...
}
if (isVerified === true) {
// do something...
}Tại sao không viết thế này?:
const isEmailVerified = (email) => {
// implementation
}
if (isEmailVerified(email)) {
// do something...
}
if (isVerified) {
// do something...
}Bây giờ chúng ta cảm thấy nó rõ ràng hơn nhiều so với việc check những câu lệnh phủ định. Đương nhiên là nó không sai, nhưng thực sự nó hay gây nhầm lẫn cho những đồng nghiệp khác.
Đối với biểu thức nhiều điều kiện, hãy sử dụng Array.includes
Ví dụ nếu bạn muốn check hệ thống của bạn có những model như là ‘vinfast fadil’ hay ‘Hyundai Accent’ thì các devjs mới thường sẽ làm như thế này:
const checkCarModel = (model) => {
if(model === 'vinfast fadil' || model === 'Hyundai Accent') {
console.log('model valid');
}
}
checkCarModel('vinfast fadil'); // outputs 'model valid'Thật sự không sai ở đây, và như thế này các bạn cũng đã làm rất tốt rồi, nhưng ở đây có một cách hay hơn nữa nếu như có thêm điều kiện check nữa thì sao? Cách tốt hơn là sử dụng Array.includes:
const checkCarModel = (model) => {
const models = ['vinfast fadil', 'Hyundai Accent'];
if(models.includes(model)) {
console.log('model valid');
}
}
checkCarModel('vinfast fadil'); // outputs 'model valid'Giả sử sau này có thêm điều kiện ‘Toyota vios’ thì chúng ta cần thêm điều kiện đó vào:
const models = ['vinfast fadil', 'Hyundai Accent', 'Toyota vios'];Như thế này là ok!
Không cần check dài dòng khi sử dụng if…else
Có một ví dụ tiếp theo là kiểm tra các thuộc tính trong một đối tượng thì có những dòng code như thế này.
Ví dụ:
const checkModel = (car) => {
let result; // Đầu tiên định nghĩa một kết quả trả về.
// check if car exists
if(car) {
// check if car model exists
if (car.model) {
// check if car year exists
if(car.year) {
result = `Car model: ${car.model}; Manufacturing year: ${car.year};`;
} else {
result = 'No car year';
}
} else {
result = 'No car model'
}
} else {
result = 'No car';
}
return result; // our single return statement
}
console.log(checkModel()); // outputs 'No car'
console.log(checkModel({ year: 1988 })); // outputs 'No car model'
console.log(checkModel({ model: 'ford' })); // outputs 'No car year'
console.log(checkModel({ model: 'ford', year: 1988 })); // outputs 'Car model: ford; Manufacturing year: 1988;'Giờ đây các bạn có thể làm tốt hơn với việc sử dụng như thế này:
const checkModel = ({model, year} = {}) => {
if(!model && !year) return 'No car';
if(!model) return 'No car model';
if(!year) return 'No car year';
// here we are free to do whatever we want with the model or year
// we made sure that they exist
// no more checks required
// doSomething(model);
// doSomethingElse(year);
return `Car model: ${model}; Manufacturing year: ${year};`;
}
console.log(checkModel()); // outputs 'No car'
console.log(checkModel({ year: 1988 })); // outputs 'No car model'
console.log(checkModel({ model: 'ford' })); // outputs 'No car year'
console.log(checkModel({ model: 'ford', year: 1988 })); // outputs 'Car model: ford; Manufacturing year: 1988;'Các bạn có gắng giảm thật nhiều các điều kiện check không cần thiết. Code sẽ sạch hơn và việc fix bug cũng tốt hơn nữa.
Hãy sử dụng Indexing hoặc Maps thay vì switch
Đây là một ví dụ nữa và cũng là ví dụ cuối cùng của bài viết hôm nay. Đó là có nhiều trường hợp các bạn có thể làm tốt hơn khi không sử dụng switch.
Xem ví dụ sau:
const getCarsByState = (state) => {
switch (state) {
case 'usa':
return ['Ford', 'Dodge'];
case 'france':
return ['Renault', 'Peugeot'];
case 'italy':
return ['Fiat'];
default:
return [];
}
}
console.log(getCarsByState()); // outputs []
console.log(getCarsByState('usa')); // outputs ['Ford', 'Dodge']
console.log(getCarsByState('italy')); // outputs ['Fiat']Giờ chúng ta sẽ viết lại một cách đơn giản hơn và cũng được nhiều người ủng hộ hơn:
const carState = {
usa: ['Ford', 'Dodge'],
france: ['Renault', 'Peugeot'],
italy: ['Fiat']
};
const getCarsByState = (state) => {
return carState[state] || [];
}
console.log(getCarsByState()); // outputs []
console.log(getCarsByState('usa')); // outputs ['Ford', 'Dodge']
console.log(getCarsByState('france')); // outputs ['Renault', 'Peugeot']Kết Luận
Thật ra những dev js mới không một ai có quyền trách hay chê bai code của các bạn cả. Vì đơn giản đó là điểm khởi đầu chung cho tất cả những dev trong đó có tôi. Để có nhiều kinh nghiệm thì hãy cho các bạn ấy nhiều cơ hội để cọ xát và giúp dev js mới có một môi trường để phát triển. Thay vào việc trách, hay chê bai thì hãy chia sẻ những kinh nghiệm cho các bạn dev js mới về cách viết code, fix bug….
Ở môi trường nào hay ngôn ngữ nào cũng vậy. Cố gắng đọc nhiều và học hỏi nhiều từ những bài viết và hơn hết là những người có kinh nghiệm. Thì tôi tin các bạn sẽ tiến nhanh hơn nữa.
Chúc các bạn có một kỹ năng thật tốt thông qua bài viết này. Happy coding!
Nguồn: Dev Induct