Object destructuring gives me a NaN value when using a specific variable name

Question

My object has 2 properties, when those properties are named left and top { left: rect.left, top: rect.top} . After destructuring the object, my x and y variables are both NaN.

const { x, y } = this.getCanvasPosition(this.canvasHex.current);

But if I rename my properties of that object to x and y { x: rect.left, y: rect.top} , I get the values I'm looking for.

I'm wondering what is exactly going on here.

Answer 1

You need a renaming of the properties, because you have no properties x and y , but left and top .

const { left: x, top: y } = this.getCanvasPosition(this.canvasHex.current);

 const { left: x, top: y } = { left: 10, top: 5 }; console.log(x, y);