JavaScript Objects

JavaScript is a class less language. Everything in JavaScript is an object. A JavaScript object is an associative array (also called hash in some languages). It stores key-value pairs separated by colon (:) between them. JavaScript objects are assigned to variables. An object can contains zero or more data items.

Below object obj1 has three items (key:value pairs) whereas obj2 has no data (empty object)

	var obj1 = {type:"Clothes", category:"Women cloths", sub_cat:"Winter wear"};
        var obj2 = {};

Object properties

The keys of the items in the object are called object properties.

<!DOCTYPE html>
<html>
<body>

<p>Creating a JavaScript Object.</p>

<p id="demo"></p>

<script>
var address = {country:"US", city: "New York", zip : "12345"}; 
document.getElementById("demo").innerHTML = address.country;
</script>

</body>
</html>

 	
	Property 	Property Value
        ---------------------------------
	country		US
	city		New York	
	zip		12345
        street_addr	My street address

Download the code Run the code

Object Methods

Object methods are actually function definitions.

	Property 	Property Value
        -----------------------------
	country		US
	city		New York	
	zip		12345	
	getAddress  	function() {return this.city + " " + this.country;}

Object Definition

A JavaScript object can be defined in three ways.

Using object literal

Object literal is like a string literal except it starts with { and ends with } and contains comma separated list of key value pairs. Key and value are separated by colon (:). In the below example, we are not only defining the object called address but also initializing its data.

    var address = {country:"US", city: "New York", "zip" : "12345"};

Using new keyword

    var address = new Object();
    address.country = "US"; 
    address.city = "New York"; 
    address.zip = "12345";

Using Object constructor

You can create a function and assign the data using the this keyword and dot notation. The this keyword provides access to the object that owns the function.

<!DOCTYPE html>
<html>
<body>
<p>Creating a JavaScript Object.</p>
<p id="demo"></p><p id="demo2"></p><p id="demo3"></p>
<script>
var address = {
   country:"US", 
   city: "New York", 
   zip : "12345"
}; 
document.getElementById("demo").innerHTML = address.country + " " +  address.city + " " + address.zip;	

address = new Object();
address.country = "China"; 
address.city = "Shangai"; 
address.zip = "ADFTYU";
document.getElementById("demo2").innerHTML = address.country + " " +  address.city + " " + address.zip;	

function Address (country, city, zip) {
	this.country = country; 
	this.city    = city; 
	this.zip     = zip; 
}
var OfficeAddr   = new Address ("India", "Delhi", "66777");
document.getElementById("demo3").innerHTML = OfficeAddr.country + " " +  OfficeAddr.city + " " + OfficeAddr.zip;	
	
</script>
</body>
</html>

Download the code Run the code

How to access object properties

Object properties can be accessed by two ways.

objectName.propertyName

objectName["propertyName"]

Example

// use dot notation
address.country 
// or use square brackets
address["country"]

How to access object methods

Object methods can be accessed using below syntax.

objectName.methodName()

Example

<!DOCTYPE html>
<html>
<body>

<p>Creating and using an object method.</p>

<p>An object method is a function definition, stored as a property value.</p>

<p id="demo"></p>

<script>
var address = {
				country:"US", 
				city: "New York", 
				zip : "12345", 
				getAddress : function () {
					return this.city+" "+this.zip+" "+this.country;
				}
			  }; 

document.getElementById("demo").innerHTML = address.getAddress();
</script>
</body>
</html>

Download the code Run the code

<<< JavaScript Callback FunctionsJavaScript Events >>>