Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 02 Mar, 2020

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • Example:




    <!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>                    
  • 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:




    <!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>
  • 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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :