Comparison of methods used to return the value of a property deep within a Javascript object

Question

Consider the following company object:

var employee = {
    empID: 45435,
    salary: 44000,
    title: "Janitor",
    firstName: "Richard",
    lastName: "Stallman"
}

var department = {
    name: "Maintenance",
    building: "H",
    room: 404,
    departmentLead: employee
}

var company = {
    name: "Bluth's Original Frozen Banana Stand",
    revenue: 'always',
    maintenanceDept: department
}

If I wanted to access the title property of the employee object, I could reference it with:

var title = company.maintenanceDept.departmentLead.title;

However, if departmentLead is undefined, a TypeError will be thrown. So, I must write a test before accessing title:

if(company && 
   company.maintenanceDept && 
   company.maintenanceDept.departmentLead &&
   company.maintenanceDept.departmentLead.title){ ... }

Is this the best way of doing this? Obviously, this example is contrived because I defined company before using it, so I know title exists. The same cannot be said for a company object returned from an AJAX call. A solution I've been using has been:

// Edit: I've been informed adding properties to Object.prototype is not a smart thing to do...so don't do this
Object.prototype.propertyWithPath = function (path) {
    var keys = path.split('.');
    var parent = this;
    var child;

    for (var i = 0; i < keys.length; i++) {
        child = keys[i];

        if (parent[child] === undefined) {
            return undefined;
        }
        parent = parent[child];
    }
    return parent;
};

Besides the performance hit, are there any downsides to using this method vs the alternative?

Answer 1

Your choices are either to do the testing inline or use a function similar to the one you've shown. (But see the comment on the question: Never add enumerable properties to Object.prototype. Use a non-prototype function instead.)

Note that the test doesn't have to be an if, you can do this:

var title = company && 
            company.maintenanceDept && 
            company.maintenanceDept.departmentLead &&
            company.maintenanceDept.departmentLead.title;

title will either be undefined (or another falsey value), or the title, because JavaScript's && operator is curiously powerful: If the value on the left is falsey, it returns that value; otherwise, it returns the value on the right. It doesn't always return true or false as it would in many other languages. So 5 && 7 is 7; 0 && 7 is 0.

Answer 2

Besides the obvious performance hit that you mention, which personally would be enough to avoid it, here is another downside:

Object.prototype.propertyWithPath = function (path) {
    var keys = path.split('.');
    var parent = this;
    var child;

    for (var i = 0; i < keys.length; i++) {
        child = keys[i];

        if (parent[child] === undefined) {
            return undefined;
        }
        parent = parent[child];
    }
    return parent;
};

var foo = { bar: 1 };

for(var prop in foo)
    console.log(prop); //bar, propertyWithPath

If you want to extend Object.prototype, use Object.defineProperty and make in non-enumerable.

Answer 3

You could use a factory method to generate objects. That way the attributes will always be there:

var employee = function(params){
    return {
        empID: params.empID || false,
      salary: params.salary || false,
      title: params.title || '',
      firstName: params.firstName || '',
      lastName: params.lastName || ''
    };
}



var department = function(params){
    return {
        name: params.name || '',
        building: params.building || '',
        room: params.room || 0,
        departmentLead: params.employee || employee({})
    }
}

var emp1 = employee({
    empID: 45435,
    salary: 44000,
    title: "Janitor",
    firstName: "Richard",
    lastName: "Stallman"
})

var emp2 = employee({});

var dep1 = department({
    name: "Maintenance",
    building: "H",
    room: 404,
    departmentLead: emp1
})

var dep2 = department({});

console.log(dep2.departmentLead.firstName);

Answer 4

You can just wrap it in a try block:

try {
    company.maintenanceDept.departmentLead.title
} catch (e) {
    // You can run a regex on e.message to get the child property that caused the issue
}