Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Destructure object properties inside array for all elements

In its most basic form, having an array of objects:

let arr = [
  {val:"a"},
  {val:"b"}
];

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

getting the first value is easy:

let [{val:res}] = arr; //res contains 'a'

Obtaining all values inside the array can be done with the rest operator:

let [...res] = arr; //res contains all objects

Combining those, I expected to be able to use:

let [...{val:res}] = arr; //undefined, expected all 'val's (['a', 'b'])

The above returns undefined (Tested in FF). Some further testing seems to indicate that adding the rest operator when using an object destructuring as well doesn't use the iteration, but gets back the original object, e.g. let [...{length:res}] = arr; //res= 2. Some other trials, such as let [{val:...res}] = arr; or let [{val}:...res] = arr; produce syntax errors.

It's easy enough to do with other methods, such as using map on the array, but mostly I stumble upon this problem while destructuring multiple levels (an array with objects which have their own property containing an array). Therefore I'm really trying to get around how to do it solely with destructuring. For convenience: a test fiddle

edit

My apologies if I failed to explain the goal of the question. I'm not looking for a solution to a specific problem, only to find the correct syntax to use when destructuring.

Otherwise formulated, a first question would be: in the example above, why doesn't let [...{val:res}] = arr; return all values (['a', 'b']). The second question would be: what is the proper syntax to use a rest operator with a nested object destructuring? (pretty sure I've gotten some definitions mixed up here). It seems that the latter is not supported, but I haven't come across any documentation that (and why) it wouldn't be.

like image 230
Me.Name Avatar asked Oct 16 '16 10:10

Me.Name


People also ask

How do you Destructure objects inside an array?

To destructure an array in JavaScript, we use the square brackets [] to store the variable name which will be assigned to the name of the array storing the element.

Can we Destructure array?

Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. That is, we can extract data from arrays and objects and assign them to variables.

What is Destructure property?

Destructuring is a JavaScript expression that allows us to extract data from arrays, objects, and maps and set them into new, distinct variables. Destructuring allows us to extract multiple properties, or items, from an array​ at a time.


1 Answers

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.

like image 173
Bergi Avatar answered Oct 04 '22 01:10

Bergi