Moving along through our JavaScript Error Handling series, today we'll take a look at the Null or Undefined Has No Properties error. Null or Undefined Has No Properties is the first TypeError we've explored thus far in this series, which generally encompasses issues where values are accessed that are not of the expected type. The Null or Undefined Has No Properties error occurs specifically when attempting to call a property of the null object or undefined type.
Throughout this article we'll explore the Null or Undefined Has No Properties error in more detail, looking at where it sits in the JavaScript Exception hierarchy as well as providing some simple code examples to see how Null or Undefined Has No Properties errors are thrown, so let's get started!
The Technical Rundown
- All JavaScript error objects are descendants of the
Errorobject, or an inherited object therein. - The
TypeErrorobject is inherited from theErrorobject. - The
Null or Undefined Has No Propertieserror is a specific type ofTypeErrorobject.
When Should You Use It?
The Null or Undefined Has No Properties error deals directly with null and undefined types in JavaScript, of course, so it's important to understand how these work before understanding why this error occurs in the first place.
The null type is one of JavaScript's primitive values along with stuff like string, number, boolean, undefined, and symbol. A null reference represents a complete lack of identification. Simply put, if a variable is assigned to the value of null, that indicates that the variable points to no object at all.
console.log(null); // nullvar name = null;
console.log(name); // null
While they may seem similar, it's important to understand the difference between null and undefined. In basic terms, undefined means that a variable has been declared but has not yet been assigned a value. Moreover, null and undefinedare different types: null is actually an object whereas undefined is a type unto itself:
console.log(typeof(null)); // object
console.log(typeof(undefined)); // undefined
We can also compare the similarity and differences of undefined and null by checking them using equality (==) and identity (===) operators:
console.log(null == null); // true
console.log(null === null); // trueconsole.log(undefined == undefined); // true
console.log(undefined === undefined); // true// Check equality.
console.log(null == undefined); // true
// Check identity.
console.log(null === undefined); // false
At the end we see that even though null and undefined are considered equal, they are not the same identity (equal without type conversion). As discussed, this is because they are of different types behind the scenes: null being an object and undefined being an undefined type.
With that out of the way we can start to understand why trying to access a property of null or undefined may fail. For example, here we're trying to access the name property of undefined:
var printError = function(error, explicit) {
console.log(`[${explicit ? 'EXPLICIT' : 'INEXPLICIT'}] ${error.name}: ${error.message}`);
}
try {
console.log(undefined.name);
} catch (e) {
if (e instanceof TypeError) {
printError(e, true);
} else {
printError(e, false);
}
}
As expected, this throws a Null or Undefined Has No Properties error at us (although, as is commonly the case, Chrome reports the error slightly differently):
// CHROME
[EXPLICIT] TypeError: Cannot read property 'name' of undefined// FIREFOX
[EXPLICIT] TypeError: undefined has no properties
This particular error is probably easiest to understand from the perspective of undefined, since undefined is not considered an object type at all (but its own undefined type instead), and properties can only belong to objects within JavaScript.
Let's try accessing the same name property of a null object and see what happens:
var printError = function(error, explicit) {
console.log(`[${explicit ? 'EXPLICIT' : 'INEXPLICIT'}] ${error.name}: ${error.message}`);
}
try {
console.log(null.name);
} catch (e) {
if (e instanceof TypeError) {
printError(e, true);
} else {
printError(e, false);
}
}
Sure enough, we get another Null or Undefined Has No Properties error:
// CHROME
[EXPLICIT] TypeError: Cannot read property 'name' of null// FIREFOX
[EXPLICIT] TypeError: null has no properties
As we saw above, null is considered an object type, which can inherently have properties, so why is it that null has no properties? The reason is because, unlike all other objects, null represents nothing -- a nonexistent entity. Unlike every other object which might be defined, the JavaScript engine sees a null value and immediately treats it as a pointer to nothing. Since null references nothing, it therefore cannot have any properties of its own.
To dive even deeper into understanding how your applications deal with JavaScript Errors, check out the revolutionary Airbrake JavaScript error tracking tool for real-time alerts and instantaneous insight into what went wrong with your JavaScript code.