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