Mixed Destructuring

Object and array destructuring can be used together to create more complex expressions. In doing so, you are able to extract just the pieces of information you want from any mixture of objects and arrays. For example:

  1. let node = {
  2.         type: "Identifier",
  3.         name: "foo",
  4.         loc: {
  5.             start: {
  6.                 line: 1,
  7.                 column: 1
  8.             },
  9.             end: {
  10.                 line: 1,
  11.                 column: 4
  12.             }
  13.         },
  14.         range: [0, 3]
  15.     };
  17. let {
  18.     loc: { start },
  19.     range: [ startIndex ]
  20. } = node;
  22. console.log(start.line);        // 1
  23. console.log(start.column);      // 1
  24. console.log(startIndex);        // 0

This code extracts node.loc.start and node.range[0] into start and startIndex, respectively. Keep in mind that loc: and range: in the destructured pattern are just locations that correspond to properties in the node object. There is no part of node that cannot be extracted using destructuring when you use a mix of object and array destructuring. This approach is particularly useful for pulling values out of JSON configuration structures without navigating the entire structure.