Javascript Object Literal and Object Constructor Fundamentals

If we try to understand Javascript objects in a simple way, we can say it is a collection of properties(used to keep the state of the object) and methods(that give an object behavior).

– Head First Javascript Programming

I am writing this post for my reference. I found Head First Javascript Programming book explained the object concept thoroughly. So, I am using the book definition and examples(modified) in my post.

In Javascript, we can create objects using Object Literal and Object Constructor syntax. We will try to understand the fundamentals which will help us to decide when to use what.

Syntax

Object Literal

An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).

var dog1 = {
    // properties
    name: "Kafka",
    weight: 48,
    breed: "Lab",
    
    // method
    bark: function() {
        alert("Woof Woof!");
    }
}

Object Constructor

Think of a constructor like a little factory that can create an endless number of similar objects.

It’s a two step process.

Step -1: Defining the constructor

function Dog(name, weight, breed) {
    // properties
    this.name = name;
    this.weight = weight;
    this.breed = breed;

    // method
    this.bark = function() {
        if (this.weight > 25) {
            alert(this.name + " says Woof Woof!");
        } else {
            alert(this.name + " says Yip Yip!");
        }
    };
}

Step -2: Using the constructor

var dog1 = new Dog('Kafka', 48, 'Lab');
var dog2 = new Dog('Frida', 20, 'Mix');

Use Cases

Object Literal

If you don’t have behavior associated with an object (i.e. if the object is just a container for data/state), we can use the object literal or when we don’t need many similar objects. The reason is we need to create multiple literals with the same property and method defined inside that literal.

Ex:

var dog1 = {
    // properties
    name: "Kafka",
    weight: 48,
    breed: "Lab",
    
    // method
    bark: function() {
        alert("Woof Woof!");
    }
}

var dog2 = {
    // properties
    name: "Frida",
    weight: 20,
    breed: "Lab",
    
    // method
    bark: function() {
        alert("Yip Yip!");
    }
}

If you want to add properties to the object dynamically then you need to assign to all the objects individually. Let’s say we want to add property called color to dog object which means I need to write like below:

dog1.color = "White";
dog2.color = "Brown";

Object Constructor

In terms of code, a constructor is quite similar to a function that returns an object: you define it once and invoke it every time you want to create a new object. In contrast to Object Literal when we need many similar objects or we have behavior attached to the object we can use Object Constructor.

Once we define the constructor, you can see creating an instance of the object is optimized and handy. Another advantage is we can use prototype inheritance.

var dog1 = new Dog('Kafka', 48, 'Lab');
var dog2 = new Dog('Frida', 20, 'Mix');

If we want to add property to the object constructor dynamically which will be available to all object instances then we can add through prototype.

Ex:

Dog.prototype.color = "White";

Then, object instance can override that value as per requirement.

Ex:

dog1.color = "Yellow";
dog2.color = "Brown";

Conclusion

Both Object Literal and Object Constructor have their own advantages. So, knowing their usage and limitations help us to use them smartly. In Javascript, everything is an object so think about it :). Even, we can use Object Literal inside Object Constructor.

// Literal
var dog1Params = {
    name: "Kafka",
    color: "White",
    weight: 48,
    breed: "Lab"
}

dog1 = new Dog(dog1Params);

// Constructor
function Dog(params) {
    this.name = params.name;
    this.color = params.color;
    this.weight = params.weight;
    this.breed = params.breed;
}