4 lỗi check Conditionals trong JavaScript mà new Dev thường mắc và cách khắc phục
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 đó ...
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 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ự. 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à new Dev thường mắc
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ụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const isEmailNotVerified = (email) => { // implementation } if (!isEmailNotVerified(email)) { // do something... } if (isVerified === true) { // do something... } |
Tại sao không thế này:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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.
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.
|
1 2 3 4 5 6 7 8 9 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
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:
|
1 2 3 |
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à 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 là sinh viên.
Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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 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!
Nguồn: Dev Induct
Có thể bạn quan tâm:
- Hỏi ngắn đáp nhanh – Trắc nghiệm JavaScript
- Vượt qua 7 sai lầm này để học JavaScript dễ thở hơn
- JavaScript Tip: Đặt tên function để debugging một cách dễ dàng hơn
Xem thêm việc làm JavaScript Developer hấp dẫn trên TopDev
TopDev via anonystick.com
