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.
- 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>
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>
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...