Detecting an undefined object property

javascript

undefined-properties

javascript-best-practices

variable-scopes

byAnton Shumikhin·Nov 7, 2024

Detect an undefined property in JavaScript using typeof. If the property does not exist or is undefined, typeof will output "undefined":

if (typeof obj?.someProperty === "undefined") {
  // The property is either not present or explicitly set to undefined
}

Here, '?' is known as the optional chaining operator which safeguards against a TypeError if obj is undefined.

Striding through undefined: your toolset

To navigate the undefined landscape effectively, here are some tried and tested tools you should always keep at your disposal.

`hasOwnProperty` - your property owner investigator

Use obj.hasOwnProperty('prop') when you need to confirm whether a property exists on an object without considering the prototype chain.

if (obj.hasOwnProperty('someProperty')) {
  // Property is owned by obj, but its value could still be undefined
  console.log('Egad! We may well be onto something.');
}

The untouchable `undefined` in ES5 and beyond

Post ES5, undefined is an immutable standard value. However pre-ES5, void 0 was used frequently as a secure way to get the undefined value; today it serves as a historical reminder of JavaScript's dynamic evolution.

Undefined, defined? `typeof` is your answer

Whether a variable is declared or not, typeof will safely return 'undefined' if it holds no value. If in doubt, typeof is your scout.

if (typeof notSureThisExists === 'undefined') {
  // Variable either is undeclared or holds undefined value
  console.log('A variable walked into a bar… only to realize it was undefined.');
}

JavaScript scope: named undefined variables

Be careful out there, because JavaScript allows local variables to be named undefined, which can end up hiding the global undefined. Keep a keen eye on the scope!

Playing `"hide-and-seek"` with properties using `in`

The in operator does a thorough job when checking for property existence, diving into the prototype chain too, unlike hasOwnProperty.

if ('someProperty' in obj) {
  // Property found in obj or within its prototype chain
  console.log('Jackpot! This property plays hard to get.');
}

Keep those traps at bay: common pitfalls and solutions

Let's go through some common mistakes you could make while dealing with undefined properties and learn how to avoid them.

That falsy booby trap

Beware, if(obj.prop) checks for other falsy values—'', 0, null, not just undefined. Explicitness is your best bet in JavaScript.

The undeniable power of triple equals

A direct obj.prop === undefined check is clean when looking for explicit undefined properties. It's like stating loudly, "I want to see your ID".

if (typeof obj !== 'undefined' && obj.someProperty === undefined) {
  // obj exists, and obj.someProperty is explicitly undefined
  console.log('I found undefined! Oh wait, it was hiding in plain sight.');
}

`null` vs `undefined`: the battle of missing values

Remember, null and undefined are almost twins in JavaScript—null == undefined. So when a property's null, it's a significant absence of value.

if (person.name == undefined) {
  // person.name is either null or undefined
  console.log('Hello, Null or Undefined. Nice to meet... Hmm, who exactly?');
}