Accessing Object Properties with Dot Notation in JavaScript

Objects in JavaScript are collections of properties, and each property is composed of a key-value pair. Each key is a string, and the associated value may be of any data type, including objects. You can access the properties of an object in JavaScript using dot notation. Dot notation is a way to access a property of an object by providing the object name and the property name in a string, separated by a period.

Understanding Dot Notation

Dot notation is a way to access a property of an object. To do this, you simply type the name of the object, followed by a period (.), followed by the name of the property you want to access. The syntax looks like this:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

objectName.propertyName

[/dm_code_snippet]

For example, if you had an object called car, and it had a property called make, you could access the value of the make property with the following dot notation:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

car.make

[/dm_code_snippet]

You can also access properties of objects that are stored in variables. For example, if you had a variable called myCar that stored a car object, you could access the make property of the car object using the following notation:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

myCar.make

[/dm_code_snippet]

Nested Properties

Dot notation can also be used to access properties of objects that are nested inside other objects. For example, if you had an object called car that had a property called wheels, and the wheels property was an object with a property called color, you could access the color property of the wheels object with the following notation:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

car.wheels.color

[/dm_code_snippet]

Dot Notation vs Bracket Notation

Dot notation is not the only way to access object properties in JavaScript. Bracket notation is another way to access object properties. Bracket notation is similar to dot notation, except that you use square brackets ([]), instead of a period, to access a property. The syntax looks like this:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

objectName["propertyName"]

[/dm_code_snippet]

For example, if you had an object called car, and it had a property called make, you could access the value of the make property with the following bracket notation:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

car["make"]

[/dm_code_snippet]

The main difference between dot notation and bracket notation is that bracket notation allows you to access properties with names that contain characters that are not allowed in dot notation, such as spaces or hyphens. Bracket notation can also be used to access properties that are stored in variables.

Summary

Dot notation is a way to access object properties in JavaScript. It is a simple syntax that consists of the object name, followed by a period, followed by the property name. Nested properties can be accessed by chaining property names together with dot notation. Dot notation is not the only way to access object properties in JavaScript; bracket notation is another option. Bracket notation allows you to access properties with names that contain characters that are not allowed in dot notation, and it can also be used to access properties that are stored in variables.