Object properties
In this chapter you will learn:
- How to access properties
- How use variable as the property name
- How to reference property name with space
- How to delete a property or method from an object
- How to determine if an object has a property
- How to enumerate object's properties
- How to pass in value with Object literals
Access Properties
The following code shows how to access properties via bracket notation.
<!DOCTYPE html><!--from j a v a 2 s .c om-->
<html>
<head>
<script type="text/javascript">
var tutorial = {
name : "JavaScript",
pageSize : 9
};
document.writeln(tutorial["name"]); //"JavaScript"
document.writeln(tutorial.name); //"JavaScript"
</script>
</head>
<body>
</body>
</html>
Variable as property name
The following code uses variables for property access.
<!DOCTYPE html><!--from j av a2 s . c o m-->
<html>
<head>
<script type="text/javascript">
var tutorial = {
name : "JavaScript",
pageSize : 9
};
var propertyName = "name";
document.writeln(tutorial[propertyName]); //"JavaScript"
</script>
</head>
<body>
</body>
</html>
Deal with spaces in property name
The following code uses bracket notation when the property name contains space:
<!DOCTYPE html><!-- ja v a2 s . c o m-->
<html>
<head>
<script type="text/javascript">
var tutorial = {
"tutorial name" : "JavaScript",
pageSize : 9
};
document.writeln(tutorial["tutorial name"]);
</script>
</head>
<body>
</body>
</html>
Delete a property or method from an object
You can delete a property or method from an object using the delete keyword.
<!DOCTYPE HTML><!-- j a va 2 s.com-->
<html>
<body>
<script type="text/javascript">
var myData = {
name : "JavaScript",
weather : "Good",
};
myData.sayHello = function() {
document.writeln(this.name);
};
delete myData.name;
delete myData["weather"];
delete myData.sayHello;
</script>
</body>
</html>
Determine If an Object Has a Property
You can check to see if an object has a property using the in expression.
<!DOCTYPE HTML><!-- j a v a 2 s. c om-->
<html>
<body>
<script type="text/javascript">
var myData = {
name : "JavaScript",
weather : "Good",
};
var hasName = "name" in myData;
var hasDate = "date" in myData;
var hasWeather = "weather" in myData;
document.writeln("HasName: " + hasName);
document.writeln("HasDate: " + hasDate);
document.writeln("HasWeahter: " + hasWeather);
</script>
</body>
</html>
Enumerating an Object's Properties
The for...in loop performs the statement for each property.
<!DOCTYPE HTML><!-- j a v a 2 s.c o m-->
<html>
<body>
<script type="text/javascript">
var myData = {
name : "JavaScript",
weather : "Good",
printMessages : function() {
document.writeln("Hello " + this.name + ". ");
document.writeln(this.name +" is " + this.weather + ".");
}
};
myData.printMessages();
for ( var prop in myData) {
document.writeln("Name: " + prop + " Value: " + myData[prop]);
}
</script>
</body>
</html>
Object literals as parameter
Object literals can also be used to pass a large number of optional arguments to a function:
<!DOCTYPE html><!-- j a va 2 s . c o m-->
<html>
<head>
<script type="text/javascript">
function displayInfo(args) {
if (typeof args.name == "string"){
document.writeln("Name: " + args.name);
}
if (typeof args.pageSize == "number") {
document.writeln("PageSize: " + args.age);
}
document.writeln(output);
}
displayInfo({
name: "JavaScript",
pageSize: 9
});
displayInfo({
name: "HTML"
});
</script>
</head>
<body>
</body>
</html>
Next chapter...
What you will learn in the next chapter: