ES6 goodies for destructuring and assigning to object properties

Question

I am a software developer who is now learning the new ES6 style of JavaScript. I find the ES6 features great, but I'm still not aware of all the most popular features that ES6 offers and I find it difficult to use it wisely in practice.

I have the following line of code that - if possible and practical - I'd like to make simpler. I have to admit that in this example, I would also be refactoring just for the sake of refactoring and learning better how ES6 can help me creating expressive, simple code in the future (or at least understand if someone uses some crazy one-liner).

// HTML: <canvas></canvas>
const canvas = document.querySelector('canvas');
// I'm wondering if there is another way to do this:
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

I could create width and height like this:

const { innerWidth: width, innerHeight: height } = window;
// equivalent to:
const width = window.innerWidth;
const height = window.innerHeight;

I am looking for a solution that rather than creating new variables, assigns the values to an object, using some property names. Is there an idiomatic way to do this?

Something like this:

const canvas = document.querySelector('canvas');
// NONE OF THESE WORKED
const { innerWidth: canvas.width, innerHeight: canvas.height } = window;
const { canvas.width, canvas.height } = { window.innerWidth, window.innerHeight }

Answer 1

Something like this:

// NONE OF THESE WORKED
const { innerWidth: canvas.width, innerHeight: canvas.height } = window;

This is the right approach. However, you don't want to declare new variables but instead have the canvas properties as targets, so const is wrong here. You need only the assignment. And you need to wrap in parenthesis:

({ innerWidth: canvas.width, innerHeight: canvas.height } = window);

Answer 2

One possible way to do this in one line is using Array destructuring. The example below considers that the property names are different on the source and destination object.

[canvas.width, canvas.height] = [window.innerWidth, window.innerHeight]

In my opinion, this is pretty intuitive code, but I don't see it used often. It might cause some confusion amongst less-experienced JavaScript developers, so you need to make your own decision whether it actually improves the readability of your code.