JavaScript User-defined Object Type

This tutorial covers the concept of the user-defined object type in JavaScript. We have already covered JavaScript object which is created using object initializer syntax or the Object constructor syntax, and instance of an Object type is created.

Just like the default Object type, using which we can create objects in JavaScript, we can define our custom type using which we can create custom objects in JavaScript.

Creating User-defined JavaScript Object Type

We can define a custom object type by writing a constructor function where the name of the function should start with an uppercase alphabet for example Car, Cup, Human, etc.

The constructor function is defined just as we define any other user-defined JavaScript Function.

Here is the syntax for defining a constructor function:

function Xyz(param1, param2, ... , paramN)
{
    this.param1 = param1;
    this.param2 = param2;
    ...
    this.paramN = paramN;    
}

Once we have the constructor function defined, we can use it to create an object using the new keyword as follows:

let customObj = new Xyz(paramValue1, paramValue2, paramValue3, ... , paramValueN);

Using this Keyword

In JavaScript we use this keyword to reference the current object, hence in the constructor function we create new properties (param1, param2, ...) for the object type and we set the values for the parameters provided at the time of object creation using the new keyword.

Few Points to Remember:

1. We can update the constructor function as many times we want, adding more properties or removing properties from it.

2. We can also store another object in an object's property while creating the object uwing the new keyword.

3. We can use default parameters to specify default values and Rest parameters while defining a user-defined object type's constructor function.

Now let's take a few examples to see how we can define a custom object type and create an object using the new keyword.

User-defined JavaScript Object Type Example

In the below code example we have created a new constructor function for object type Bike, and then created an object using the new keyword.

We can create as many objects of type Bike once we have defined the constructor function for it. We can set different property values while creating objects. For example,

let myBike = new Bike("KTM", "Duke", 2020);
let yourBike = new Bike("Royal Enfield", "Classis", 2020);

We can compare these objects using JavaScript operators and perform a lot of other operations too.

Using a user-defined Object as Property of another Object

Let's define one more object type and then use it as a value in our Bike object type.

We have defined a new object type Person below, and have also added a new property owner in the Bike object type in which we will store the Person objects.

We can do anything with user-defined object types in JavaScript.

Using the Object.create method

If you do not want to get into the trouble of defining a constructor method to define a user-defined object type, you can use the Object.create() method to create an object of any prototype object which is already defined.

Let's take an example to understand this.

let Bike = {
    company: 'KTM',  // Default value of properties
    model: 'Duke 390',
    show: function() {  // Method to display property type of Bike
        document.write(this.company+" "+this.model);
    }
};

// using Object.create to create a new object
let newBike = Object.create(Bike);
newBike.company = 'Yamaha';
newBike.model = 'R15';
newBike.show();

Yamaha R15

As you can see in the code above, we can use the Object.create method to create a new object using an already defined object, and then if required we can change the properties values and use the object function too.

So that's it for this tutorial. From the next tutorial, we will cover the various built-in JavaScript objects one by one.