Nội dung bài viết
Video học lập trình mỗi ngày
Thật ra việc làm cho code tường minh (clean code), rõ ràng thực tế không phải 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 cũng là một trong những bài viết về "Tips and Tricks Javascript" các bạn có thể đọc tại đây. "Tips and Tricks Javascript"
Vậy trong bài này chúng ta sẽ đi những trường hợp mà các devjs 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ũ.
1 - Không sử dụng các điều kiện phủ định.
Không 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 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.
2 - For Multiple Conditions, use 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!
3 - Không cần check dài dòng khi sử dụng if...else
Có một ví dụ tiếp theo là check các properties trong một object thì có những dòng code như thế này. Các bạn xem qua và có thể tự mỉm cười vì mình có thể ỏ trong đó lúc còn đang sinh viên.
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;'Hồi đó cũng cần cù chứ phải à :), nhưng 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.
4 - Use Indexing or Maps Instead of switch Statement
Đâ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']5 - Kết Luận
Thật ra những devjs 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 devjs 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 devjs 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!
Tham khảo: devinduct.com
