How to avoid 'undefined' errors in nested

Question

This question already has an answer here:

• Access Javascript nested objects safely 6 answers

I'm looking for some good strategies for avoiding errors in JavaScript when using dot notation to call the children of children in objects that may or may not exist.

At the bottom of the code snippet below is an example of a solution that works, but is inelegant (at best).

It would be great to see some native JavaScript solutions or even external libraries that can help avoid this kind of error.

const object1 = {
  foo: {
    bar: {
      baz: 'payload'
    }
  }
};


const object2 = {};

const array = [object1, object2];

// this will fail on object2 because obj.foo is undefined
array.forEach(obj => {
    if (obj.foo.bar.baz) {
      console.log(obj.foo.bar.baz);
     } else {
      console.log('undefined');
     }
  } 
);

// this will work, but it's horrible to write all those nested if statements.
array.forEach(obj => {
    if (obj) {
      if (obj.foo) {
        if (obj.foo.bar) {
          if (obj.foo.bar.baz) {
          console.log(obj.foo.bar.baz);
          }
        }
      }
    } else {
      console.log('undefinded');
    }
  }
);

Answer 1

Just to share my two cents:

Some time ago I made a function that allowed to safely access deep properties in javascript using proxies:

// Here is where the magic happens
function optional(obj, evalFunc, def) {

  // Our proxy handler
  const handler = {
    // Intercept all property access
    get: function(target, prop, receiver) {
      const res = Reflect.get(...arguments);

      // If our response is an object then wrap it in a proxy else just return
      return typeof res === "object" ? proxify(res) : res != null ? res : def;
    }
  };

  const proxify = target => {
    return new Proxy(target, handler);
  };

  // Call function with our proxified object
  return evalFunc(proxify(obj, handler));
}

const obj = {
  items: [{
    hello: "Hello"
  }]
};

console.log(optional(obj, target => target.items[0].hello, "def")); // => Hello
console.log(optional(obj, target => target.items[0].hell, {
  a: 1
})); // => { a: 1 }

Also, I wrote an article on this for further reference.

Answer 2

No sure if that's enough of an improvement but you can use a single if statement with the following condition:

(obj && obj.foo && obj.foo.bar && obj.foo.bar.baz)

This will check if obj.foo.bar.baz exists.

const array=[{foo:{bar:{baz:'payload'}}},{}]

array.forEach(obj => {
  if (obj && obj.foo && obj.foo.bar && obj.foo.bar.baz) {
    console.log(obj.foo.bar.baz);
  } else {
    console.log('undefined');
  }
});

Answer 3

You could chain all checks with logical AND &&.

const
    object1 = { foo: { bar: { baz: 'payload' } } },
    object2 = {},
    array = [object1, object2];

array.forEach(obj => {
    if (obj && obj.foo && obj.foo.bar && obj.foo.bar.baz) {
        console.log(obj.foo.bar.baz);
    } else {
        console.log('undefined');
    }
});

For an automatic check, you could take an array of keys and return either the value or undefined.

const
    getValue = (object, keys) => keys.reduce((o, k) => (o || {})[k], object),
    object1 = { foo: { bar: { baz: 'payload' } } },
    object2 = {},
    array = [object1, object2];

array.forEach(obj => console.log(getValue(obj, ['foo', 'bar', 'baz'])));

Answer 4

Lodash already did it for us: https://lodash.com/docs#get

const object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// => 3

_.get(object, ['a', '0', 'b', 'c']);
// => 3

_.get(object, 'a.b.c', 'default');
// => 'default'