Destructure object properties inside array for all elements

by

Why doesn’t let [...{val:res}] = arr; return all values (['a', 'b'])?

You seem to confuse the rest syntax with array comprehensions.

If you assign a value to [someElements, ...someExpression], the value is tested to be iterable and then each element generated by the iterator is assigned to the respective someElements variable. If you use the rest syntax in the destructuring expression, an array is created and the iterator is ran till its end while filling the array with the generated values. Then that array is assigned to the someExpression.

All of these assignment targets can be other destructuring expressions (arbitrarily nested and recursively evaluated), or references to variable or properties.

So if you do let [...{val:res}] = arr, it will create an array and fill that with all the values from the iterator of arr:

let {val:res} = Array.from(arr[Symbol.iterator]())

You can see now why that ends up with undefined, and why using something like [...{length:res}] does yield a result. Another example:

let [{val:res1}, ...{length: res2}] = arr;
console.log(res1) // 'a'
console.log(res2) // 1 (length of `[{val: 'b'}]`)

How can destructuring be used to obtain only the values ['a', 'b']?

Not at all. Use the map method.

More Related Contents:

  1. One-liner to take some properties from object in ES 6
  2. What is destructuring assignment and its uses?
  3. Where can I get info on the object parameter syntax for JavaScript functions?
  4. Is it possible to destructure onto an existing object? (Javascript ES6)
  5. What does curly brackets in the `var { … } = …` statements do?
  6. ES6/ES2015 object destructuring and changing target variable
  7. How do I destructure all properties into the current scope/closure in ES2015?
  8. ES6 destructuring function parameter – naming root object
  9. How to destructure object properties with key names that are invalid variable names?
  10. Destructuring in Node.JS
  11. Destructuring and rename property
  12. ES6 Destructuring and Module imports
  13. Destructuring assignment in JavaScript
  14. Destructuring Nested objects in javascript | Destructure second level parent and child Objects
  15. ES6 destructuring object assignment function parameter default value
  16. What is the difference between const and const {} in JavaScript
  17. How can I ignore certain returned values from array destructuring?
  18. Array destructuring in JavaScript
  19. How to destructure option argument with all default values in ES6?
  20. Curly brackets (braces) in Node.js ‘require’ statement
  21. JavaScript variable assignments from tuples
  22. Node JS / V8 destructuring bug?
  23. Split a string straight into variables
  24. Destructuring of es6 but passing dynamic variable
  25. How to bind methods when destructuring an object in JavaScript?
  26. object destructuring: how to use intermediate nested property
  27. Reload an iframe with jQuery
  28. How to execute shell command in Javascript
  29. How to remove an HTML element using Javascript?
  30. Javascript – Regex to validate date format [duplicate]

Leave a Comment