This guide will discuss the specified methods for accessing the JavaScript object properties. Moreover, we will also demonstrate the syntax, usage, and examples related to Dot property accessor, Square property accessor, and the Object destructuring methods. So, let’s start!
Dot property accessor for JavaScript properties
The first and the most common method of accessing JavaScript properties of an object is to use the dot property accessor. This method is only utilized for accessing the valid identifiers of the declared object.
Syntax of the dot property accessor is given below:
Here, you can add the “objectName” and “propertyName” of the created object you want to access.
Example: Using Dot property for accessing JavaScript properties
We will create an “employee” object and define its “name” property.
name: 'John'
};
After doing so, you can access the added property by writing out the following code in the console window:
In the above-given code, the dot property accessor will access the “name” property of the “employee” JavaScript object:
Accessing valid and invalid identifiers for JavaScript properties
When you specify the property name as a valid identifier, the dot property accessor functions correctly. In JavaScript, a valid identifier comprises digits (0-9), special characters ($, _), and Unicode letters. However, sometimes the added properties are not valid identifiers.
For instance, in the below-given code, the “name-1” and “5” are the invalid identifiers, so the dot property accessor will not operate perform its functionality in the given code:
'name-1': 'john',
'5': 'five'
};
employee.name-1;
employee.5;
Here, both of the “employee” object properties are invalid identifiers as the “name-1” contain “-” and the other property starts which a number “5,” which is an indication for the invalid identifier:
JavaScript also offers solutions for every encountered problem, including the usage of invalid identifiers. If you have added the properties for your object having unique names, then you can utilize the square property accessor for accessing those properties.
Square property accessor for JavaScript properties
Square property accessor is used to access the object properties you can not access with the dot property accessor. It is mainly used for accessing the invalid identifier and properties of the array object.
Check out the syntax of the square property accessor for accessing the JavaScript object properties:
Here, you have to specify the “objectName” and its related property in the “propertyName” which you want to access.
Example: Using Square brackets for accessing JavaScript properties
Now, we will access the “name-1” and “5” invalid identifiers with the help of the Square brackets accessors:
'name-1': 'john',
'5': 'five'
};
console.log(employee['name-1']);
console.log(employee[5]);
The below-given output declares that we have successfully accessed the “name-1” and “5” JavaScript properties of our “employee” object:
Object destructuring method of accessing JavaScript Properties
In the Object destructuring method, the destructuring assignment permits you to assign properties related to the object’s variables and arrays. To access the JavaScript object properties using the object destructuring, you have to follow the following syntax:
Here, enclose the “propertyName” in the “{}” curly braces and then add the “objectName” for the assignment purpose.
Example: Using Object destructuring method for accessing JavaScript properties
To teach you the usage of the object destructing method, firstly, we will create an “employee” object having a “name” property. After doing so, we will add the destructuring object line, which is “const { name } = employee;”. This destructuration will define a variable “name” having the value of employee object property:
name: 'john'
};
const { name } = employee;
console.log(name);
The below-given output declares that we have successfully accessed the “name” property of our “employee” JavaScript object with the help of the object destructuring method:
Conclusion
Dot property accessor, Square brackets accessor, and Object destructing are the methods of accessing JavaScript properties. The Dot property accessor is used to access the valid JavaScript identifier of an object. Whereas the Square brackets accessor is utilized for accessing the invalid identifier or dynamic property name. Also, the Object destructing method can assist you in accessing object properties. We have demonstrated Dot property accessor, Square property accessor, and Object destructuring methods of accessing JavaScript properties with examples in this article.
