If I have a reference to an object:
var test = {};
that will potentially (but not immediately) have nested objects, something like:
{level1: {level2: {level3: "level3"}}};
What is the best way to check for the existence of property in deeply nested objects?
alert(test.level1);
yields undefined
, but alert(test.level1.level2.level3);
fails.
I’m currently doing something like this:
if(test.level1 && test.level1.level2 && test.level1.level2.level3) { alert(test.level1.level2.level3); }
but I was wondering if there’s a better way.
To check if an object has a nested property, use the optional chaining operator - ?. . The ?. operator allows you to read the value of a nested property without throwing an error if the property does not exist on the object, e.g. obj?.
There are mainly two methods to check the existence of a key in JavaScript Object. The first one is using “in operator” and the second one is using “hasOwnProperty() method”. Method 1: Using 'in' operator: The in operator returns a boolean value if the specified property is in the object.
JavaScript provides you with three common ways to check if a property exists in an object: Use the hasOwnProperty() method. Use the in operator. Compare property with undefined .
Use the underscore Library to Check if the Object Key Exists or Not in JavaScript. If we are already using any of the underscore library methods, we can use the _.has() method, as it returns true if that object has the provided key and returns false if not.
You have to do it step by step if you don't want a TypeError
because if one of the members is null
or undefined
, and you try to access a member, an exception will be thrown.
You can either simply catch
the exception, or make a function to test the existence of multiple levels, something like this:
function checkNested(obj /*, level1, level2, ... levelN*/) { var args = Array.prototype.slice.call(arguments, 1); for (var i = 0; i < args.length; i++) { if (!obj || !obj.hasOwnProperty(args[i])) { return false; } obj = obj[args[i]]; } return true; } var test = {level1:{level2:{level3:'level3'}} }; checkNested(test, 'level1', 'level2', 'level3'); // true checkNested(test, 'level1', 'level2', 'foo'); // false
ES6 UPDATE:
Here is a shorter version of the original function, using ES6 features and recursion (it's also in proper tail call form):
function checkNested(obj, level, ...rest) { if (obj === undefined) return false if (rest.length == 0 && obj.hasOwnProperty(level)) return true return checkNested(obj[level], ...rest) }
However, if you want to get the value of a nested property and not only check its existence, here is a simple one-line function:
function getNested(obj, ...args) { return args.reduce((obj, level) => obj && obj[level], obj) } const test = { level1:{ level2:{ level3:'level3'} } }; console.log(getNested(test, 'level1', 'level2', 'level3')); // 'level3' console.log(getNested(test, 'level1', 'level2', 'level3', 'length')); // 6 console.log(getNested(test, 'level1', 'level2', 'foo')); // undefined console.log(getNested(test, 'a', 'b')); // undefined
The above function allows you to get the value of nested properties, otherwise will return undefined
.
UPDATE 2019-10-17:
The optional chaining proposal reached Stage 3 on the ECMAScript committee process, this will allow you to safely access deeply nested properties, by using the token ?.
, the new optional chaining operator:
const value = obj?.level1?.level2?.level3
If any of the levels accessed is null
or undefined
the expression will resolve to undefined
by itself.
The proposal also allows you to handle method calls safely:
obj?.level1?.method();
The above expression will produce undefined
if obj
, obj.level1
, or obj.level1.method
are null
or undefined
, otherwise it will call the function.
You can start playing with this feature with Babel using the optional chaining plugin.
Since Babel 7.8.0, ES2020 is supported by default
Check this example on the Babel REPL.
🎉🎉UPDATE: December 2019 🎉🎉
The optional chaining proposal finally reached Stage 4 in the December 2019 meeting of the TC39 committee. This means this feature will be part of the ECMAScript 2020 Standard.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With