destructuring assignment default value

Question

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,

let foo = { 
            prop1: 'hello!',
            prop2: null 
           }

const prop1 = foo.prop1 || {}
const prop2 = foo.prop2 || {}

console.log(prop1) //  hello!
console.log(prop2) //  {}

👆This is what I want and 👇 is ES6 sugar syntax I thought as equivalent to above(it doesn't work tho..)

let foo = { 
            prop1: 'hello!',
            prop2: null 
           }

const { prop1 = {} } = foo
const { prop2 = {} } = foo

console.log(prop1) // hello!
console.log(prop2) // null

but somehow, sometimes it seems working in React, but the other times it doesn't.. is it compatibility problem? so confusing!

Answer 1

You probably confused by the difference between null and undefined, For example:

const { dogName = 'snickers' } = { dogName: undefined }
console.log(dogName) // what will it be? 'snickers'!

const { dogName = 'snickers' } = { dogName: null }
console.log(dogName) // what will it be? null!

const { dogName = 'snickers' } = { dogName: false }
console.log(dogName) // what will it be? false!

const { dogName = 'snickers' } = { dogName: 0 }
console.log(dogName) // what will it be? 0!

Taken from: http://wesbos.com/destructuring-default-values/