Get Nested Object Property By Path String in JavaScript

Working with deeply nested objects in JavaScript can sometimes be complex, especially when you need to access a specific property of nested objects dynamically. Instead of checking each level manually, you can use a path string to get the nested property easily.

In this blog, you will learn how to get a nested object property using a path string and optimize the approach using modern JavaScript features like optional chaining.

Table of Contents

• The Problem
• Methods To Get Nested Object Properties
  • Method 1: Using split() and reduce() Methods
  • Method 2: Using Optional Chaining
• Conclusion

The Problem

The problem is simple, you have to get the property of a nested object using a path string in JavaScript. Let’s say you have an object representing the details of a learner from Intellipaat.

const learner = {
    name: "Intellipaat Learner",
    address: {
        city: "Bangalore",
        zip: {
            code: "12341",
            extended: "1234"
        }
    }
}

Now, what if you want to access the learner.address.zip.code property dynamically, using a string path like address.zip.code. Accessing it directly by using learner[“address.zip.code”] didn’t work because JavaScript doesn’t understand dot notation on strings automatically. Thus, we need a function that can take both the object and the path string and return the correct value.

Methods To Get Nested Object Properties

Here are two methods to get nested object properties efficiently from the object in JavaScript. Let’s discuss each one by one:

Method 1: Using split() and reduce() Methods

One simple way to get the nested object property is by using the split() and reduce() methods together. The split() method is used to break the path string into parts using dots (.) and reduce() to traverse the object.

Example:

Output:

Explanation: In this example, you are using the split() and reduce() methods to access the nested property of the object. If the path string is valid, then it will give you the value otherwise, it will give you undefined.

Method 2: Using Optional Chaining

Optional chaining (?.) in JavaScript provides a smarter way to access deeply nested properties safely.

Example:

Output:

Explanation: In this example, optional chaining is used to get the properties of the nested object. Optional chaining helps you write less code and produce better results.

Conclusion

By using JavaScript’s reduce method and optional chaining, you can efficiently access nested properties from objects using a path string. Our final function provides a robust solution for dynamic object traversal.

Get Nested Object Property By Path String in JavaScript – FAQs