The typeof keyword returning “undefined” can mean one of two things: the variable is the primitive undefined, or the variable has not been declared at all. Here?s how to tell the difference.
Photo by Markus Spiske on Unsplash
What if a JavaScript value is undefined?
In JavaScript programming, you will encounter the primitive data type undefined, which indicates the absence of a value.
?The global undefined property represents the primitive value undefined. It is one of JavaScript’s primitive types.? ? MDN Docs
JavaScript variables start with the value of undefined if they are not given a value when they are declared (or initialized) using var, let, or const.
Variables that have not been declared usually cannot be referenced, except by using the typeof keyword, which will not throw a ReferenceError.
How to check for an undeclared variable?
The typeof keyword will return “undefined” for undeclared variables as well as for any variable containing the value undefined.
?A variable that has not been assigned a value is of type undefined.
A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value.
A function returns undefined if a value was not returned.? ? MDN Docs
Check out the following code about how to use undefined in JavaScript:
In the code snippet I also compared the behavior to checking for null in JavaScript, as it is similar but distinct to checking for undefined.
Photo by Markus Spiske on Unsplash
What?s the difference between null and undefined?
By convention, null and undefined have purposeful meanings in computer science: with null meaning intentional lack of value.
?Undefined is supposed to mean a variable has no value (or a property does not exist) because the programmer has not yet assigned it a value (or created the property).
Null is supposed to signal that a variable has no value because the programmer purposefully cleared the value and set it to `null`.? ? Stephen Curtis on his Medium blog
That convention is not enforced by JavaScript, so it is often best to check for both null and undefined, as seen in the first code snippet.
Photo by Markus Spiske on Unsplash
Checking if a property exists on an object
The first example demonstrated checking for undefined in JavaScript and how to check if a variable is undeclared, undefined, or null.
But what if the variable in question is the property of a JavaScript object?
Undeclared properties of JavaScript objects always have the value undefined, whether or not those properties have been initialized.
Of course, that is assuming that the object itself has been declared.
The code example explains how to check for undeclared object properties:
As before, you may also want to check that object properties are not null while you are checking to make sure that they are not undefined.
Photo by Markus Spiske on Unsplash
The && one-liner works because undefined is falsy
As seen in the last code snippet, undefined is a falsy value, so you can write one-liners using &&, the logical AND operator.
I see that particular code pattern written commonly in React sites, where certain JSX elements are only included when certain props are present:
The above React component will only display the <div> containing the image if the property is found in the props passed to the component.
Photo by Markus Spiske on Unsplash
Conclusion
An undefined value in JavaScript is a common occurrence? it means a variable name has been reserved, but currently no value has been assigned to that reference. It is not defined, so we call it undefined.
Technically, the value undefined is a primitive type in JavaScript, and it is a falsy value ? meaning that it evaluates to false in Boolean conditionals.
This falsy property of undefined explains why some people use the && operator to write terse conditionals when checking for object properties.
The value undefined is loosely equal to null but not to other falsy values.
The typeof undefined or any undeclared variable is the string “undefined”.
The difference between checking for undeclared variables and undeclared object properties is that undeclared variables usually result in a ReferenceError, except when using the typeof keyword.
Meanwhile, undeclared object properties always have the value undefined.
If the typeof a value is “undefined”, then it is safe to say that the value is actually undefined ? meaning it was not yet declared, declared but never assigned a value, or declared and assigned the value of undefined.
That will be true of both JavaScript variables and object properties.
Now you know how to check for undefined in JavaScript! ?????????
Photo by Markus Spiske on Unsplash
Further Reading
- Stephen Curtis compares null and undefined on his Medium blog:
A brief history of Null and Undefined in JavaScript
Null and undefined in JavaScript are actually values and types created to simulate errors and keywords common in other?
medium.com
- Brandon Morelli gives his take on null vs undefined in Codeburst.io:
JavaScript ? Null vs. Undefined
Learn the differences and similarities between null and undefined in JavaScript
codeburst.io
- Dmitri Pavlutin has 7 tips for using undefined in JavaScript on his blog:
7 Tips to Handle undefined in JavaScript
Most of the modern languages like Ruby, Python or Java have a single null value ( nil or null), which seems a?
dmitripavlutin.com
- Joel Lovera has good bullet points about null and undefined in JS Tips:
Differences between `undefined` and `null`
undefined means a variable has not been declared, or has been declared but has not yet been assigned a value null is an?
www.jstips.co
- Dr. Axel Rauschmayer looks into the falsiness of undefined in 2ality:
Checking for undefined: === versus typeof versus falsiness
There are several ways of checking whether a variable has the value undefined. This blog post explains the differences?
2ality.com
- Tutorial Republic has a short tutorial about checking for object properties:
How to Check If an Object Property is Undefined in JavaScript
Topic: JavaScript / jQuery You can use the typeof operator in combination with the strict equality operator (===) to?
www.tutorialrepublic.com
Photo by Markus Spiske on Unsplash
