/ simpler code

Simpler SAPUI5 code: Don't use "else"

Oftentimes when you come across an overly complex piece of code in a UI5 project, it contains lots of deeply nested conditions. You will be familiar with seeing if statements, followed by lots of else if and else statements.

myFunction: function() {
    var sResult;
    if (a) {
        if (b) {
            sResult = "Y";
        } else {
            sResult = "Z";
        }
    } else {
        sResult = "X";
    }

    return sResult;
}

We can improve the readability of such code by applying one simple rule: Don't use the "else" statement.

Instead, we can check for the edge cases first, and use early returns to bring down the level of nesting. We can simplify this code as follows:

myFunction: function() {
    if (!a) {
        return "X";
    }
    if (b) {
        return "Y";
    }
    return "Z";
}

This simple case may not seem like much of an improvement. Lets consider a more realistic example. Below we have a semi-realistic controller method which validates some user input, and saves the input if valid.

onClickSave: function()
{
    // Read some data from the model
    var formData = this.getModel().getProperty("/formData");

    if (formData.name !== "") {
        if (formData.price > 0) {
            if (formData.category === "clothing") {
                if (formData.size !== "") {
                    this.saveProduct(formData);
                } else {
                    this.showError("Size field is mandatory for clothing");
                }
            } else if (formData.category === "download") {
                formData.shipping = false;
                this.saveProduct(formData);
            } else {
                this.saveProduct(formData);
            }
        } else {
            this.showError("Price must be greater than 0");
        }
    } else {
        this.showError("Product name is a mandatory field");
    }
}

This is a common style in many UI5 projects, especially in the controllers, where you may find hundreds of lines of deeply nested control logic. As the complexity increases, this becomes difficult to read and maintenance turns into a daunting task. Luckily, if we apply our new rule and get rid of the else statements we can quickly whip this code into shape:

onClickSave: function()
{
    // Read some data from the model
    var formData = this.getModel().getProperty("/formData");

    if (formData.name === "") {
        this.showError("Product name is a mandatory field");
        return;
    }

    if (!formData.price > 0) {
        this.showError("Price must be greater than 0");
        return;
    }

    if (formData.category === "clothing" && formData.size === "") {
        this.showError("URL field is mandatory for downloads");
        return;
    }

    if (formData.category === "download") {
        formData.shipping = false;
    }

    this.saveProduct(formData);
}

Which one do you find more readable?

Simpler SAPUI5 code: Don't use "else"
Share this