Accessing Object Properties with Variables in JavaScript

When dealing with objects in JavaScript, you may find yourself in a situation where you need to access an object’s properties using a variable. This can be useful in many situations, such as when you are working with a data set that is stored as an object, and you need to access the values of different properties in the object.

In this tutorial, we’ll look at how to access object properties with variables in JavaScript. We’ll cover different techniques for accessing object properties, including using the bracket notation, dot notation, and Object.keys() method.

Object Properties

Before we look at how to access object properties with variables, let’s take a look at how object properties work in JavaScript. An object in JavaScript is a collection of key-value pairs. Each key is a string, and each value can be of any data type, including strings, numbers, objects, and functions. Here’s an example of an object in JavaScript:

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

const person = {
  name: 'John Doe',
  age: 35,
  occupation: 'Software Developer'
};

[/dm_code_snippet]

In this example, we have an object called person that has three properties: name, age, and occupation. Each of these properties has a value associated with it.

Accessing Object Properties with Variables

Now that we’ve seen how objects work in JavaScript, let’s look at how we can access object properties with variables. There are three different ways to do this in JavaScript: bracket notation, dot notation, and the Object.keys() method.

Bracket Notation

The bracket notation is a way of accessing object properties with variables in JavaScript. Instead of using the name of the property directly, you can use a variable containing the name of the property. Here’s an example of how you can use the bracket notation to access the name property of the person object from the previous example:

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

const property = 'name';
console.log(person[property]); // 'John Doe'

[/dm_code_snippet]

In this example, we’ve created a variable called property that contains the string ‘name’. We can then use this variable in bracket notation to access the name property of the person object.

Dot Notation

The dot notation is another way of accessing object properties with variables in JavaScript. It’s similar to the bracket notation, but instead of using a variable in brackets, you use the variable name directly after the object name. Here’s an example of how you can use the dot notation to access the name property of the person object from the previous example:

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

const property = 'name';
console.log(person.property); // 'John Doe'

[/dm_code_snippet]

In this example, we’ve used the same variable as in the bracket notation example. However, instead of using the brackets, we’ve used the dot notation to access the name property of the person object.

Object.keys() Method

The Object.keys() method is a way of accessing object properties with variables in JavaScript. It returns an array of the object’s keys, which you can then use to access the object’s properties. Here’s an example of how you can use the Object.keys() method to access the name property of the person object from the previous example:

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

const property = 'name';
const keys = Object.keys(person);
console.log(person[keys[property]]); // 'John Doe'

[/dm_code_snippet]

In this example, we’ve created a variable called property that contains the string ‘name’. We then used the Object.keys() method to get an array of the person object’s keys. Finally, we used the keys array and the property variable to access the name property of the person object.

Conclusion

In this tutorial, we’ve looked at how to access object properties with variables in JavaScript. We’ve covered different techniques for accessing object properties, including using the bracket notation, dot notation, and Object.keys() method. With these techniques, you’ll be able to access object properties with variables in JavaScript with ease.