title: destructuring assignment default value
body: <p>I am learning javascript and I got kind of stuck with ES6 syntax while trying to give a default value to a variable when destructuring.
  Basically, I am trying to assign a variable giving the value of an object's property to it and if the value is false/null/undefined, I want it to be an  empty object.
  For example,</p>
  
  <pre><code>let foo = { 
              prop1: 'hello!',
              prop2: null 
             }
  
  const prop1 = foo.prop1 || {}
  const prop2 = foo.prop2 || {}
  
  console.log(prop1) //  hello!
  console.log(prop2) //  {}
  </code></pre>
  
  <p>This is what I want and  is ES6 sugar syntax I thought as equivalent to above(it doesn't work tho..)</p>
  
  <pre><code>let foo = { 
              prop1: 'hello!',
              prop2: null 
             }
  
  const { prop1 = {} } = foo
  const { prop2 = {} } = foo
  
  console.log(prop1) // hello!
  console.log(prop2) // null
  </code></pre>
  
  <p>but somehow, sometimes it seems working in React, but the other times it doesn't.. is it compatibility problem? so confusing!</p>