How to Safely Access Deeply Nested Properties in JavaScript
You can use the function below to get nested properties from objects error safe. If a property doesn’t exist, it won’t throw the famous last words: “cannot read property of undefined”
const getProperty = (obj, path) => (path.split('.').reduce((value, el) => value[el], obj));
const user = {
settings: {
theme: 'default'
}
};
getProperty(user, 'settings.theme'); // This will return “default”
getProperty(user, 'settings.invalidPath'); // This will return `undefined`Copied to clipboard!
Keep in mind that this will return undefined if the property does not exist. If your properties can be undefined on purpose and you are specifically looking for that, you may run into issues.
If you are using Babel, you can also achieve the same thing by using the optional chaining plugin.
// If `dateOfBirth` is undefined, `birthYear` will be undefined as well
const birthYear = user.dateOfBirth?.year;Copied to clipboard!
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Resource
See more webtips for JavaScript
Share on
Want to get webtips to your mailbox? 📬
Tired of looking for tutorials?
You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.
Check out our interactive course to master JavaScript in less time.
Learn More
