Avoid an error when destructuring from undefined

user_315017 0
Viewed 7156

Lets say I have this code:

const {x, y} = point;

Babel will turn this into:

var _point = point,
    x = _point.x,
    y = _point.y;

Which is fine, but what if point is undefined? Now I get an error:

"Cannot read property 'x' of undefined".

So how do I avoid this?

I want to do something like

const {x, y} = {} = point;

but that's a syntax error.

I can only see that this is an option:

const {x, y} = point || {};

Which babel transpiles to:

var _ref = point || {},
    x = _ref.x,
    y = _ref.y;

Here we're creating an object just to avoid an undefined error. This seems wasteful.

Is there some syntax I'm missing that would avoid this? Something that would transpile to something like this:

var x, y;
if (typeof point !== 'undefined') {
    x = point.x;
    y = point.y;
}
babeljs destructuring javascript
3 Answers

To handle undefined error in ES6 object destructuring, you can do something like following

const {x, y} = {...point};
console.log(x)      // undefined                  
console.log(y)      // undefined
user_29172680

[…] what if point is undefined? Now I get an error: "Cannot read property 'x' of undefined"

So how do I avoid this?

If you want to write clear code, you can explicitly check that condition:

let { x, y };
if (typeof point === 'undefined') {
    x = y = undefined;
} else {
    { x, y } = point;
}
bignose_701570

Let's assume when user can be a object or undefined

const user = { isManual: true }; // object
//const user = undefined // undefined

when you know that user can be undefined do two things, 1-Define destruct property default value. 2-use (user || {}) when user will undefined that'll use {}. So whenever user object will be undefined isManual will be false.

const { isManual = false } = user || {} 
console.log("isManual", isManual)
user_30334150
Related