JavaScript User-defined Object Type

JAVASCRIPT BASICS

• Introduction to JavaScript
• Javascript Features
• JavaScript in HTML
• JavaScript Syntax
• Output in JavaScript
• JavaScript Variables
• Javascript let Keyword
• JS Literals and Keywords
• JavaScript Data Types
• JavaScript Operators
• JavaScript Events
• Javascript const Keyword

JAVASCRIPT FLOW CONTROL AND LOOPS

• JS if, else and else if
• JavaScript for Loop
• JS while and do-while loop
• JS Switch case
• JS break and continue

JAVASCRIPT ADVANCED

• JavaScript Strings
• JavaScript String Methods
• JavaScript Array
• JavaScript Regular Expression
• JavaScript Popup Boxes
• JavaScript Functions
• JavaScript Default Parameters
• JavaScript Rest Parameters
• JavaScript Arrow Function
• JavaScript Errors
• JavaScript Error Handling
• JavaScript Cookies

JAVASCRIPT OBJECT

• JavaScript Objects
• JavaScript User-defined Object
• JavaScript Boolean Object
• JavaScript Number Object
• JavaScript Math Object
• JavaScript Date Object
• JavaScript RegExp Object

JAVASCRIPT WEB API AND INTERFACES

• JavaScript Browser Object
• JavaScript Window Object
• JavaScript History Object
• JavaScript Navigator Object
• JavaScript Location Object
• JavaScript Screen Object
• JavaScript Document Object

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.

<!-- wp:paragraph -->
<p>This tutorial covers the concept of the user-defined object type in JavaScript. We have already covered&nbsp;JavaScript object&nbsp;which is created using&nbsp;<strong>object initializer syntax</strong>&nbsp;or the&nbsp;<strong>Object constructor</strong>&nbsp;syntax, and instance of an&nbsp;<code>Object</code>&nbsp;type is created.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Creating User-defined JavaScript Object Type</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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&nbsp;<em>Car</em>,&nbsp;<em>Cup</em>,&nbsp;<em>Human</em>, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The constructor function is defined just as we define any other user-defined&nbsp;JavaScript Function.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here is the&nbsp;<strong>syntax for defining a constructor function</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">function Xyz(param1, param2, ... , paramN)
{
    this.param1 = param1;
    this.param2 = param2;
    ...
    this.paramN = paramN;    
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Once we have the constructor function defined, we can use it to create an object using the&nbsp;<code>new</code>&nbsp;keyword as follows:</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">let customObj = new Xyz(paramValue1, paramValue2, paramValue3, ... , paramValueN);</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:heading {"level":3} -->
<h3>Using&nbsp;<code>this</code>&nbsp;Keyword</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In JavaScript we use&nbsp;<code>this</code>&nbsp;keyword to reference the current object, hence in the constructor function we create new properties (<em>param1</em>,&nbsp;<em>param2</em>, ...) for the object type and we set the values for the parameters provided at the time of object creation using the&nbsp;<code>new</code>&nbsp;keyword.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Few Points to Remember:</h3>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><li>We can update the constructor function as many times we want, adding more properties or removing properties from it.</li><li>We can also store another object in an object's property while creating the object uwing the&nbsp;<code>new</code>&nbsp;keyword.</li><li>We can use&nbsp;default parameters&nbsp;to specify default values and&nbsp;Rest parameters&nbsp;while defining a user-defined object type's constructor function.</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Now let's take a few examples to see how we can define a custom object type and create an object using the&nbsp;<code>new</code>&nbsp;keyword.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>User-defined JavaScript Object Type Example</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In the below code example we have created a new constructor function for object type&nbsp;<strong>Bike</strong>, and then created an object using the&nbsp;<code>new</code>&nbsp;keyword.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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,</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">let myBike = new Bike("KTM", "Duke", 2020);
let yourBike = new Bike("Royal Enfield", "Classis", 2020);</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>We can compare these objects using JavaScript operators and perform a lot of other operations too.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Using a user-defined Object as Property of another Object</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Let's define one more object type and then use it as a value in our&nbsp;<strong>Bike</strong>&nbsp;object type.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We have defined a new object type&nbsp;<strong>Person</strong>&nbsp;below, and have also added a new property&nbsp;<strong>owner</strong>&nbsp;in the&nbsp;<strong>Bike</strong>&nbsp;object type in which we will store the&nbsp;<strong>Person</strong>&nbsp;objects.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We can do anything with user-defined object types in JavaScript.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Using the&nbsp;<code>Object.create</code>&nbsp;method</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's take an example to understand this.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">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();</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>Yamaha R15</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As you can see in the code above, we can use the&nbsp;<code>Object.create</code>&nbsp;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.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link" href="https://wp.me/pc22El-Vx">< prev</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link" href="https://wp.me/pc22El-VP">next ></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

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.

<!doctype html>
	<head>
		<title>Object in Object Example JavaScript</title>
	</head>
	<body>
		<script>
			/* defining a new constructor function */
			function Person(name, age, city) {
                this.name = name;
                this.age = age;
                this.city = city;
            }
            
            function Bike(company, model, year, owner) {
                this.company = company;
                this.model = model;
                this.year = year;
                this.owner = owner;
            }
            
            /* creating the object */
            let john = new Person("John Wick", 30, "New York");
            let myBike = new Bike("KTM", "Duke", 2010, john);
            
            document.write(myBike.company+"<br/>"+myBike.model+"<br/>"+myBike.year+"<br/>"+myBike.owner.name);
		</script>
	</body>
</html>

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.

< prev

next >