Creating a JavaScript object with an anonymous constructor function

September 16, 2020

Problem

Creating an object literal where one property value depends on another property value is not possible because the object has not yet been initialized

const myName = {
	firstName: "bunny", 
	title: "dr.", 
	fullName: myObj.title + myObj.firstName
};
// Uncaught ReferenceError: Cannot access 'myName' before initialization

Solution

A quick and dirty solution (although I’m not sure this is the best) is to create an anonymous function constructor. Normally an object constructor function is reusable to create multiple objects, but in this case we only want one object, so we can just use an anonymous function

const myName = new function() {
	this.firstName = "bunny";
	this.title = "dr.";
	this.fullname = `${this.title} ${this.firstName}`;
}(); // the () is to avoid linting warnings

console.log(myName);
// {firstName: "bunny", title: "dr.", fullname: "dr. bunny"}

Alternatively

Initialize the object and then add properties that rely on the initial properties

const myName = {
	firstName: "bunny", 
	title: "dr."
};

myName.fullname = `${myName.title} ${myName.firstName}`;

console.log(myName);
//{firstName: "bunny", title: "dr.", fullname: "dr. bunny"}

Or use getter functions

const myName = {
	firstName: "bunny", 
	title: "dr.",
	get fullName() {
		return `${this.title} ${this.firstName}`
	}
}

console.log(myName);
// {firstName: "bunny", title: "dr."}
// notice fullName is not a property

console.log(myName.fullName);
// dr. bunny

References