Destructuring deep properties

by

There is a way to handle nested objects and arrays using this syntax. Given the problem described above, a solution would be the following:

let cagingIt = {
      foo: {
        bar: 'Nick Cage'
      }
    };
let { foo: {bar: name} } = cagingIt;

console.log(name); // "Nick Cage"

In this example, foo is referring to the property name “foo”. Following the colon, we then use bar which refers to the property “bar”. Finally, name acts as the variable storing the value.

As for array destructuring, you would handle it like so:

let cagingIt = {
      foo: {
        bar: 'Nick Cage',
        counts: [1, 2, 3]
      }
    };

let { foo: {counts: [ ct1, ct2, ct3 ]} } = cagingIt;
console.log(ct2); // prints 2

It follows the same concept as the object, just you are able to use array destructuring and store those values as well.

Hope this helps!

More Related Contents:

  1. Are ‘Arrow Functions’ and ‘Functions’ equivalent / interchangeable?
  2. What do multiple arrow functions mean in JavaScript?
  3. Map vs Object in JavaScript
  4. Create object from class name in JavasScript ECMAScript 6
  5. How to destructure object properties with key names that are invalid variable names?
  6. ES6 template literals vs. concatenated strings
  7. React Native: require() with Dynamic String?
  8. Create an instance of a class in ES6 with a dynamic name? [duplicate]
  9. Destructuring and rename property
  10. Why “this” is undefined inside a fat arrow function definition? [duplicate]
  11. How do I persist a ES6 Map in localstorage (or elsewhere)?
  12. Importing modules using ES6 syntax and dynamic path [duplicate]
  13. Is there any one-line analogy in ES6 for ES5 `module.exports = require(‘./inner.js’)`?
  14. Active link with React-Router?
  15. How to destructure an object to an already defined variable? [duplicate]
  16. Webpack babel 6 ES6 decorators
  17. Why couldn’t popular JavaScript runtimes handle synchronous-looking asynchronous script?
  18. What is lexical ‘this’? [duplicate]
  19. ES6 `export * from import`?
  20. Inlining ECMAScript Modules in HTML
  21. this.setState is not a function [duplicate]
  22. Get parent class name from child with ES6?
  23. javascript import from ‘/folder’ with index.js
  24. How to test if an object is a Proxy?
  25. Declare a class property outside of a class method
  26. How to get the first element of Set in ES6 ( EcmaScript 2015)
  27. Binding context when calling ES6 method. How to access object from within method called as callback?
  28. Why does .then() chained to Promise.resolve() allow const declaration to be reassigned?
  29. Is it possible to export Arrow functions in ES6/7?
  30. ES6 module syntax: is it possible to `export * as Name from …`?

Leave a Comment