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 = {};
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 are actually function definitions.
Property Property Value ----------------------------- country US city New York zip 12345 getAddress function() {return this.city + " " + this.country;}
A JavaScript object can be defined in three ways.
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"};
var address = new Object(); address.country = "US"; address.city = "New York"; address.zip = "12345";
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>
Object properties can be accessed by two ways.
objectName.propertyName
or
objectName["propertyName"]
// use dot notation address.country // or use square brackets address["country"]
Object methods can be accessed using below syntax.
objectName.methodName()
<!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>