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.

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.

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.

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.

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! 🔥👨‍💻💯👩‍💻🔥

Further Reading

• Stephen Curtis compares null and undefined on his Medium blog:

• Brandon Morelli gives his take on null vs undefined in Codeburst.io:

• Dmitri Pavlutin has 7 tips for using undefined in JavaScript on his blog:

• Joel Lovera has good bullet points about null and undefined in JS Tips:

• Dr. Axel Rauschmayer looks into the falsiness of undefined in 2ality:

• Tutorial Republic has a short tutorial about checking for object properties:

Join my email list to get free access to all of my Medium articles.