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

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.
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>                    
<!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>
<!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.
CSS-Misc
HTML-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
REST API (Introduction)