JavaScript Object Properties
An object property in JavaScript is a key: value pair, where key is a
string and value can be anything. The key in key: value pair is also called
property name. So the properties are association between key (or name)
and value.
An object is in other terms a collection of properties (key: value pairs).
However, key: value pairs are not stored in the specific order in the object.
To write an object syntax, the curly braces are used. Each key: value pair
is written within curly braces separated by a comma.
You can manipulate the object properties in JavaScript. For example, you
can add, delete, or update the object's properties.
Syntax
You can follow the syntax below to define properties in the object.
const fruit = {
name: "Apple",
price: 100,
In the above syntax, fruit is an object. The fruit object contains the name
and price properties. The value of the name property is 'Apple, and the
price is 100.
In an object, the key can either be a string or a symbol only. If you use
another data type as a key, the object implicitly converts it into the string.
The property value can be anything like an object, set, array, string, set,
function, etc.
Accessing Object Properties
There are 3 ways to access object properties in JavaScript.
Using the dot notation
Using the square bracket notation
Using the expression
The Dot Notation
You can access the object property using the dot notation/ syntax.
obj.prop;
In the above syntax, 'obj' is an object, and 'prop' is its property whose
value you need to access.
Example
The 'fruit' object in the example below contains the name and price
property. We access the object properties using the dot notation, and you
can see property values in the output.
<!DOCTYPE html>
<html>
<body>
<p id = "output"> </p>
<script>
const fruit = {
name: "Banana",
price: 20,
document.getElementById("output").innerHTML =
"The price of the " + fruit.name + " is " + fruit.price;
</script>
</body>
</html>
Output
The price of the Banana is 20
The Square Bracket Notation
You can use the square bracket pair containing the property as a string
followed by the object name to access a particular property.
obj["prop"]
In the above syntax, we access the 'prop' property from the object.
You can't access the property using the dot notation when you use invalid
identifiers as an object key. So, you need to use the square bracket
notation. The identifier is invalid if it starts from a number, contains a
space, or a hyphen.
Example
In the example below, we access the fruit object's name and price
property values.
<!DOCTYPE html>
<html>
<body>
<p id = "output"> </p>
<script>
const fruit = {
name: "Banana",
price: 20,
document.getElementById("output").innerHTML =
"The price of the " + fruit["name"] + " is " + fruit["price"];
</script>
</body>
</html>
Output
The price of the Banana is 20
Using the expression inside the bracket
Sometimes, you require to access the object properties dynamically using
the variable or expression. So, you can write the expression inside the
square bracket notation. The expression can be a variable, a
mathematical expression, etc.
obj[expression]
The above syntax evaluates the expression first and accesses the
property same as a resultant value from the object. You don't need to
write the expression in quotes.
Example
In the example below, the num object contains the number as a key in the
string format and its word representation as a value.
We use the variable x to access the property value from the object. Also,
we used the "x + 10" mathematical expression to access the object
property dynamically.
<!DOCTYPE html>
<html>
<body>
<p id = "output"> </p>
<script>
const num = {
10: "ten",
20: "Twenty",
const x = 10;
document.getElementById("output").innerHTML =
num[x + 10];
</script>
</body>
</html>
Output
Twenty
Accessing the Nested Object Properties
Accessing the nested object properties is very similar to accessing the
object properties. You can either use the dot or square bracket notation.
Syntax
Obj.prop.nestedProp
// OR
Obj["prop"]["nestedProp"];
In the above syntax, the prop is a property of the obj object, and
nestedProp is a property of the 'prop' object.
Example
In the below code, the 'cars' object contains the nested objects named OD
and BMW. We access the nested object properties using the dot and
square bracket notation.
<!DOCTYPE html>
<html>
<body>
<p id = "output1"> </p>
<p id = "output2"> </p>
<script>
const cars = {
totalBrands: 50,
audi: {
model: "Q7",
price: 10000000,
},
bmw: {
model: "S20D",
price: 8000000,
document.getElementById("output1").innerHTML =
"The model of Audi is " + cars.audi.model +
" and its price is " + cars.audi.price;
document.getElementById("output2").innerHTML =
"The model of BMW is " + cars["bmw"]["model"] +
" and its price is " + cars["bmw"]["price"];
</script>
</body>
</html>
Output
The model of Audi is Q7 and its price is 10000000
The model of BMW is S20D and its price is 8000000
Adding or Updating the Object Properties
You can update or add new properties to the object using the dot or
square bracket notation. You can access the object property and assign a
new value to it. If the property already exists, it updates the property
value. Otherwise, it adds the property to the object.
Syntax
Obj.prop = new_value;
OR
Obj["prop"] = new_value;
In the above syntax, we update the value of the 'prop' property of the obj
object.
Example
In the example below, we update the name and price property of the fruit
object. Also, we add the expiry property to the fruit object.
<!DOCTYPE html>
<html>
<body>
<p id = "output"> </p>
<script>
const fruit = {
name: "Watermealon",
price: 150,
fruit.name = "Apple"; // Updating using the dot
notation
fruit["price"] = 200; // Updating using the bracket
notation
fruit.expiry = "5 days"; // Adding new property to the
object.
document.getElementById("output").innerHTML +=
"The price of " + fruit.name +
" is " + fruit.price +
" and it expires in " + fruit.expiry;
</script>
</body>
</html>
Output
The price of Apple is 200 and it expires in 5 days
Deleting the Object Properties
You can use the 'delete' operator to delete the specific object properties.
Syntax
delete obj.prop;
In the above syntax, obj.prop is an operator for the delete operator.
Example
In the example below, we delete the name property from the fruit object
using the delete operator. The output shows that the fruit object contains
only the price property after deleting the name property.
<!DOCTYPE html>
<html>
<body>
<p> The object after deleting the "name" property: </p>
<p id = "output"> </p>
<script>
const fruit = {
name: "Watermealon",
price: 150,
delete fruit.name;
document.getElementById("output").innerHTML =
JSON.stringify(fruit);
</script>
</body>
</html>
Output
The object after deleting the "name" property:
{"price":150}
Enumerating the Object Properties
There are various approaches to enumerating the object properties. The
Object.keys() method returns the object's keys in the array. However, we
will use the forin loop to traverse through each property of the object.
Syntax
You can follow the syntax below to iterate through the object properties.
for (let key in table) {
// Use the key to access its value
In the above syntax, 'key' is an object property, which can be used to
access its value.
Example
In the example below, we have created the table object containing 3
properties. After that, we used the forin loop to traverse through each
property of the object and access its value.
<!DOCTYPE html>
<html>
<body>
<p> Iterating the obejct properties</p>
<p id = "output"> </p>
<script>
const table = {
color: "brown",
shape: "round",
price: 10000,
for (let key in table) {
document.getElementById("output").innerHTML += key
+ ": " + table[key] + "<br>";
</script>
</body>
</html>
Output
Iterating the obejct properties
color: brown
shape: round
price: 10000
Property Attributes
The object property contains four attributes.
value − A value of the object.
enumerable − Contains boolean value representing whether the
object is iterable.
configurable − Contains the boolean value representing whether
the object is configurable.
writable − It also contains the boolean value, representing whether
the object is writable.
By default, you can't edit other attributes except the value attribute of the
object property. You need to use the defineProperty() or defineProperties()
methods to update other attributes.
