JavaScript

Methods of accessing JavaScript Properties

In JavaScript, an object can be defined as a collection of unordered properties associated with it. It also offers three different methods for accessing the Object properties, all of which are useful and can be used in combination. The methods we are talking about are Dot property accessor, Square property accessor, and Object destructuring.

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:

objectName.propertyName

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.

const employee = {

name: 'John'

};

After doing so, you can access the added property by writing out the following code in the console window:

employee.name;

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:

const employee = {

'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:

objectName[propertyName]

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:

const employee = {

'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:

{ propertyName } = objectName

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:

const employee = {

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.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.