JS/ES6: Destructuring of undefined

by

You can use short circuit evaluation to supply a default if content is a falsy value, usually undefined or null in this case.

const content = undefined
const { item } = content || {}
console.log(item)                       // undefined

A less idiomatic (see this comment) way is to spread the content into an object before destructuring it, because null and undefineds values are ignored.

const content = undefined
const { item } = { ...content }
console.log(item) // undefined

If you are destructuring function params you can supply a default (= {} in the example).

Note: The default value would only be applied if the destructured param is undefined, which means that destructuring null values will throw an error.

const getItem = ({ item } = {}) => item
console.log(getItem({ item: "thing" })) // "thing"
console.log(getItem())                  // undefined

try {
  getItem(null)
} catch(e) {
  console.log(e.message)                // Error - Cannot destructure property `item` of 'undefined' or 'null'.
}

Or even set a default value for the item property if the input object doesn’t contain the property

const getItem = ({ item = "default" } = {}) => item
console.log(getItem({ item: "thing" })) // "thing"
console.log(getItem({ foo: "bar" }))    // "default"

More Related Contents:

  1. How can I write a function that will format a camel cased string to have spaces?
  2. Arrow function without curly braces
  3. What do square brackets around a property name in an object literal mean?
  4. How do I destructure all properties into the current scope/closure in ES2015?
  5. How can I mock an ES6 module import using Jest?
  6. Spread Syntax vs Rest Parameter in ES2015 / ES6
  7. ES6 template literals vs. concatenated strings
  8. ES6 exporting/importing in index file
  9. What is the difference between ‘let’ and ‘const’ ECMAScript 2015 (ES6)?
  10. Is there a mechanism to loop x times in ES6 (ECMAScript 6) without mutable variables?
  11. What is the difference between using constructor vs state = {} to declare state in react component?
  12. Merge two arrays with alternating values
  13. Javascript ES6 export const vs export let
  14. Can I use ES6’s arrow function syntax with generators? (arrow notation)
  15. Arrow functions and the use of parentheses () or {} or ({})
  16. this value in JavaScript anonymous function
  17. Destructuring Nested objects in javascript | Destructure second level parent and child Objects
  18. What does calling super() in a React constructor do?
  19. Maps vs Objects in ES6, When to use?
  20. How to use javascript proxy for nested objects
  21. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  22. How to call another function within the same object?
  23. What is the best general practice to timeout a function in promise [closed]
  24. map function not working in React
  25. Split a Javascript class (ES6) over multiple files?
  26. React cannot read property map of undefined
  27. What is the technical definition of a Javascript iterable and how do you test for it?
  28. How can the current number of i be accessed in a for of loop?
  29. Return object with default values from an array in JavaScript
  30. Deep nested array of objects not rendering

Leave a Comment