Skip to content
Related Articles

Related Articles

Improve Article
Tips for Writing better Conditionals in JavaScript
  • Last Updated : 29 Sep, 2020

If you are working with JavaScript, you would be writing a lot of code with a lot of conditions involved. At first, conditionals may seem easy to learn, but there is more to it than to write a few if-else statements.

Object-oriented programming allows one to avoid conditions and replace them with polymorphism and inheritance. You should follow these principles as much as possible. But on the other side, you may end up with the conditionals in your code for various reasons. This article’s purpose is to help you organize the conditional statements.

Tips for writing code with conditionals:

  1. Array.includes: You can use array.includes() method for multiple conditions. The array.includes() method is used to determine if a particular element is present in the array. It returns “true” or “false”

    Example: The following code demonstrates, how to check if the animal is a “lion” or a “dog”.



    Javascript




    // function
    function test(animal) {
        if (animal == 'Lion' || animal == 'dog') {
            console.log('Valid');
        }
    }
      
    // function call
    test('dog');

    Output:

    Valid

    The above code seems to be easy because you have only two animals to check for. However, you are not sure about the input of the user. What if you get a few more animals? If you keep expanding the statement with more OR statements, the code would be more difficult to maintain and looks very unclean.

    You can rewrite the function to make it cleaner. All you need to do is add a new array item if you want to check for some other animal.

    Javascript




       
    function test(animal) {
        const animals = ['dog', 'cat', 'cow', 'Lion'];
      
        // Used to check if a particular
        // element is present 
        if (animals.includes(animal)) {
            console.log('valid');
        }
    }
    console.log(test('dog'));

    Output:

    valid

    You can create an array of animals to separate the conditions from the rest of the code. You can even declare the variable out of the scope of the function and reuse it wherever you need it. This is a way to write a cleaner code that is easy to understand and maintain.

  2. Array.every & Array.some:



    array.every() method is used to check if all the elements present in the array satisfies the given condition. It returns “true” when each array element satisfies the given condition otherwise it returns “false”.

    array.some() method checks if any of the elements in the array have passed the test of function provided. The array.some() method executes the function once for every element of the array. It checks if at least one of the elements of the array satisfies the condition.

    These two JavaScript Array functions are used to reduce the lines of code. Look at the code given below.

    Javascript




    // Array of objects
    const cars = [
        { name: 'car1', color: 'red' },
        { name: 'car2', color: 'blue' },
        { name: 'car3', color: 'purple' }
    ];
      
    function test() {
        let isAllblue = true;
      
        // Condition: all cars must be blue
        for (let c of cars) {
            if (!isAllblue) break;
            isAllblue = (c.color == 'blue');
        }
      
        console.log(isAllblue);
    }
    test();

    Output:

    false

    The above code is little lengthy. You can reduce it by using Array.every() method.

    Javascript




    // Array of objects
    const cars = [
        { name: 'car1', color: 'red' },
        { name: 'car2', color: 'blue' },
        { name: 'car3', color: 'purple' }
    ];
      
    function test() {
      
        // Condition: short way
        // all cars must be in blue color
        const isAllblue = cars.every(
                c => c.color == 'blue');
                  
        console.log(isAllblue);
    }
    test();

    Output:

    false

    You can also implement it using Array.some() method

    Javascript






    // Array of objects
    const cars = [
        { name: 'car1', color: 'red' },
        { name: 'car2', color: 'blue' },
        { name: 'car3', color: 'purple' }
    ];
      
    function test1() {
      
      // Condition: if any car is in blue color
      const isAnyblue = cars.some(c => c.color == 'blue');
      
      console.log(isAnyblue); 
    }
    test1();

    Output:

    true
  3. Return Early or Early exit: The Return Early in JavaScript is an easy way to reduce a function body to zero the number of “else” statements. There are many reasons to use Return Early in your code.
    1. It reduces the total amount of code.
    2. It reduces the length of the line by reducing the logical complexity.
    3. It helps to improve readability.

    The purpose of the Return early is to eliminate the need for “else” conditionals in JavaScript functions by using the “return” keyword in the “if” statement of the body. Let us create a function that will behave differently within certain conditions.

    Note: The following demonstrates the pseudocode for the above explanation.

    Javascript




    function IsRed(someObject) {
      
        // Declare a variable to 
        // store the final value
        var willRed;
      
        // Compare type of object
        if (typeof someObject === 'object') {
      
            // Check object color property
            // is red or not 
            if (someObject.color === 'Red') {
                willRed = true;
            } else {
                willRed = false;
            }
        } else {
            willRed = false;
        }
      
        return willRed;
    }

    This function is clear, but it seems to be unnecessarily complicated. The Return early pattern can be used to increase readability and decrease the number of “else” statements.

    Javascript




    // Use return instead of else statement
    function IsRed(someObject) {
        if (typeof someObject !== 'object') {
            return false;
        }
      
        if (someObject.color !== 'Red') {
            return false;
        }
      
        return true;
    }

    Using the Return Early pattern, we are able to eliminate all the unnecessary “else” statements and make your functions much clearer and concise.

    You can also refactor this function by using only one “if” statement.

    Javascript




    // Here you can reduce your code
    function IsRed(someObject) {
      
        // 2 if statements replaced
        // by 1 if statement
        if (
            typeof someObject !== 'object' ||
            someObject.color !== 'Red'
        ) {
            return false;
        }
        return true;
    }

    This function can be refactored again in a single line of code by using a ternary operator of JavaScript.

    Javascript




    function IsRed(someObject) {
        return typeof someObject !== 'object'
            || someObject.color !== 'Red' ? false : true;
    }

    You reduced all the nesting “if” statements, by reducing the conditions.

    Note: Always aim for lesser nesting and Return Early but don’t spoil it. If your code is short and straight-forward, and if it is clearer with nested “if”s.

  4. Use Object Literal or Maps: The object literal is basically an array of key:value pairs which are used instead of switch statements. Let us look at the example below.

    Javascript




    function printCars(color) {
      
        // Use switch case to 
        // find cars by color
        switch (color) {
            case 'red':
                return ['Rcar1', 'Rcar2'];
            case 'blue':
                return ['Bcar1', 'Bcar2'];
            case 'purple':
                return ['Pcar1', 'Pcar2'];
            default:
                return [];
        }
    }
      
    printCars(null);
    printCars('blue');    

    Output:

     []
    ['Bcar1', 'Bcar2']
    

    The above code can be refactored by using object literal and replacing the “switch” statement totally.

    Javascript




    // Use object literal to 
    // find cars by color
    const carColor = {
        red: ['Rcar1', 'Rcar2'],
        blue: ['Bcar1', 'Bcar2'],
        purple: ['Pcar1', 'Pcar2']
    };
      
    function printcars(color) {
        return carColor[color] || [];
    }
    console.log(printcars());
    console.log(printcars('red'));
    console.log(printcars('blue')); 

    Output:

     []
     ['Rcar1', 'Rcar2']
     ['Bcar1', 'Bcar2']
    

    You can also use Map to achieve the same result.

    Javascript




    // Use map to find cars by color
    const carColor = new Map()
        .set('red', ['Rcar1', 'Rcar2'])
        .set('blue', ['Bcar1', 'Bcar2'])
        .set('purple', ['Pcar1', 'Pcar2']);
      
    function printcars(color) {
        return carColor.get(color) || [];
    }
    console.log(printcars());
    console.log(printcars('red'));
    console.log(printcars('blue')); 

    Output:

     []
     ['Rcar1', 'Rcar2']
     ['Bcar1', 'Bcar2']
    
  5. Use Default Function parameters and Destructuring: The default parameter is a way to set default values for parameters of function in which a value is not passed in i.e. “undefined”.

    Javascript




    function check(flower, quantity) {
        if (!flower) return;
      
        // If quantity not provided, 
        // set default to one
        const a = quantity || 1;
      
        console.log("I have ${a} ${flower}!");
    }
      
    // Results
    check('Rose');
    check('Lotus', 2);

    Output:

    I have 1 Rose!
    I have 2 Lotus!
    

    Now you can use function parameter to set the default value

    Javascript




    // If quantity not provided, parameter
    // provided to set default to one 
    function check(flower, quantity = 1) {
        if (!flower) return;
        console.log(`I have ${quantity} ${flower}!`);
    }
      
    // Results
    // (Default parameter is set)
    check('Rose');
    check('Lotus', 2); 

    Output:

    I have 1 Rose! 
    I have 2 Lotus!
    

    What if flower variable is an object? Can you assign the default parameter to it?

    Javascript




    function check(flower) {
      
        // Print flower name if
        // value provided
        if (flower && flower.name) {
            console.log(flower.name);
        } else {
            console.log('unknown');
        }
    }
      
    // Results
    check(undefined);
    check({});
    check({ name: 'Rose', color: 'red' });

    Output:

    unknown
    unknown
     Rose
    

    In the above example, we want to print the “flower” name if it is available else it will print “unknown”, if the value is not known. We can avoid the conditionals “flower” and “flower.name” by using default function parameter destructing.

    Destructuring allows you to extract properties from objects.

    Javascript




    // Destructing access name property only
    // assign the default empty object {}
      
    function check({name} = {}) {
        console.log (name || 'unknown');
    }
      
    // Results
    check(undefined); 
    check({ }); 
    check({ name: 'Rose', color: 'red' }); 

    Output:

    unknown
    unknown
     Rose
    

    We need property name from flower, you can destructure that parameter using {name}, then use name as variable in your code instead of flower.name because destructuring allows you to assign the properties of an object to the variables.

    You also need to assign empty object {} as default value. If you don’t, it will show the error while executing the line “check(undefined)” i.e. cannot destructure the property name of ‘undefined’ or ‘null’, because there is no name property in undefined or null.

    My Personal Notes arrow_drop_up
Recommended Articles
Page :