Is it possible to destructure an object into existing variables?

Question

I am trying to extract variables using object destructuring but those variables already exist, something like this

const x=1, y=2 // Those should be 1 and 2
const {x,y} = complexPoint
const point = {x,y}

Is there any way to do this without renaming the destructuring variables?. Some like this and updating point avoiding const definition?

const point = {x,y} = complexPoint

The expected result should be as using object destructuring

const x=1, y=2 // Those should be 1 and 2
const point = {
  x:complexPoint.x,
  y:complexPoint.y
}

Not sure what you want to achieve there. Are you trying to extract with destructure and then create object? — Bibberty, Dec 19 '19 at 20:07
it is a big complex object like `{x,y,z,w,otherFunctions ....}` — Juan Caicedo, Dec 19 '19 at 20:20

Gabor Szekely · Answer 1 · 2019-12-19T23:26:24.527

6

You can do this with array destructuring, i.e.:

const complexPoint = [1,2];

let x, y;
[x,y] = complexPoint;

As for object destructuring, an equivalent syntax would not work as it would throw off the interpreter:

const complexPoint = {x:1,y:2};

let x, y;
{x,y} = complexPoint; // THIS WOULD NOT WORK

A workaround could be:

const complexPoint = {x:1,y:2};

let x, y;
[x,y] = [complexPoint.x, complexPoint.y];

// Or
[x,y] = Object.values(complexPoint);

UPDATE:

It appears you can destructure an object into existing variables by wrapping the assignment in parenthesis and turning it into an expression. So this should work:

const complexPoint = {x:1,y:2};

let x, y;
({x,y} = complexPoint); // THIS WILL WORK

edited Dec 19 '19 at 23:26

answered Dec 19 '19 at 20:22

Gabor Szekely

938
3
11

3

Wrong. Object destructuring into variables *does work* (in expression context) ! – Jonas Wilms Dec 19 '19 at 21:03
The idea is not to modify x and y – Juan Caicedo Dec 19 '19 at 21:46
@JonasWilms Can you give me an example of what you mean? – Gabor Szekely Dec 19 '19 at 23:21
1

Actually you are correct. If you wrap the assignment in parenthesis, you can destructure the object into existing variables. i.e. ({x,y} = complexPoint) – Gabor Szekely Dec 19 '19 at 23:24

score 3 · Accepted Answer · answered Dec 19 '19 at 20:13

here it can be done like this.

const complexPoint = {x: 1, y: 2, z: 3};
const simplePoint = ({x, y}) => ({x, y});

const point = simplePoint(complexPoint);

console.log(point);

In a single line looks like this:

const complexPoint = {x: 1, y: 2, z: 3};

// can be written as
const point2 = (({x, y}) => ({x, y}))(complexPoint);

console.log(point2);

score 1 · Answer 3 · answered Dec 19 '19 at 21:00

It's not 100% clear to me what you want to do.

If you want to update point with two properties of complexPoint

You can actually destructure an object into anything that is assignable. Most often you will destructure into variables, but you can also destructure into properties.

Example:

const point = {x: 1, y: 2};
const otherPoint = {x:3, y: 4};

   ({x: point.x, y: point.y} = otherPoint);
// ^                                     ^
// parenthesis are necessary otherwise the runtime will interpret {
// as the start of a block

console.log(point);

Of course this can become difficult to read the more properties you have. You can also just assign them directly, the good old fashioned way:

point.x = otherPoint.x;
point.y = otherPoint.y;

Or with a loop:

for (const prop of ['x','y']) {
  point[prop] = otherPoint[prop];
}

If you want to create a new object from an existing object

Create a helper function to "pick" the properties from the existing object. Such a function is provided here.

const point = pick(otherPoint, 'x', 'y');

Is it possible to destructure an object into existing variables?

3 Answers3