Clean up your code by removing ‘if-else’ statements
Some tips to make your JavaScript code more elegant.
When we write JS code, we often encounter the situation of complex logic judgment. Generally, you can use if/else or switch to implement multiple conditional judgment, but there will be a problem: With the increase of logic complexity, if/else and switch in the code will become more and more bloated. This article will take you to try to write more elegant judgment logic.
For example, let’s look at a piece of code:
/**
* Button click event
* @param {number} status
* Activity status: 1 in progress, 2 in failure, 3 out of stock, 4 in success, 5 system cancelled
*/
constonButtonClick=(status)=>{
if(status==1){
sendLog(‘processing’)
jumpTo(‘IndexPage’)
}elseif(status==2){
sendLog(‘fail’)
jumpTo(‘FailPage’)
}elseif(status==3){
sendLog(‘fail’)
jumpTo(‘FailPage’)
}elseif(status==4){
sendLog(‘success’)
jumpTo(‘SuccessPage’)
}elseif(status==5){
sendLog(‘cancel’)
jumpTo(‘CancelPage’)
}else{
sendLog(‘other’)
jumpTo(‘Index’)
}
}
You can see the click logic of this button in the code: Do two things according to the different activity state, send the log buried point and jump to the corresponding page, you can easily come up with a rewrite of this code by switch appearance.
constonButtonClick=(status)=>{
switch(status){
case1:
sendLog(‘processing’)
jumpTo(‘IndexPage’)
break
case2:
case3:
sendLog(‘fail’)
jumpTo(‘FailPage’)
break
case4:
sendLog(‘success’)
jumpTo(‘SuccessPage’)
break
case5:
sendLog(‘cancel’)
jumpTo(‘CancelPage’)
break
default:
sendLog(‘other’)
jumpTo(‘Index’)
break
}
}
Well, it looks much clearer than if/else, careful readers may have also found a small trick: case 2 and case 3’s logic is the same, we can save the execution statement and break, case 2 will automatically execute with case 3’s logic.
But there’s a simpler way to write it.
constactions={
‘1’: [‘processing’,‘IndexPage’],
‘2’: [‘fail’,‘FailPage’],
‘3’: [‘fail’,‘FailPage’],
‘4’: [‘success’,‘SuccessPage’],
‘5’: [‘cancel’,‘CancelPage’],
‘default’: [‘other’,‘Index’],
}
constonButtonClick=(status)=>{
letaction=actions[status]||actions[‘default’],
logName=action[0],
pageName=action[1]
sendLog(logName)
jumpTo(pageName)
}
The code above does look cleaner, and the clever thing about this approach is that it uses the judgment condition as the object’s property name, and the processing logic as the object’s property value. When the button is clicked, this method is especially suitable for the case of unary condition judgment, which makes logical judgment by means of object attribute lookup.
There are many advantages to using Map instead of Object, which we will talk about later.
What’s the difference between a Map object and a normal object?
An object usually has its own prototype, so an object always has a “prototype” key
An object’s key can only be a string or Symbols, but a Map’s key can be any value
You can easily get the number of key-value pairs in a Map by using the size attribute, whereas the number of key-value pairs in an object can only be confirmed manually
Now let’s upgrade the difficulty of the problem. When clicking the button, you need to judge not only the status but also the user’s identity:
/**
* Button click event
* @param {number} status
* Activity status: 1 in progress, 2 in failure, 3 out of stock, 4 in success, 5 system cancelled
*
* @param {string} identity: guest, master
*/
constonButtonClick=(status,identity)=>{
if(identity==‘guest’){
if(status==1){
//do sth
}elseif(status==2){
//do sth
}elseif(status==3){
//do sth
}elseif(status==4){
//do sth
}elseif(status==5){
//do sth
}else{
//do sth
}
}elseif(identity==‘master’){
if(status==1){
//do sth
}elseif(status==2){
//do sth
}elseif(status==3){
//do sth
}elseif(status==4){
//do sth
}elseif(status==5){
//do sth
}else{
//do sth
}
}
}
As you can see from the example above when your logic escalates to double judgment, your judgment doubles, and your code doubles.
The core logic of the above code is: Two judgment conditions are spliced into a string to serve as the key of Map, and then the value corresponding to the corresponding string is directly searched during query.
A better approach would be to cache the processing logic functions:
This is enough for daily needs, but seriously, it’s still a bit annoying to have function A overwritten four times.
If things get really complicated, like identity has 3 states and status has 10 states, you need to define 30 processing logic, many of which are the same, which seems to unacceptable.
And you can do this:
The advantage of using Map instead of Object is more obvious because Regular type can be used as a key.
If the requirement becomes: all guest cases need to send a log buried point, and different status cases need separate logical processing, then we can write as follows:
That is to say, with the property of the array loop, any logic that meets the regular condition will be executed, so that both public logic and individual logic can be executed at the same time.
Conclusion
This article has taught you eight ways to write logical judgments, including:
if/else
switch
Unary judgment: stored in Object
Unary judgment: save to Map
Multiple judgment: concatenate the condition into a string and save it in Object
Multiple judgment: concatenate the condition into a string and store it in a Map
Multiple judgment: save condition as an object in Map
Multiple judgment: save condition as a regular expression in Map
So much for this article, and may the future of your life be filled with more than just if/else or switch.
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.AcceptRead More
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.