How to check for null, undefined, or empty values in JavaScript
How to check for null, undefined, or empty values in JavaScript êŽë š
As someone with a toddler, itâs surprising just how many things in our life are a âlearned skillâ.
Even things we take for granted, like eating. You or I could suck down any variety of foods without a second thought, while parents stare nervously at their firstborn eating a banana, ready to whack their back at the first sign of difficulty.
Checking for null can be nerve-wracking for both new and seasoned JavaScript developers. Itâs something that should be very simple, but still bites a surprising amount of people.
The basic reason for this is that in most languages, we only have to cater to null. But in JavaScript, we have to cater to both null and undefined. How do we do that?
How to write a null check function in JavaScript
We can call this the âI donât care about the story, I just want to know how to do itâ section.
These days whenever you Google a recipe for toast, you get a 5,000-word essay before the writer tells you to put the bread in the oven. Letâs not be like that. Checking for null in JavaScript can be achieved like so.
Letâs imagine our test data object like this:
var testObject = {
empty: '',
isNull: null,
isUndefined: undefined,
zero: 0
}
Our null check function looks like this, where we just simply check for null:
function isNull(value){
if (value == null) { return true } else { return false }
}
To test this function, letâs put some values into it and see how it goes:
console.log(`
testObject.empty: ${isNull(testObject.empty)}
testObject.isNull: ${isNull(testObject.isNull)}
testObject.isUndefined: ${isNull(testObject.isUndefined)}
zero: ${isNull(testObject.zero)}
`)
The output is what we would expect, and similar to what other languages would provide:
node .\index.js
#
# testObject.empty: false
# testObject.isNull: true
# testObject.isUndefined: true
# zero: false
If objects are null or undefined, then this function would return true.
Checking for null, undefined, or an empty string
What if we want to check if a variable is null, or if itâs simply empty? We can check for this by doing the following:
function isNullOrEmpty(value) {
return !value;
}
This depends on the objectâs âtruthinessâ. âTruthyâ values like âwordsâ or numbers greater than zero would return true, whereas empty strings would return false.
We have to be a little careful about this application. Letâs consider form entry. For instance, if there was an empty string in the form, then it would be acceptable to say that the field isnât filled out.
However, if the user gave a single â0â in the form, then 0 would also evaluate to false. In the case of form validation, this wouldnât work the way we would expect. Empty arrays would also evaluate to false, so the result of an array not existing, and an array existing and not having any values in it, would essentially be the same. This is probably not what you want.
Ah boy this is getting complex. Why is it though? Letâs dig in a bit.
Exploring the complexities of null and undefined in JavaScript
There are probably hundreds, if not thousands, of posts and StackOverflow entries on this topic. Itâs simple â the behavior of null and undefined is a bit wily to developers, both new and old. If we get it wrong, websites break, or our node apps stop working. So we really want to dial it in and make sure it works the way we expect.
Add into the mix that JavaScript has been around since 1995. This also presents problems. JavaScript is used on almost every webpage today, so core features simply cannot be rewritten or reimplemented. If, overnight, a change was made to how null or undefined was handled in browsers and frameworks like Node.js, the carnage would be huge. It would dwarf the Crowdstrike outage, for instance.
The reason for this is that most languages only use null, and undefined is something that only is used in JavaScript. While null is appropriate to represent the absence of a value, typically instead of returning undefined in other languages, those languages would throw an exception.
For example, in C#, if we wrote the following:
string testString;
Console.WriteLine(testString);
Our code would throw with âUse of unassigned local variable testStringâ. The compiler is performing some analysis and telling us that we canât use a variable that hasnât been assigned. In other words, itâs undefined.
In C# (and a lot of other languages) we never run the risk of possibly using things that are undefined, because something throws an error before weâre in that situation. Even if you were to do things in other languages that would throw, such as access an entry in an array that is out of bounds, C# would throw, whereas JavaScript would simply return undefined.
Consider:
let array = [];
console.log(array[5])
Weâve got an empty array, and then we try to print out the fifth element from the array. This is out of bounds. The result of this code is undefined.
Differentiating between assigned, null, and undefined
Basically, there are three conditions that we want to account for when checking for values that we think could be null or undefined. To help visualize this, letâs imagine that we have a blue box that is our variable, and the things that we place in this box represent the things we assign to the variable:
There are three states that our box can be in:
The value is assigned. Regardless of what that value is, we know that a value has been assigned to an object because it is not null or undefined. Because of this, there is an object present in the box/the variable:
The value is null. The box is still there, but it has nothing in it:
The value is undefined. The box does not exist.
Conclusion
Most of the time, checking that an item is null will be enough. But because we have both undefined and null to cater to, and both can mean different things, whenever we perform a check for null, we need to think about exactly what kind of check we are trying to perform and act accordingly.
Because null is a âfalseyâ value, it can be tempting to write code like if (!value) to do something if a variable is null. But, as weâve seen, that can also permit empty strings and empty arrays to slip through that check.
Understanding these key differences can help us to write highâquality code that doesnât behave in unexpected ways. And thatâs what we should always aim to do, even if it takes a bit longer.
