Accessing Object Properties with Bracket Notation in JavaScript

Objects in JavaScript are containers for named values known as properties or methods. To access an object’s properties or methods, you can use the dot notation or bracket notation. Bracket notation is used when the property or method name is not known until runtime or when the property or method name contains special characters such as spaces.

Syntax

The syntax for using bracket notation is as follows:

[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 person with a property called name, you would access it 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”]

person['name']

[/dm_code_snippet]

Note that the property name is always enclosed in quotes. This is necessary because object properties are always strings.

Example

Let’s look at an example of how to use bracket notation. We’ll start by creating an object called person with a few properties:

[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”]

var person = {
  'firstName': 'John',
  'lastName': 'Doe',
  'age': 30
};

[/dm_code_snippet]

Now we can access these properties using 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”]

console.log(person['firstName']); // 'John'
console.log(person['lastName']); // 'Doe'
console.log(person['age']); // 30

[/dm_code_snippet]

As you can see, we can access the properties of an object using bracket notation just like we would with dot notation.

Dynamic Property Names

One of the advantages of using bracket notation is that you can use variables to access object properties. This is useful when the property name is not known until runtime. For example, if we have a variable called propertyName that holds the name of the property we want to access, we can do 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”]

var propertyName = 'firstName';
console.log(person[propertyName]); // 'John'

[/dm_code_snippet]

This is a powerful feature that allows us to write more dynamic code.

Special Characters

Bracket notation also allows us to access properties with special characters, such as spaces, in their name. For example, if we had a property called ‘favorite color’, we could access it 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”]

console.log(person['favorite color']); // 'blue'

[/dm_code_snippet]

Conclusion

In this tutorial, we learned how to access object properties with bracket notation in JavaScript. Bracket notation is useful when the property name is not known until runtime or when the property name contains special characters such as spaces. It also allows us to write more dynamic code.