Using the `if`
statement is a common technique to deal with conditional logics. The code flow is split into different branches based on a given logic.
Let's take a look at a simple function that
suffixes a given hour number with
am or
pm. The suffix is determined based on which range the hour belongs to as you can see in the following table:
Hour | With suffix |
---|
0 | 12am |
1 - 11 | 1am - 11am |
12 | 12pm |
13 - 23 | 1pm - 11pm |
An initial implementation of the function could look like:
const suffixAmPm = (hour) => {
if (hour === 0) {
return '12am';
} else {
if (hour < 12) {
return `${hour}am`;
} else {
if (hour === 12) {
return '12pm';
} else {
return `${hour % 12}pm`;
}
}
}
};
Imagine how the code looks like if we use multiple nested `if`
statements. It's very hard to follow and maintain. Rather than using `else`
or nested `if`
statements, the function can return as soon as the condition matches:
const fn = (args) => {
if (condition) {
return 'foo';
} else {
return 'bar';
}
};
const fn = (args) => {
if (condition) {
return 'foo';
}
return 'bar';
};
Using this practice, a new version of the `suffixAmPm`
function looks like:
const suffixAmPm = (hour) => {
if (hour === 0) {
return '12am';
}
if (hour < 12) {
return `${hour}am`;
}
if (hour === 12) {
return '12pm';
}
return `${hour % 12}pm`;
};
See also