I don’t know about you, but every time I write a certain line of code, I think: “Have I written code like this to clean the code?”, “Will my code make someone swear? “.
Of course, everyone will have different styles and preferences for coding, but in general, it is advisable to follow the principle of readability and understanding as much as possible.
What is a switch case block?
This command block has an extremely simple task, explaining that the “sorry to fill” type is that it takes input and corresponds to it an output. To make it easier to imagine, this command block is like a traffic flow picture: motorbikes go to the motorbike stream, cars go to oto.vv.
Here is an example of a code using switch..case
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function displayPet(pet = 'dog') { switch (pet) { case 'lizard': console.log('I own a lizard'); break; case 'dog': console.log('I own a dog'); break; default: console.log("I don't own a pet"); break; } } |
The problem of the switch block
In general, there is nothing wrong with using the switch…case statement. But sometimes, you will find the switch case block is endless, like below.
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | const handleKeyUp = (e, target) => { // if the key is 'Enter' if(e.keyCode === 13) { switch (target) { case 'firstName': this.lastNameRef.current.lastChild.firstChild.focus() break case 'lastName': this.yobRef.current.lastChild.firstChild.focus() break case 'yob': this.bioRef.current.lastChild.focus() break case 'bio': this.emailRef.current.lastChild.firstChild.focus() break case 'email': this.passRef.current.lastChild.firstChild.focus() break case 'password': this.passConfRef.current.lastChild.firstChild.focus() break case 'passwordConf': this.countryRef.current.lastChild.firstChild.focus() break case 'country': this.cityRef.current.lastChild.firstChild.focus() break case 'city': this.occupationRef.current.lastChild.firstChild.focus() break case 'occupation': this.lang1Ref.current.lastChild.firstChild.focus() break case 'language1': this.lang2Ref.current.lastChild.firstChild.focus() break case 'language2': this.lang3Ref.current.lastChild.firstChild.focus() break case 'language3': this.submitRef.current.focus() break default: this.firstNameRef.current.lastChild.firstChild.focus() break } } } |
So what should we do? Is there a better coding solution? With problems like this, what do you use if you don’t use a switch case? The author is joking again!
Hihi. Of course there are alternatives. That is using Object literal lookup
Object Literal lookups
With Javascript in particular, we use Object everywhere, all the time. So why don’t we apply Object in this case. Using Object gives us a more familiar look because statistically, using Object and Array takes up the most of our code.
Ok, going back to the lengthy handleKeyUp() function above, we can rewrite it like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | const cases = { 'firstName': this.lastNameRef.current.lastChild.firstChild, 'lastName': this.yobRef.current.lastChild.firstChild, 'yob': this.bioRef.current.lastChild, 'bio': this.emailRef.current.lastChild.firstChild, 'email': this.passRef.current.lastChild.firstChild, 'password': this.passConfRef.current.lastChild.firstChild, 'passwordConf': this.countryRef.current.lastChild.firstChild, 'country': this.cityRef.current.lastChild.firstChild, 'city': this.occupationRef.current.lastChild.firstChild, 'occupation': this.lang1Ref.current.lastChild.firstChild, 'language1': this.lang2Ref.current.lastChild.firstChild, 'language2': this.lang3Ref.current.lastChild.firstChild, 'language3': this.submitRef.current, } // Định nghĩa hàm const handleKeyUp = (e, target) => { if(e.keyCode === 13) cases[target].focus() } // Lúc sử dụng handleKeyUp(event, "email") |
The simple solution is that we put the conditions in an Object. Object lookups are very fast, especially as they grow in size over time.
In addition, with the above method, every time you have to add a new condition, you do not need to modify the logic of the handleKeyup() function, but simply add it in the Object (no logic here at all).
What do you think of this new solution? Does it match your coding style? Please leave a comment below for everyone to share.
Reference source: https://vntalking.com/clean-code-js-dung-viet-switch-case-nhu-nay-nua.html