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

0 0 1 minute read

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;"> 
        zambiatek 
    </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: Geeksforzambiatek"; 
            } 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;"> 
        zambiatek 
    </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: Geeksforzambiatek"; 
        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.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!