Properties are the most important part of JavaScript object.
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.
JavaScript properties can be access in many ways.
objectName.property // car.make
or
objectName["property"] // car["make"]
or
objectName["expression"] // x = make; car[x]
Expression value must evaluates to valid property name.
<!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>
<!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>
The JavaScript for…in loop statement is use to loop through object properties.
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>
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>
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>
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.
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.
In JavaScript, all objects inherits the properties of their prototype.
The delete keyword does not delete properties inherited from its prototype.