I have the code shown below for destructuring end_time property from this.props.auction object

const {auction: {auction: {end_time}}} = this.props;

But the issue here is above constant will be undefined if auction is an empty object. To fix this, I have changed the code to

if(Object.keys(this.props.auction).length) {
   var {auction: {auction: {end_time}}} = this.props;
} else {
   var {end_time} = "";
}

The above solution works but is ugly and I believe there is definitely a far better way of doing it.

Followed the answer from this post and

My attempt so far is:

const {auction: {auction: {end_time = null}}} = this.props || {};

I thought the above one will set end_time by default to null but I guess since auction is not defined it is throwing an error.

Please suggest a better way of declaring the end_time constant which takes care of an empty auction

I have the code shown below for destructuring end_time property from this.props.auction object

const {auction: {auction: {end_time}}} = this.props;

But the issue here is above constant will be undefined if auction is an empty object. To fix this, I have changed the code to

if(Object.keys(this.props.auction).length) {
   var {auction: {auction: {end_time}}} = this.props;
} else {
   var {end_time} = "";
}

The above solution works but is ugly and I believe there is definitely a far better way of doing it.

Followed the answer from this post and

My attempt so far is:

const {auction: {auction: {end_time = null}}} = this.props || {};

I thought the above one will set end_time by default to null but I guess since auction is not defined it is throwing an error.

Please suggest a better way of declaring the end_time constant which takes care of an empty auction

• javascript
• ecmascript-6

4 Answers 4

You don’t need to use destructuring every time you can use it.

const auction = this.props.auction.auction;
const end_time = auction === undefined ? null : auction.end_time;

You could potentially use destructuring with default values like this:

const { auction: { auction: { end_time = null } = {} } = {} } = this.props || {};

But because the syntax above is cumbersome and unnatural to follow, I ultimately yield to Ry's advice in this case:

You don’t need to use destructuring every time you can use it.

I realize this is tagged ecmascript-6, but this question presents a great example where using the optional chaining operator and nullish coalescing operator seems the most natural solution, at least when they bee officially merged into the ECMAScript 2020 specification:

const end_time = this.props?.auction?.auction?.end_time ?? null;

By bining the use of Optional chaining and Nullish Coalescing Operator you can achieve this goal with only one line like this:

const end_time = props.auction?.auction?.end_time ?? '';

Below are few testing functions to understand the concept:

const end_time_defaultValue = 'end_time_defaultValue';

function testWithEndTime() {
    const props = {
        auction: {
            auction: {
            end_time: new Date(),
            kay1: 'value1',
            kay2: 'value2'
            }
        }
    };
    const end_time = props.auction?.auction?.end_time ?? end_time_defaultValue;
    console.log('testWithEndTime() => ', end_time);
}
testWithEndTime();
// outputs the today date

function testWithoutEndTime() {
    const props = {
    auction: {
        auction: {
        kay1: 'value1',
        kay2: 'value2'
        }
    }
    };
    const end_time = props.auction?.auction?.end_time ?? end_time_defaultValue;
    console.log('testWithoutEndTime() => ', end_time);
}
testWithoutEndTime();
// outputs the end_time_defaultValue
// because the key 'end_time' does not exist

function testWithoutAuctionAuction() {
    const props = {
        auction: {

        }
    };
    const end_time = props.auction?.auction?.end_time ?? end_time_defaultValue;
    console.log('testWithoutAuctionAuction() => ', end_time);
}
testWithoutAuctionAuction();
// outputs the end_time_defaultValue
// because the key 'auction.auction' does not exist

function testWithoutPropsAuction() {
    const props = {};;
    const end_time = props.auction?.auction?.end_time ?? end_time_defaultValue;
    console.log('testWithoutPropsAuction() => ', end_time);
}
testWithoutPropsAuction();
// outputs the end_time_defaultValue
// because the key 'props.auction' does not exist

Be careful about browsers patibility

But if you're using a framework like React, babel will do the job for you.

You may do de-structuring in 2 steps: first de-structure your props, then the necessary object that could be undefined at certain point in ponent life-cycle.

// instead of
const {auction: {auction: {end_time}}} = this.props;

// you may do
const { auction } = this.props;
let end_time;
if(auction){
   ({ end_time } = auction);
}