JavaScript tutorial

JavaScript Objects Definition

JavaScript Object Definition

JavaScript Object Definition- In JavaScript, everything is basically an Objects.

  • Booleans can be objects
  • Numbers can be objects
  • Strings can be objects
  • Dates are always objects
  • Maths are always objects
  • Regular expressions are always objects
  • Arrays are always objects
  • Functions are always objects
  • Objects are objects

All values except primitive values are objects.

Examples of primitive values are: strings(“XYZ”), numbers (1,2,3), true, false, null and undefined.

Objects are Variables

A JavaScript variable can contain only one value.

 var redfruit = "Apple";

Objects are also variables, but an object can contains many values.

An object can be written as a name:value pair, separate by colon(:)

Example

<!DOCTYPE html>
<html>
<body>

<p>Create an object</p>


<p id="text"></p>

<script>
	var category= {
			type:"Clothes", 
			cat:"Women cloths", 
			sub_cat:"Winter wear", 
			getCategoryName:function() {return this.cat;}
		};
		
	document.getElementById('text').innerHTML = category.getCategoryName();
</script>

</body>
</html>

Download the code Run the code

Objects Properties

Name value of an object is object properties.

In above object “category”, the name values i.e. type, cat and sub_cat are object properties.

Object Methods

Object Methods are an actions that can be perform by an Object. An object method is a property having a function definition.

In above example, category object getCategoryName is an object method.

In next chapters, you will learn more about object properties and object methods.

Creating a JavaScript Object

There are many ways to create a JavaScript Object.

  • Define and Create object using an object literal
  • Define and Create object using new keyword
  • Create object using object constructor

Create object using an object literal

This is a very simple way to create a JavaScript Object. Using this method you can define and create object in single statement.

Example

<!DOCTYPE html>
<html>
<body>

<p>Create an object</p>


<p id="text"></p>

<script>
	var category= {type:"Clothes", cat:"Women cloths", sub_cat:"Winter wear", getCategoryName:function() {return this.cat;}};
		
	document.getElementById('text').innerHTML = "This category is for "+ category.sub_cat;
</script>

</body>
</html>

Download the code Run the code

Space, tabs and new lines are not important. An object definition can be on multiple lines.

<!DOCTYPE html>
<html>
<body>

<p>Create an object</p>


<p id="text"></p>

<script>
	var category= {
		type:"Clothes", 
		cat:"Women cloths", 
		sub_cat:"Winter wear"
	};
		
	document.getElementById('text').innerHTML = "This category is for "+ category.sub_cat;
</script>

</body>
</html>

Download the code Run the code

Define and Create object using new keyword

You can create a new object using a new keyword as shown in below example.

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>

<script>
var category= new Object();
category.type = "Clothes";
category.cat:"Women cloths";
category.sub_cat:"Winter wear";
		
document.getElementById('text').innerHTML = "This category is for "+ category.sub_cat;
</script>

</body>
</html>

Download the code Run the code

Both above examples do same things, hence it is good to use first notation.

Create object using object constructor

There are few limitations with create an object using above methods. You can create only one object using it.

There is possibility two have more than one object with same type.

Example

In the below code, Vehicle is object constructor. Once you have a object constructor, you can create a new object from it using new keyword same way as you have seen above.

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>
<p id="text1"></p>

<script>
function Vehicle(make, model, mfgyear, color) {
    this.make = make;
    this.model = model;
    this.mfg_year = mfgyear;
    this.color = color;
}
		
var car = new Vehicle('Audi', 'A4', '2009', 'Red');
var van = new Vehicle('Toyota', 'Auris', '1997', 'White');

document.getElementById('text').innerHTML = "Car make & model : "+ car.make + ' ' + car.model;
document.getElementById('text1').innerHTML = "Van make & model : "+ van.make + ' ' + van.model;
</script>

</body>
</html>

Download the code Run the code

this keyword

this is an object which refers current object or own object.

So when this is used within function, this refers to current function .

When this is used within object, this refers to current object itself.

this is not a variable, so it is not possible to change its value or assign value.

Built-in Constructors

There are many built-in JavaScript constructors.

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>

<script>

var x1 = new Object();    
var x2 = new String();    
var x3 = new Number();    
var x4 = new Boolean();   
var x5 = new Array();     
var x6 = new RegExp();    
var x7 = new Function();  
var x8 = new Date();     
		
document.getElementById("text").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>";

</script>

</body>
</html>

Download the code Run the code

Mutable objects

Objects are addressed by reference , and not by value. If car is an object, below statement will not create a copy of person.

<!DOCTYPE html>
<html>
<body>

JavaScript objects addresses by reference. Changes to copy of an object applies to original object as well.
<p id="text"></p>

<script>
function Vehicle(make, model, mfgyear, color) {
    this.make = make;
    this.model = model;
    this.mfg_year = mfgyear;
    this.color = color;
}
		
var car = new Vehicle('Audi', 'A4', '2009', 'Red');
var newcar = car;
newcar.color = "White";

document.getElementById('text').innerHTML = "Car color is "+ car.color;
</script>

</body>
</html>

Download the code Run the code

<<< Forms APIJavaScript Object Properties >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .