JavaScript Object Properties

Object Properties

Properties are the most important part of JavaScript object.

JavaScript Properties

Properties are the values in an Object. An object is a combination of properties. Properties in an Object can be in any order.

Properties can be add, modify or delete from an object but some properties can be readonly.

Accessing Object Properties

JavaScript properties can be access in many ways.

 objectName.property          // car.make

 objectName["property"]       // car["make"]

 objectName["expression"]       // x = make; car[x]

Expression value must evaluates to valid property name.

Example

<!DOCTYPE html>
<html>
<body>

Object properties can be access using either .property or [property]
<p id="text"></p>

<script>
function Vehicle(make, model, mfgyear, color) {
    this.make = make;
    this.model = model;
    this.mfg_year = mfgyear;
    this.color = color;
}

Vehicle.prototype.sub_type = "Sedan";

var car = new Vehicle('Audi', 'A4', '2009', 'Red');

document.getElementById('text').innerHTML = 'Car manufacturer is ' + car.make + ' ' + car.model;
</script>

</body>
</html>

Download the code Run the code

Example

<!DOCTYPE html>
<html>
<body>

Object properties can be access using either .property or [property]
<p id="text"></p>

<script>
function Vehicle(make, model, mfgyear, color) {
    this.make = make;
    this.model = model;
    this.mfg_year = mfgyear;
    this.color = color;
}

Vehicle.prototype.sub_type = "Sedan";

var car = new Vehicle('Audi', 'A4', '2009', 'Red');

document.getElementById('text').innerHTML = 'Car manufacturer is ' + car['make'] + ' ' + car['model'];
</script>

</body>
</html>

Download the code Run the code

JavaScript for…in Loop

The JavaScript for…in loop statement is use to loop through object properties.

Syntax

for(property in object) {
    //executable code
}

Executable code executes once for each property of an object.

<!DOCTYPE html>
<html>
<body>

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

carInfo = '';
for(var prop in car) {
    carInfo += 'Car '+prop+' : '+car[prop]+'<br />';
}

document.getElementById('text').innerHTML = carInfo;
</script>

</body>
</html>

Download the code Run the code

Add new Properties

You can add new property to an existing object by passing property value.

<!DOCTYPE html>
<html>
<body>

You can add a new property to an exising object.
<p id="text"></p>

<script>
function Vehicle(make, model, mfgyear, color) {
    this.make = make;
    this.model = model;
    this.mfg_year = mfgyear;
}

var car = new Vehicle('Audi', 'A4', '2009', 'Red');
car.color = 'Red';
document.getElementById('text').innerHTML = 'Car color is '+car.color;
</script>

</body>
</html>

Download the code Run the code

Delete property

Delete keyword is use to delete any property from an object.

<!DOCTYPE html>
<html>
<body>

The delete keyword is used to remove property.
<p id="text"></p>

<script>
var car = {make:"Audi", model:"A4", mfgYear:"2007"}

delete car.mfgYear
document.getElementById('text').innerHTML = 'Car is manufactured in year '+car.mfgYear;
</script>

</body>
</html>

Download the code Run the code

The delete keyword deletes object property and its value both. Deleted property cannot be used until it is assign again.

The delete keyword should not be use with JavaScript built-in properties. Using it with built-in properties can result in crash an application.

Property attributes

All object properties have a name as well as value.

The property value is an attribute of a property.

In JavaScript, all the attributes are read only, but value attribute can be change.

Prototype Properties

In JavaScript, all objects inherits the properties of their prototype.

The delete keyword does not delete properties inherited from its prototype.

<<< JavaScript Objects DefinitionJavaScript Object Methods >>>