Skip to content

Latest commit

 

History

History
87 lines (71 loc) · 2.31 KB

early-return.mdx

File metadata and controls

87 lines (71 loc) · 2.31 KB
category created tags title
Practice
2021-03-21
JavaScript
Early return

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 {
        // Long implementation
        return 'bar';
    }
};

// Better
const fn = (args) => {
    if (condition) {
        return 'foo';
    }

    // Long implementation
    // Don't need to wrap within an `else`
    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