Search code examples
javascriptobjectdestructuring

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

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.

Solution

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