How to Check for Undefined in JavaScript

How to Check for Undefined in JavaScript

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.

Image for postPhoto 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.

Image for postPhoto 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.

Image for postPhoto 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.

Image for postPhoto 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.

Image for postPhoto 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! ?????????

Image for postPhoto 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

Image for postPhoto by Markus Spiske on Unsplash

20