The Object Type
Object type can be used to store and transmit data.
There are two ways to create an instance of Object. The first is to use the new operator with the Object constructor:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript">
var tutorial = new Object();
tutorial.name = "JavaScript";
tutorial.pageSize = 9;
document.writeln(tutorial.name); //JavaScript
document.writeln(tutorial.pageSize); //9
</script>
</head>
<body>
</body>
</html>
The other way is to use object literal notation.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript">
var tutorial = {
name : "JavaScript",
pageSize : 9
};
document.writeln(tutorial.name); //JavaScript
document.writeln(tutorial.pageSize); //9
</script>
</head>
<body>
</body>
</html>
A comma separates properties in an object literal. There is no need to add comma for the last property.
Property names can also be specified as strings or numbers:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript">
var tutorial= {
"name" : "JavaScript",
"pageSize" : 9,
1: true
};
document.writeln(tutorial.name); //JavaScript
document.writeln(tutorial.pageSize); //9
document.writeln(tutorial["1"]); //
</script>
</head>
<body>
</body>
</html>
Using Functions as Methods
You can add functions to an object.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
var myData = {
name : "JavaScript",
weather : "Good",
printMessages : function() {
document.writeln("Hello " + this.name + ". ");
document.writeln("Today is " + this.weather + ".");
}
};
myData.printMessages();
</script>
</body>
</html>
A numeric property names are automatically converted to strings.
Create an object with only the default properties and methods using object literal notation.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript">
var tutorial = {}; //same as new Object()
tutorial.name = "JavaScript";
tutorial.pageSize = 9;
document.writeln(tutorial.name); //JavaScript
document.writeln(tutorial.pageSize); //9
</script>
</head>
<body>
</body>
</html>
Object literals can also be used to pass a large number of optional arguments to a function:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<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>
Access properties via bracket notation
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<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>
Use variables for property access:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript">
var tutorial = {
name : "JavaScript",
pageSize : 9
};
var propertyName = "name";
document.writeln(tutorial[propertyName]); //"JavaScript"
</script>
</head>
<body>
</body>
</html>
Use bracket notation when the property name contains space:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript">
var tutorial = {
"tutorial name" : "JavaScript",
pageSize : 9
};
document.writeln(tutorial["tutorial name"]);
</script>
</head>
<body>
</body>
</html>