Indenting code, while usually not useful to a compiler, greatly helps us humans read code more easily. However, adding more indentation than what is necessary––due to extraneous if statements, for example––might make a piece of code harder to read. Here is a brief overview of one technique you can use to avoid over-indenting code.

Take a look at the following simplistic example of a function getUserImages, which fetches a user's images from an API and then maps the data in some way:

const getUserImages = async (userId) => {
    if (userId) {
        const getImagesResponse = await apiClient.getImages(userId);

        if (getImagesResponse.ok) {
            const images = getImagesResponse.value;

            if (images) {
                const mappedImages = mapImages(images);
                return mappedImages;
            }
        }
    }
};

Yikes, that's a lot of indentation 😬. You can imagine how complex code written like this might be hard to follow: With more indents, it becomes harder to track the block of code that a certain line belongs to.

The good news is that we can avoid a lot of this indentation! In this case, it's pretty simple because there are no corresponding else blocks; we can simply check for the inverse of the if statements and return early if the conditions aren't met.

Here's a refactored version of getUserImages using this technique:

const getUserImages = async (userId) => {
    if (!userId) {
        console.log('No userId provided');
        return;
    }

    const getImagesResponse = await apiClient.getImages(userId);

    if (!getImagesResponse.ok) {
        console.error('Error getting images!');
        return;
    }

    const images = getImagesResponse.value;

    if (!images) {
        console.log('User has no images');
        return;
    }

    const mappedImages = mapImages(images);
    return mappedImages;
};

We've "flattened" the code out a bit and made it easier to read. Note that early guards like !images aren't very useful if there isn't a lot of code underneath it, but, again, this is a simplistic example.

This technique can also apply to other places where we might have multiple nested blocks of code, like in a for loop:

const processList = (list) => {
    for (let i = 0; i < list.length; i++) {
        if (i % 2 === 0) {
            if (list[i]) {
                // ... Do something
                // ... Do more things
                // ... Do even more things
            }
        }
    }
};

I find that immediately nesting if statements like this is usually difficult to read. The code in the inner if statement is indented four times; removing even one level of indentation can help us out:

const processList = (list) => {
    for (let i = 0; i < list.length; i++) {
        if (i % 2 !== 0) {
            continue;
        }

        if (list[i]) {
            // ... Do something
            // ... Do more things
            // ... Do even more things
        }
    }
};

This technique can't always be used to refactor hard-to-read indented lines of code. But, when possible, removing unnecessary indentation in your code like this will go a long way in making it more readable and maintainable for yourself and future developers.

Come connect with me on LinkedIn, Twitter, and GitHub!