Construct a Javascript object with a complex structure?

Question

I have an Object with this structure that I instantiate all around the code

costs: {
    totalPerYear,
    totalEver,

    perMonth: {
        items: {
            depreciation,
            insurance,
            credit,
            inspection,
            roadTaxes,
            fuel,
            maintenance,
            repairsImprovements,
            parking,
            tolls,
            fines,
            washing
        },
        standingCosts,
        runningCosts,
        total
    },

    perUnitDistance: { 
        runningCosts,
        totalCosts
    }
}

I've been reading about constructors and instantiation. Is there a way, for the sake of conciseness, to have a constructor for this object wherein all the variables are set to undefined, like what happens when we define a variable var x;?

I have the obvious solution

function Costs(){
    this.totalPerYear = undefined;
    this.totalEver = undefined;

    this.perMonth = {
        items: {
            depreciation: undefined,
            insurance: undefined,
            credit: undefined,
            inspection: undefined,
            roadTaxes: undefined,
            fuel: undefined,
            maintenance: undefined,
            repairsImprovements: undefined,
            parking: undefined,
            tolls: undefined,
            fines: undefined,
            washing: undefined                        
        },
        standingCosts: undefined,
        runningCosts: undefined,
        total: undefined
    };

    this.perUnitDistance = { 
        runningCosts: undefined,
        totalCosts: undefined
    };
};

var userCosts = new Costs();

Which techniques do you use to create an object with a complex structure?

this.totalPerYear: undefined is not valid syntax. : should be =. — Barmar
– Barmar, Commented Dec 6, 2018 at 18:38

T.J. Crowder · Accepted Answer · 2018-12-06 19:18:55Z

If you just want an object and don't need it to have a special prototype, a function returning an object rather than a constructor is quite straightforward:

function costs() {
    return {
        costs: {
            totalPerYear: undefined,
            totalEver: undefined,

            perMonth: {
                items: {
                    depreciation: undefined,
                    insurance: undefined,
                    credit: undefined,
                    inspection: undefined,
                    roadTaxes: undefined,
                    fuel: undefined,
                    maintenance: undefined,
                    repairsImprovements: undefined,
                    parking: undefined,
                    tolls: undefined,
                    fines: undefined,
                    washing: undefined
                },
                standingCosts: undefined,
                runningCosts: undefined,
                total: undefined
            },

            perUnitDistance: { 
                runningCosts: undefined,
                totalCosts: undefined
            }
        }
    };
}

Example:

function costs() {
    return {
        costs: {
            totalPerYear: undefined,
            totalEver: undefined,

            perMonth: {
                items: {
                    depreciation: undefined,
                    insurance: undefined,
                    credit: undefined,
                    inspection: undefined,
                    roadTaxes: undefined,
                    fuel: undefined,
                    maintenance: undefined,
                    repairsImprovements: undefined,
                    parking: undefined,
                    tolls: undefined,
                    fines: undefined,
                    washing: undefined
                },
                standingCosts: undefined,
                runningCosts: undefined,
                total: undefined
            },

            perUnitDistance: { 
                runningCosts: undefined,
                totalCosts: undefined
            }
        }
    };
}

console.log(costs());

.as-console-wrapper {
  max-height: 100% !important;
}

There is, of course, nothing to prevent your giving yourself a shorter name to use within costs:

function costs() {
    const u = undefined;
    return {
        costs: {
            totalPerYear: u,
            totalEver: u,

            perMonth: {
                items: {
                    depreciation: u,
                    insurance: u,
                    credit: u,
                    inspection: u,
                    roadTaxes: u,
                    fuel: u,
                    maintenance: u,
                    repairsImprovements: u,
                    parking: u,
                    tolls: u,
                    fines: u,
                    washing: u
                },
                standingCosts: u,
                runningCosts: u,
                total: u
            },

            perUnitDistance: { 
                runningCosts: u,
                totalCosts: u
            }
        }
    };
}

Example:

function costs() {
    const u = undefined;
    return {
        costs: {
            totalPerYear: u,
            totalEver: u,

            perMonth: {
                items: {
                    depreciation: u,
                    insurance: u,
                    credit: u,
                    inspection: u,
                    roadTaxes: u,
                    fuel: u,
                    maintenance: u,
                    repairsImprovements: u,
                    parking: u,
                    tolls: u,
                    fines: u,
                    washing: u
                },
                standingCosts: u,
                runningCosts: u,
                total: u
            },

            perUnitDistance: { 
                runningCosts: u,
                totalCosts: u
            }
        }
    };
}

console.log(costs());

.as-console-wrapper {
  max-height: 100% !important;
}

@JoãoPimentelFerreira and I think an object literal like this ^ would be more performant too.
I thought he was looking for a way to avoid having to write : undefined on every line. Maybe some way to do this with destructuring assignment?
@Barmar - Oh, that's a fun thought. I'm not sure it works, but give it a go!
@Barmar - You can't destructure into properties like that, only variables.
@JoãoPimentelFerreira - Yes, but then instead of repeating undefined, you find yourself repeating the name of the property: let foo; return {foo}; :-)

Collectives™ on Stack Overflow

Construct a Javascript object with a complex structure?

1 Answer 1

10 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Related