title: JavaScript, elegant way to check nested object properties for null/undefined
body: <p>a "problem" which i have every now and then is that i have an object e.g. <code>user = {}</code> and through the course of using the app this gets populated. Let's say somwhere, after an AJAX call or something i do this:</p>
  
  <pre><code>user.loc = {
      lat: 50,
      long: 9
  }
  </code></pre>
  
  <p>At another place i want to check if <code>user.loc.lat</code> exists.</p>
  
  <pre><code>if (user.loc.lat) {
      // do something
  }
  </code></pre>
  
  <p>If it does not exists, this will cause an error. If <code>user.loc.lat</code> is <code>undefined</code>, <code>user.loc</code> of course is <code>undefined</code> as well.</p>
  
  <pre><code>"Cannot read property 'lat' of null" - Dev Tools error
  </code></pre>
  
  <p>That means I need to check it like this:</p>
  
  <pre><code>if (user.loc) {
      if (user.loc.lat) {
          // do something
      }
  }
  </code></pre>
  
  <p>or</p>
  
  <pre><code>if (user.loc &amp;&amp; user.loc.lat) {
      // do something
  }
  </code></pre>
  
  <p>This isn't really pretty and the bigger my objects are the worse it gets - obviously (imagine 10 levels of nesting).
  It kind bums me that <code>if(user.loc.lat)</code> isn't just returning <code>false</code> if <code>user.loc</code> is <code>undefined</code> as well.</p>
  
  <p>What's the ideal way to check situations like this?</p>