Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to check for null, undefined, or blank variables in JavaScript?
In JavaScript, checking for null, undefined, or blank variables is a common task. There's no single built-in function to check all these states, but we can use operators like typeof and equality operators to handle each case effectively.
Let's first understand the differences between these variable states:
Null vs Undefined vs Blank
Undefined variable ? A variable that has been declared but not assigned a value, or a variable that doesn't exist.
Null variable ? A variable that has been intentionally assigned the value
nullto represent "no value".Blank variable ? Usually refers to empty strings (
"") or variables with no meaningful content.
Here's a key comparison:
<html>
<body>
<h3>Null vs Undefined Comparison</h3>
<div id="comparison"></div>
<script>
let output = document.getElementById("comparison");
let result1 = null == undefined; // loose equality
let result2 = null === undefined; // strict equality
output.innerHTML = `
null == undefined: ${result1}<br>
null === undefined: ${result2}<br>
typeof null: ${typeof null}<br>
typeof undefined: ${typeof undefined}
`;
</script>
</body>
</html>
Method 1: Using Strict Equality Operator (===)
The strict equality operator checks for exact value and type matches. This is useful when you want to check for specific null or undefined values.
Syntax
if (variable === null || variable === undefined) {
// variable is null or undefined
}
Example
<html>
<body>
<h3>Checking with Strict Equality Operator</h3>
<div id="output1"></div>
<div id="output2"></div>
<script>
function checkVariable(variable, varName) {
if (variable === null || variable === undefined) {
return `${varName} is null or undefined`;
} else {
return `${varName} has value: ${variable}`;
}
}
let var1 = null;
let var2;
let var3 = "Hello";
document.getElementById("output1").innerHTML = checkVariable(var1, "var1");
document.getElementById("output2").innerHTML = checkVariable(var2, "var2");
</script>
</body>
</html>
Method 2: Using typeof Operator
The typeof operator is safer when checking undeclared variables, as it won't throw an error. However, note that typeof null returns "object" due to a historical JavaScript quirk.
Syntax
if (typeof variable === "undefined") {
// variable is undefined
}
Example
<html>
<body>
<h3>Checking with typeof Operator</h3>
<div id="typeOutput"></div>
<script>
let output = document.getElementById("typeOutput");
let var1 = null;
let var2;
output.innerHTML = `
typeof var1 (null): ${typeof var1}<br>
typeof var2 (undefined): ${typeof var2}<br>
typeof undeclaredVar: ${typeof undeclaredVar}
`;
</script>
</body>
</html>
Method 3: Comprehensive Check for Null, Undefined, and Empty
For a complete solution that checks null, undefined, and empty strings:
<html>
<body>
<h3>Comprehensive Empty Check</h3>
<div id="comprehensiveOutput"></div>
<script>
function isEmpty(value) {
return value === null || value === undefined || value === "";
}
let testValues = [null, undefined, "", "hello", 0, false];
let results = testValues.map(val =>
`${JSON.stringify(val)}: ${isEmpty(val)}`
).join("<br>");
document.getElementById("comprehensiveOutput").innerHTML = results;
</script>
</body>
</html>
Comparison Table
| Method | Checks null | Checks undefined | Safe for undeclared variables |
|---|---|---|---|
variable === null |
Yes | No | No |
variable === undefined |
No | Yes | No |
typeof variable === "undefined" |
No | Yes | Yes |
variable == null |
Yes | Yes | No |
Best Practices
- Use
variable === null || variable === undefinedfor explicit checks - Use
variable == nullas a shorthand to check both null and undefined - Use
typeofwhen you need to safely check undeclared variables - Consider creating a utility function for complex empty checks
Conclusion
Choose the appropriate method based on your needs: strict equality for precise checks, typeof for undeclared variables, and comprehensive functions for complete validation. The == null approach provides a concise way to check both null and undefined values.
17K+ Views
