![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5CNkhDO2kTM3EmM1EmNmhDMyEGZ1YjMzYDM4EWY5QjZ48CXxMzLcdDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL5M3Lc9CX6MHc0RHaiojIsJye.png)
ES6 destructuring assignment & default value & rename All In One
const settings = {
speed: 1
};
const {
speed = 1,
width = 100,
} = settings;
console.log(speed);
// 1 - comes from settings object
console.log(width);
// 100 - fallback to default
const person = {
first: 'eric',
// last: undefined,
};
const {
first: firstName,
last: lastName = 'Eric' ,
} = person;
console.log(firstName);
// xgqfrms
console.log(lastName);
// Eric
Because ES6 destructuring assignment
default values
only kick in if the value is
undefined
✅;
null
,
false
and
0
are all still values! ❌
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5CNkhDO2kTM3EmM1EmNmhDMyEGZ1YjMzYDM4EWY5QjZ48CXxMzLcdDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL5M3Lc9CX6MHc0RHaiojIsJye.png)
const { dogName = '(Snoopy' } = { dogName: undefined }
console.log(dogName);
// what will it be? '(Snoopy'! ✅
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!