Renaming arguments while deconstructing

In JavaScript you can change the name of an argument as you deconstruct it. I like this, however I keep looking at it like it should be the other way around. Thoughts?

1
2
3
4
5
6
const foo = 1;
const bar = 2;
const fn = ({foo, bar:qux, baz=3}) => {
console.log(`foo:${foo}, bar:${bar}, baz:${baz}, qux:${qux}`);
};
fn({foo, bar}); // foo:1, bar:2, baz:3, qux:2

Deconstructing bar and changing the name to qux, which ever way around you put it it feels kinda wrong, as in bar:qux or qux:bar, especially when you have a default value in there too.

It’s also interesting that bar is still available. It seems that a copy is made.

1
2
3
4
5
6
7
8
9
10
const foo = 1;
const bar = {hello: 'world'};
const fn = ({foo, bar:qux, baz=3}) => {
console.log(`bar:${JSON.stringify(bar)}, qux:${JSON.stringify(qux)}`);
bar = 'test';
console.log(`bar:${JSON.stringify(bar)}, qux:${JSON.stringify(qux)}`);
};
fn({foo, bar});
// bar:{"hello":"world"}, qux:{"hello":"world"}
// bar:"test", qux:{"hello":"world"}