[javascript] How to avoid 'cannot read property of undefined' errors?

In my code, I deal with an array that has some entries with many objects nested inside one another, where as some do not. It looks something like the following:

// where this array is hundreds of entries long, with a mix
// of the two examples given
var test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];

This is giving me problems because I need to iterate through the array at times, and the inconsistency is throwing me errors like so:

for (i=0; i<test.length; i++) {
    // ok on i==0, but 'cannot read property of undefined' on i==1
    console.log(a.b.c);
}

I am aware that I can say if(a.b){ console.log(a.b.c)}, but this is extraordinarily tedious in cases where there are up to 5 or 6 objects nested within one another. Is there any other (easier) way that I can have it ONLY do the console.log if it exists, but without throwing an error?

Imagine that we want to apply a series of functions to x if and only if x is non-null:

if (x !== null) x = a(x);
if (x !== null) x = b(x);
if (x !== null) x = c(x);

Now let's say that we need to do the same to y:

if (y !== null) y = a(y);
if (y !== null) y = b(y);
if (y !== null) y = c(y);

And the same to z:

if (z !== null) z = a(z);
if (z !== null) z = b(z);
if (z !== null) z = c(z);

As you can see without a proper abstraction, we'll end up duplicating code over and over again. Such an abstraction already exists: the Maybe monad.

The Maybe monad holds both a value and a computational context:

1. The monad keeps the value safe and applies functions to it.
2. The computational context is a null check before applying a function.

A naive implementation would look like this:

?? This implementation is for illustration purpose only! This is not how it should be done and is wrong at many levels. However this should give you a better idea of what I am talking about.

As you can see nothing can break:

1. We apply a series of functions to our value
2. If at any point, the value becomes null (or undefined) we just don't apply any function anymore.

const abc = obj =>_x000D_
  Maybe_x000D_
    .of(obj)_x000D_
    .map(o => o.a)_x000D_
    .map(o => o.b)_x000D_
    .map(o => o.c)_x000D_
    .value;_x000D_
_x000D_
const values = [_x000D_
  {},_x000D_
  {a: {}},_x000D_
  {a: {b: {}}},_x000D_
  {a: {b: {c: 42}}}_x000D_
];_x000D_
_x000D_
console.log(_x000D_
_x000D_
  values.map(abc)_x000D_
_x000D_
);

<script>_x000D_
function Maybe(x) {_x000D_
  this.value = x; //-> container for our value_x000D_
}_x000D_
_x000D_
Maybe.of = x => new Maybe(x);_x000D_
_x000D_
Maybe.prototype.map = function (fn) {_x000D_
  if (this.value == null) { //-> computational context_x000D_
    return this;_x000D_
  }_x000D_
  return Maybe.of(fn(this.value));_x000D_
};_x000D_
</script>

Appendix 1

I cannot explain what monads are as this is not the purpose of this post and there are people out there better at this than I am. However as Eric Elliot said in hist blog post JavaScript Monads Made Simple:

Regardless of your skill level or understanding of category theory, using monads makes your code easier to work with. Failing to take advantage of monads may make your code harder to work with (e.g., callback hell, nested conditional branches, more verbosity).

Appendix 2

Here's how I'd solve your issue using the Maybe monad from monetjs

const prop = key => obj => Maybe.fromNull(obj[key]);_x000D_
_x000D_
const abc = obj =>_x000D_
  Maybe_x000D_
    .fromNull(obj)_x000D_
    .flatMap(prop('a'))_x000D_
    .flatMap(prop('b'))_x000D_
    .flatMap(prop('c'))_x000D_
    .orSome('')_x000D_
    _x000D_
const values = [_x000D_
  {},_x000D_
  {a: {}},_x000D_
  {a: {b: {}}},_x000D_
  {a: {b: {c: 42}}}_x000D_
];_x000D_
_x000D_
console.log(_x000D_
_x000D_
  values.map(abc)_x000D_
_x000D_
);

<script src="https://www.unpkg.com/[email protected]/dist/monet.js"></script>_x000D_
<script>const {Maybe} = Monet;</script>

If you have lodash you can use its .get method

_.get(a, 'b.c.d.e')

or give it a default value

_.get(a, 'b.c.d.e', default)

I use undefsafe religiously. It tests each level down into your object until it either gets the value you asked for, or it returns "undefined". But never errors.

What you are doing raises an exception (and rightfully so).

You can always do

try{
   window.a.b.c
}catch(e){
   console.log("YO",e)
}

But I wouldn't, instead think of your use case.

Why are you accessing data, 6 levels nested that you are unfamiliar of? What use case justifies this?

Usually, you'd like to actually validate what sort of object you're dealing with.

Also, on a side note you should not use statements like if(a.b) because it will return false if a.b is 0 or even if it is "0". Instead check if a.b !== undefined

I answered this before and happened to be doing a similar check today. A simplification to check if a nested dotted property exists. You could modify this to return the value, or some default to accomplish your goal.

