How to avoid cannot read property of undefined errors

Question

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 lt 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

User · Answer

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');

User · Answer

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    The monad keeps the value safe and applies functions to it  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    We apply a series of functions to our value If at any point  the value becomes null  or undefined  we just don t apply any function anymore     x000D   x000D  const abc   obj   gt  x000D    Maybe x000D       of obj  x000D       map o   gt  o a  x000D       map o   gt  o b  x000D       map o   gt  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     x000D   lt script gt  x000D  function Maybe x    x000D    this value   x    - gt  container for our value x000D    x000D   x000D  Maybe of   x   gt  new Maybe x   x000D   x000D  Maybe prototype map   function  fn    x000D    if  this value    null      - gt  computational context x000D      return this  x000D      x000D    return Maybe of fn this value    x000D     x000D   lt  script gt  x000D   x000D   x000D      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   x000D   x000D  const prop   key   gt  obj   gt  Maybe fromNull obj key    x000D   x000D  const abc   obj   gt  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     x000D   lt script src  https   www unpkg com monet 0 9 0 dist monet js  gt  lt  script gt  x000D   lt script gt const  Maybe    Monet  lt  script gt  x000D   x000D   x000D

User · Answer

I usually use like this    var x   object any   object any a    def

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  amp  amp  a b  amp  amp  a b c     with this   console log a  b  c

User · Answer

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

User · Answer

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

User · Answer

You can avoid getting an error by giving a default value before getting the property  x000D   x000D  var test      a    b    c   foo        a    bar      for  i 0  i lt test length  i          const obj   test i         No error  just undefined  which is ok     console log   obj a        b        c     x000D   x000D   x000D   This works great with arrays too   x000D   x000D  const entries     id  1  name   Scarllet       Giving a default name when is empty const name    entries find v   gt  v id     100         name     no-name  console log name  x000D   x000D   x000D

User · Answer

Lodash has a get method which allows for a default as an optional third parameter  as show below    x000D   x000D  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 x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 11 lodash js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Try this  If a b is undefined  it will leave the if statement without any exception   if  a b  amp  amp  a b c      console log a b c

User · Answer

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     gt temp prop   0      function getSafe fn  defaultVal        try           if  fn       undefined                return defaultVal           else               return fn                     catch  e            return defaultVal

User · Answer

Update   If you use JavaScript according to ECMAScript 2020 or later  see optional chaining  TypeScript has added support for optional chaining in version 3 7      use it like this obj  a  lot  of  properties   Solution for JavaScript before ECMASCript 2020 or TypeScript older than version 3 7  A quick workaround is using a try catch helper function with ES6 arrow function   x000D   x000D  function getSafe fn  defaultVal      try       return fn        catch  e        return defaultVal            use it like this console log getSafe      gt  obj a lot of properties        or add an optional default value console log getSafe      gt  obj a lot of properties   nothing     x000D   x000D   x000D

User · Answer

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 gt 1   getProperty obj props shift    props defaultValue    obj props 0                        return typeof res      undefined    defaultValue  res

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

Examples related to javascript