Compelling ECMAScript 6 Destructuring use cases

Question

Why was destructuring introduced to ECMAScript 6?

There seem to be two different questions here. Are you looking for "compelling use cases" or an explanation/justification for the example code? — Matt Ball, Oct 11 '14 at 17:54
@SamLeach You might want to check [these examples](http://wiki.ecmascript.org/doku.php?id=harmony:destructuring#examples) out — thefourtheye, Oct 11 '14 at 18:05
It's still not a very good question for SO. To get information about *why* a certain feature was added to a language or why it works that way, you have better chances getting an answer from the people working on the language. E.g. https://esdiscuss.org/ — Felix Kling, Oct 12 '14 at 18:55

score 4 · Answer 1 · answered Oct 11 '14 at 18:17

4

Trivial example:

var {forEach} = Array.prototype;
forEach.call(document.querySelector(...

Argument destructuring is fun:

function ({opt1 = true, opt2 = false, opt3} = {}) { ...

answered Oct 11 '14 at 18:17

There are default values in the destructuring syntax? – Bergi Oct 11 '14 at 18:45
Wow, I didn't knew that. +1! – Bergi Oct 11 '14 at 18:53
Yes, this works not only in argument lists, but in general: `var { x = 3 } = {};`. – Oct 12 '14 at 07:22
1

Here's your useless destructuring brain-teaser of the day: what does `var {x} = 1;` do? TypeError? Or...? – Oct 12 '14 at 07:26
@torazaburo `undefined` most likely. `typeof (1).x == "undefined"` – lyschoening Oct 30 '14 at 08:34

score 4 · Answer 2 · answered Oct 11 '14 at 19:45

4

Here is another one: Map#entries returns an iterator over (key, value) tuples. The most elegant way to iterate over them is use destructuring:

for (var [key, value] of map.entries()) {
    // ...
}

answered Oct 11 '14 at 19:45

Felix Kling

705,106
160
1,004
1,072

+1, that's the one that came to my mind after I had posted my list :-) – Bergi Oct 12 '14 at 11:21

score 2 · Answer 3 · edited May 23 '17 at 11:59

not sure why I would want to use [x, y] = [y, x].

Because using an extra variable two swap two values is cumbersome, and JS with its pass-by-value function calls does not let you write a swap function.

most compelling use cases for ECMAScript 6's destructuring feature?

What I can think of, this mostly will be used for

multiple function return values

function rgb2hsv(r, g, b) {
     …
     return {h, s, v};
}
…
var {h, s, v} = rgb2hsv(…);

Promise.spawn(function* () {
    …
    var [a, b] = yield [async1(), async2()];
    …
})

importing modules, e.g. something like

var {abs, trunc, round} = require('Math')

Compelling ECMAScript 6 Destructuring use cases

3 Answers3