Properties
- addition: It can add new objects by simply giving values to those new objects.
- deletion: It uses delete keyword, to delete a property from an object.
Example 1: Shows adding a new property to the existing object.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Object Properties
</title>
</head>
<body>
<h1>Geeks</h1>
<h3>JavaScript Object Properties</h3>
<p id="gfg"></p>
<!-- Script to add object property -->
<script>
var employee = {
name:"Steve",
id:"123"
};
employee.age="25";
document.getElementById("gfg").innerHTML = employee.name
+ " age " + employee.age + " years, and has unique id "
+ employee.id +".";
</script>
</body>
</html>
Output:
Example 2: Shows deleting a property from the existing object.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Object Properties
</title>
</head>
<body>
<h1>Geeks</h1>
<h3>JavaScript Object Properties</h3>
<p id="gfg"></p>
<!-- Script to delete object content -->
<script>
var employee = {
name:"Steve",
id:"123"
};
/* Delete employee id */
delete employee.id;
document.getElementById("gfg").innerHTML = employee.name
+ " has unique id " + employee.id +"." ;
</script>
</body>
</html>
Output:
There are different ways to accessing the object properties. Following examples demonstrate the different accessing techniques:
Example: This example uses .property to access object element.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Object Properties
</title>
</head>
<body>
<h1>Geeks</h1>
<h3>JavaScript Object Properties</h3>
<p>Using .property to access an object</p>
<p id="gfg"></p>
<script>
var employee = {
name:"Steve",
id:"123"
};
document.getElementById("gfg").innerHTML = employee.name
+ " has unique id " + employee.id ;
</script>
</body>
</html>
Example: This example uses [“property”] to access the object element.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Object Properties
</title>
</head>
<body>
<h1>w3wiki</h1>
<h3>JavaScript Object Properties</h3>
<p>Using ["property"] to access an object</p>
<p id="gfg"></p>
<!-- Script to access an object -->
<script>
var employee = {
name:"Steve",
id:"123"
};
document.getElementById("gfg").innerHTML = employee["name"]
+ " has unique id " + employee["id"] ;
</script>
</body>
</html>
Example: This example uses for…in loop to access the object element.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Object Properties
</title>
</head>
<body>
<h1>w3wiki</h1>
<h3>JavaScript Object Properties</h3>
<p>Using for...in loop</p>
<p id="GFG"></p>
<!-- Script to use loop to access object content -->
<script>
var gfg = "";
var employee = {
name:"Steve",
id:"123"
};
var z;
for (z in employee) {
gfg += employee[z] + " ";
}
document.getElementById("GFG").innerHTML = gfg;
</script>
</body>
</html>
JavaScript Object Properties
Object properties in JavaScript are straightforward associations between a name and a value. Each property has a name and a value, where the value represents the data linked to the property. This data can be accessed based on the property’s access level.
Properties collectively refer to the values associated with a JavaScript object. They’re not necessarily ordered in any particular sequence. JavaScript allows you to add, delete, and modify properties. Properties are represented by name-value pairs.
Syntax:
objectName.propertyobjectName["property"]objectName[expression]