function containsProperty(instance, propertyName) {
    // make an array of properties to walk through because propertyName can be nested
    // ex "test.test2.test.test"
    let walkArr = propertyName.indexOf('.') > 0 ? propertyName.split('.') : [propertyName];

    // walk the tree - if any property does not exist then return false
    for (let treeDepth = 0, maxDepth = walkArr.length; treeDepth < maxDepth; treeDepth++) {

        // property does not exist
        if (!Object.prototype.hasOwnProperty.call(instance, walkArr[treeDepth])) {
            return false;
        }

        // does it exist - reassign the leaf
        instance = instance[walkArr[treeDepth]];

    }

    // default
    return true;

}

In your question you could do something like:

let test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];
containsProperty(test[0], 'a.b.c');

In str's answer, value 'undefined' will be returned instead of the set default value if the property is undefined. This sometimes can cause bugs. The following will make sure the defaultVal will always be returned when either the property or the object is undefined.

const temp = {};
console.log(getSafe(()=>temp.prop, '0'));

function getSafe(fn, defaultVal) {
    try {
        if (fn() === undefined) {
            return defaultVal
        } else {
            return fn();
        }

    } catch (e) {
        return defaultVal;
    }
}

If you are using lodash, you could use their "has" function. It is similar to the native "in", but allows paths.

var testObject = {a: {b: {c: 'walrus'}}};
if(_.has(testObject, 'a.b.c')) {
  //Safely access your walrus here
}

You can avoid getting an error by giving a default value before getting the property

var test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];

for (i=0; i<test.length; i++) {
    const obj = test[i]
    // No error, just undefined, which is ok
    console.log(((obj.a || {}).b || {}).c);
}

This works great with arrays too:

const entries = [{id: 1, name: 'Scarllet'}]
// Giving a default name when is empty
const name = (entries.find(v => v.id === 100) || []).name || 'no-name'
console.log(name)

If you use Babel, you can already use the optional chaining syntax with @babel/plugin-proposal-optional-chaining Babel plugin. This would allow you to replace this:

console.log(a && a.b && a.b.c);

with this:

console.log(a?.b?.c);

I like Cao Shouguang's answer, but I am not fond of passing a function as parameter into the getSafe function each time I do the call. I have modified the getSafe function to accept simple parameters and pure ES5.

/**
* Safely get object properties.    
* @param {*} prop The property of the object to retrieve
* @param {*} defaultVal The value returned if the property value does not exist
* @returns If property of object exists it is returned, 
*          else the default value is returned.
* @example
* var myObj = {a : {b : 'c'} };
* var value;
* 
* value = getSafe(myObj.a.b,'No Value'); //returns c 
* value = getSafe(myObj.a.x,'No Value'); //returns 'No Value'
* 
* if (getSafe(myObj.a.x, false)){ 
*   console.log('Found')
* } else {
*  console.log('Not Found') 
* }; //logs 'Not Found'
* 
* if(value = getSafe(myObj.a.b, false)){
*  console.log('New Value is', value); //logs 'New Value is c'
* }
*/
function getSafe(prop, defaultVal) {
  return function(fn, defaultVal) {
    try {
      if (fn() === undefined) {
        return defaultVal;
      } else {
        return fn();
      }
    } catch (e) {
      return defaultVal;
    }
  }(function() {return prop}, defaultVal);
}

I usually use like this:

 var x = object.any ? object.any.a : 'def';

This is a common issue when working with deep or complex json object, so I try to avoid try/catch or embedding multiple checks which would make the code unreadable, I usually use this little piece of code in all my procect to do the job.

/* ex: getProperty(myObj,'aze.xyz',0) // return myObj.aze.xyz safely
 * accepts array for property names: 
 *     getProperty(myObj,['aze','xyz'],{value: null}) 
 */
function getProperty(obj, props, defaultValue) {
    var res, isvoid = function(x){return typeof x === "undefined" || x === null;}
    if(!isvoid(obj)){
        if(isvoid(props)) props = [];
        if(typeof props  === "string") props = props.trim().split(".");
        if(props.constructor === Array){
            res = props.length>1 ? getProperty(obj[props.shift()],props,defaultValue) : obj[props[0]];
        }
    }
    return typeof res === "undefined" ? defaultValue: res;
}

Try this. If a.b is undefined, it will leave the if statement without any exception.

if (a.b && a.b.c) {
  console.log(a.b.c);
}

If I am understanding your question correctly, you want the safest way to determine if an object contains a property.

The easiest way is to use the in operator.

window.a = "aString";
//window should have 'a' property
//lets test if it exists
if ("a" in window){
    //true
 }

if ("b" in window){
     //false
 }

Of course you can nest this as deep as you want

if ("a" in window.b.c) { }

Not sure if this helps.

Lodash has a get method which allows for a default as an optional third parameter, as show below:

const myObject = {_x000D_
  has: 'some',_x000D_
  missing: {_x000D_
    vars: true_x000D_
  }_x000D_
}_x000D_
const path = 'missing.const.value';_x000D_
const myValue = _.get(myObject, path, 'default');_x000D_
console.log(myValue) // prints out default, which is specified above

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>