Javascript Object

Just like other programming language javascript support "object".In JavaScript, an object is a standalone entity, with properties, type and methods for example "Employee". A Employee" is an real word object it has properties such as name, age, pan, address etc.

Similarly Javascript objects can have properties, which define their characteristics. There are lot of ways to create an objects in Javascript below are the some more popular ways.

Using Literal Notation

This is most common way to create object in Javascript. You can create an object using literal notation. Here "Person" is the name of the new object and property1, property2... is the properties, value1, value2... is the value of each properties.

Syntax

var obj = { 
property1:value1,
property2:value2,
property3:value3,
property4:value4....
};

The following example creates "Person" with four properties in which one property is created as an object with its own properties.

Javascript Creates "Person" Object Example

var Person = {name: "Jimi", address: "12-13-283", email: "jimi@yahoo.com", engine: {cylinders: 4, size: 2.2}};

//Adding new property in object
Person.age = "23";

Javascript Reading Properties from Object Example

var Person = {name: "Jimi", address: "12-13-283", email: "jimi@yahoo.com"};
document.write(Person.name);
document.write(Person.address);
document.write(Person.email);

Javascript Removing Properties from Object Example

var Person = {name: "Jimi", address: "12-13-283", email: "jimi@yahoo.com"};
delete Person.name;

Using Constructor Function

Another way is to create an object in Javascript is constructor function. Define the object type by writing a constructor function and create an instance of the object with new keyword.

function Person(name, address, email) {
  this.Name = name;
  this.Address = address;
  this.Email = email;
}
var personObj = new Person("Jimi", "12-13-284", "jimi@yahoo.com");

Javascript Reading Properties from Object Example

function Person(name, address, email) {
  this.Name = name;
  this.Address = address;
  this.Email = email;
}
document.write(Person.name);
document.write(Person.address);
document.write(Person.email);

Javascript Adding New Properties in Object Example

Person.age = "23";

Javascript Removing Properties from Object Example

function Person(name, address, email) {
  this.Name = name;
  this.Address = address;
  this.Email = email;
}
delete Person.Name;
delete Person.Address;
delete Person.Email;

Javascript Adding Method in Object Example

function Person(name,address, email){
this.name = name;
this.address = address;
this.email = email;
this.display = function()
	{
		document.write(this.name);
		document.write(this.address);
		document.write(this.email);
	};
}

Javascript Invoking Method in Object Example

function Person(name,address, email){
this.name = name;
this.address = address;
this.email = email;
this.display = function()
	{
		document.write(this.name);
		document.write(this.address);
		document.write(this.email);
	};
}
var objPerson = new Person("Jimi","13A/11","jimi@gmail.com");
document.write(objPerson.display());

Javascript Loop Through Object Example

function Person(name,address, email){
this.name = name;
this.address = address;
this.email = email;
};

//Looping object properties
for (var key in Person) 
{
    if (Person.hasOwnProperty(key))
    {
		document.write(key + " = " + p[key] + "</br>");
    }
}

Using Object.create Method

In Javascript objects can also be created using the Object.create method. This allows you to choose the prototype object for your object you want to create, without constructor function.

Javascript Properties and Method Encapsulation Example

// Person properties and method encapsulation
var Person = {
  Name: "Jimi", 
  Address: "12-13-283", 
  Email: "jimi@yahoo.com", 
  displayType : function(){  
    document.write(this.Name);
	document.write(this.Address);
	document.write(this.Email);
  }
}

// Create new Person type called p1 
var p1 = Object.create(Person);
p1.displayType();

// Create new Person type called p1
var p2 = Object.create(Person);
p2.Name = "Tom";
p2.Address = "90/12";
p2.Email = "tom@yahoo.com";
p2.displayType();

Javascript Comparing Object Example

var p1 = Object.create(Person);
p1.Name = "Jimi";
p1.Address = "13/12A";
p1.Email = "jimi@gmail.com";
p1.displayType(); 

var p2 = Object.create(Person);
p2.Name = "Jimi";
p2.Address = "13/12A";
p2.Email = "jimi@gmail.com";
p2.displayType(); 

p1 == p2 // return false;

var p3 = p1;
p2 == p3 // return true;

Javascript Complete Object Example

<html>
<head>
<script type="text/javascript">
//Creating javascript object Person
function Person(name,address, email){
this.name = name;
this.address = address;
this.email = email;
this.display = function()
	{
		document.write(this.name);
		document.write(this.address);
		document.write(this.email);
	};
}

//Creating object of Person type
var p1 = new Person("Jimi","177/1-11","jimi@aol.com");

//Reading object properties
document.write(p1.name);
document.write(p1.address);
document.write(p1.email);
document.write("</br>");

//Invoking method
document.write(p1.display());
document.write("</br>");

//Adding new property to object
p1.age = "23";
document.write(p1.age);
document.write("</br>");

//Removing property from Person object
delete p1.age;
document.write(p1.age);
document.write("<br/>");

//Looping object properties
for (var key in p1) 
{
    if (p1.hasOwnProperty(key))
    {
		document.write(key + " = " + p1[key] + "</br>");
    }
}
document.write("</br>");

//Compaing two objects
var p1 = Object.create(Person);
p1.Name = "Jimi";
p1.Address = "13/12A";
p1.Email = "jimi@gmail.com";
p1.displayType(); 

var p2 = Object.create(Person);
p2.Name = "Jimi";
p2.Address = "13/12A";
p2.Email = "jimi@gmail.com";
p2.displayType(); 

document.write(p1 == p2);
document.write("</br>");
var p3 = p1;
document.write(p2 == p3);
document.write("</br>");

</script>
</head>
<body>
</body>
</html>

« Previous