avatarDr. Derek Austin 🥳

Summary

This context provides a detailed explanation of how to check for undefined values in JavaScript, including differences between variables that are undeclared, declared but undefined, and declared with the value of undefined, as well as the difference between null and undefined.

Abstract

The context begins by introducing the concept of undefined in JavaScript, explaining that it represents the absence of a value. It then describes how to check for an undeclared variable and how to differentiate between variables that are undefined and those that have the value of undefined. The text also explains the difference between null and undefined in JavaScript, noting that undefined indicates a variable has not been assigned a value while null indicates an intentional lack of value. The context also covers checking for undefined properties on objects, as well as the use of the && operator in writing terse conditionals for checking object properties. The text concludes with a summary of the differences between undefined and null in JavaScript.

Bullet points

  • Undefined in JavaScript indicates the absence of a value.
  • To check for an undeclared variable, use the typeof keyword.
  • Undeclared variables and variables with the value of undefined both return "undefined" when using typeof.
  • The difference between null and undefined is that null indicates an intentional lack of value, while undefined indicates that a variable has not been assigned a value.
  • To check for undefined properties on objects, use the in operator or bracket notation.
  • The && operator can be used to write terse conditionals for checking object properties.
  • Null is loosely equal to undefined, but not to other falsy values.
  • 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.
  • 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.

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.

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

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

Photo by Markus Spiske on Unsplash

Dr. Derek Austin is the author of Career Programming: How You Can Become a Successful 6-Figure Programmer in 6 Months, now available on Amazon.

JavaScript
Programming
Software Development
Software Engineering
Coding
Recommended from ReadMedium