Safe navigating function for nested object properties

Question

I've made a function to safely traverse deep objects.

var foo = {
    bar: {
        baz: 1
    }
};

function getDeepProp(obj, properties) {

    if (typeof properties === 'string')
        properties = properties.split('.');

    if (typeof obj === 'undefined')
        return;

    if (!properties.length)
        return obj;

    return getDeepProp(obj[properties[0]], properties.slice(1));
}

console.log(getDeepProp(foo, 'bar.baz')); // 1
console.log(getDeepProp(foo, 'baz.baz')); // undefined

// The function was created to avoid exceptions like:
console.log(foo.baz.baz); // Uncaught TypeError: Cannot read property 'baz' of undefined    

Please suggest possible improvements.

http://jsfiddle.net/rtkczasa/

Answer 1

It is a good exercise on recursion, but I'd suggest using built-in functions. Think that what you want to abstract is this syntax:

obj[a][b][c]

But doing some checking in between:

obj[a] && obj[a][b] && obj[a][b][c]

It seems to be a good job for a reducer, where obj is the accumulator, that gets passed along, and the properties are given as an array that you can reduce over, so p below will be each of the properties above:

function getDeepProp(obj, props) {
  return props.split('.').reduce(function(acc, p) {
    // if the accumulator is something
    // then lookup the next nested property
    // otherwise return undefined
    if (acc == null) return
    return acc[p]
  },obj) // the initial accumulator is the object
}

For example:

var obj = {
  a: {
    b: {
      c: 1000
    }
  }
}

console.log(getDeepProp(obj, 'a.b.c')) //=> 1000
console.log(getDeepProp(obj, 'a.b.foo')) //=> undefined

Note that acc can be an object, or an array, since arrays are objects, and the bracket syntax is the same:

console.log(getDeepProp([[[2,[3]]]], '0.0.1.0')) //=> 3

Also, I would worry about the function doing too much. If properties have not been passed, then the function shouldn't be used in the first place. That's why I'd suggest, among other reasons, to take the object (the receiver of the operation), always last:

function getDeepProp(props, obj)

Answer 2

This is a case where eval is not actually evil, given some constraints.

function getDeepProp(properties) {
    if (!/^[a-zA-Z_$][a-zA-Z0-9_$.]*$/.test(properties)) {
        throw new Error("Invalid property name: " + properties);
    }

    try {
        return eval(properties);
    }
    catch (error) {
        throw new Error("Failed to get value for " + properties + " (" + error + ")");
    }
}

var foo = {
    bar: {
        baz: "The value you want"
    }
};

console.log(getDeepProp("foo.bar.baz"));      // Logs the value of foo.bar.baz
console.log(getDeepProp("alert('Hacked!');"); // Throws an error

Modified JSFiddle: http://jsfiddle.net/rtkczasa/1/

By using a Regular Expression, you guard against script injection attacks because only valid property names will be passed into eval, not arbitrary JavaScript commands.

In the context of accessing a property value, you must ask yourself this question: What's the difference between foo.bar.baz, foo["bar"]["baz"] (which is what your code essentially does), and eval("foo.bar.baz")?

Answer: There is no difference.

I haven't done a performance benchmark on our two approaches, but I'm thinking you'll get a slight performance boost using eval in this case.

People tend to blindly fear eval and this isn't necessary. The blog post eval() isn’t evil, just misunderstood made me rethink my fear of eval and I believe it has its place --- and this is one of them.

Despite popular theory (and Crockford’s insistence), the mere presence of eval() does not indicate a problem. Using eval() does not automatically open you up to a Cross-Site Scripting (XSS) attack nor does it mean there is some lingering security vulnerability that you’re not aware of. Just like any tool, you need to know how to wield it correctly, but even if you use it incorrectly, the potential for damage is still fairly low and contained.