How to Replace a value if null or undefined in JavaScript?

In JavaScript if a variable is not initialised with any value, then it is set to undefined. We can set a default value if a value is undefined. This can be done using two ways.

Example 1: By using if checks (Brute force). In this method, we will manually check whether a value is not null or not undefined, if so then set it to some default value.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible"
            content="ie=edge">
        <title>Demo</title>
    </head>
      
    <body>
        <h1 style="color: green; 
                text-align: center;">
            GeeksforGeeks
        </h1>
        <h3 style="text-align: center;">
            Replace a value if null or undefined
        </h3>
        <div style="margin-top: 50px;
                    text-align: center;">
            <input type="text" id="anyId">
            <button type="submit"
                    onclick="defaultValue_ifcheck()">
            Submit
            </button>
        </div>
      
          
        <script>
      
            // By using if-check 
            function defaultValue_ifcheck() {
                var oldValue = document.getElementById("anyId").value;
                var newValue;
                if (!oldValue) {
                    newValue = 
                    "This is default value: Geeksforgeeks";
                } else {
                    newValue = oldValue;
                }
                alert(newValue);
            }
        </script>
    </body>
    </html>                    

    chevron_right

    
    

  • Output:

Example 2: By using logical OR (||) operator. In this method, if the value is null or undefined, then it will simply replaced by default value set by user.



  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" 
              content="ie=edge">
        <title>Replace a value if null or undefined</title>
    </head>
      
    <body>
        <h1 style="color: green; 
                   text-align: center;">
            GeeksforGeeks
        </h1>
        <h3 style="text-align: center;">
            Replace a value if null or undefined
        </h3>
        <div style="margin-top: 50px;
                    text-align: center;">
            <input type="text"
                   id="anyId">
            <button type="submit" 
                    onclick="defaultValue_or()">
              Submit
            </button>
        </div>
    </body>
    <script>
      
        // By using Logical OR (||)
        function defaultValue_or() {
            var oldValue = document.getElementById("anyId")
            .value;
            var newValue = oldValue ||
                "This is default value: Geeksforgeeks";
            alert(newValue);
        }
    </script>
      
    </html>

    chevron_right

    
    

  • Output:

Note: In Method 2, don’t use the following newValue = 10 || oldValue;. It will always set newValue to 10 because 10 will always return true.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.