Javascript Objects

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" object with three properties.

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

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

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";

Reading properties from object

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

Removing property from object

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");

Reading properties from object

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);

Adding new property in object

Person.age = "23";

Removing property from object

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

Adding method in object

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);
	};
}

Invoking method in object

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());

Loop through Object

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.

// 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(); 

Comparing 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(); 

p1 == p2 // return false;

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

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>

See Also

Javascript Built in String Object
Javascript Built in Number Object
Javascript Built in Math Object
Javascript Built in Date Object
Javascript Built in Arrays Object
Javascript Built in Boolean Object
Javascript Built in RegExp Object
Javascript Built in JSON Object


 
SHARE THIS IF YOU LIKE!
submit to reddit
SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.