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
}

Iong

Not sure what you want to achieve there. Are you trying to extract with destructure and then create object? – Emitter

Yes, I am trying to extract just those variables – Iong

What's the content of complex point? – Imamate

it is a big complex object like {x,y,z,w,otherFunctions ....} – Iong

Answer 1

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);

Emitter

Answer 2

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

Biebel

Wrong. Object destructuring into variables does work (in expression context) ! – Nochur

The idea is not to modify x and y – Iong

@JonasWilms Can you give me an example of what you mean? – Biebel

Actually you are correct. If you wrap the assignment in parenthesis, you can destructure the object into existing variables. i.e. ({x,y} = complexPoint) – Biebel

notice that ; is required on the line before the parenthesis (here you have ; in all lines so this is good) – Janeejaneen

Answer 3

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');

Catchy

Answer 4

After the destructuring, you can use the destructured data and save it as an object to another variable.

If we have this object:

const obj={"property":"value","property2":"value"};

You can destructure data from it like this:

const {property}=obj;

If we want to assign the destructured data only to another variable, We would do this:

const newVariable ={property};

Now the newVariable value will be equal to:

{"property":"value"}

Benner