How to access an object value using variable key in JavaScript?

Javascript Web Development Front End Technology

In this article we are going to discuss how to access an object value using variable key in JavaScript.

An object value can be accessed by a Dot Notation and a Bracket Notation. To get the object value through a variable key, the value or expression inside the bracket notation must match with the existing key name, then it returns a value. The bracket notation, unlike the dot notation can be used with variables. If we are using a variable with bracket notation, the variable must reference a string.

Let’s understand this concept better with the help of examples further in this article.

Example 1

The following is an example program that accesses an object value using the Bracket Notation ‘[]’ and Dot Notation ‘.’.

<!DOCTYPE html>
<html>
<head>
   <title>To access an object value using variable key</title>
</head>
<body style="text-align : center">
   <h3>Access an object value using variable key.</h3>
   <p id="key-value"></p>
   <script>
      let student = { name : 'Rakesh',
         roll_no : 48,
         course : 'Computer Science'
      };
      document.getElementById("key-value").innerHTML = 'The value for student["name"] is : '+student["name"]+'<br/>'+'The value for student.roll_no is : '+student.roll_no+'<br/>'+'The value for student["course"] is : '+student['course'];
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 2

The below is an example program to access an object value using new variable key name by copying the existing key name to new variable key name.

<!DOCTYPE html>
<html>
<head>
   <title>To access an object value using variable key</title>
</head>
<body style="text-align : center">
   <h3>Access an object value using variable key.</h3>
   <p id="key-value"></p>
   <script>
      let student = { name : 'Rakesh',
         roll_no : 48,
         course : 'Computer Science'
      };
      let Name = 'name';
      let Roll_No = 'roll_no';
      let Course = 'course';
      document.getElementById("key-value").innerHTML = 'The value for student[Name] is : '+student[Name] +'<br/>'+'The value for student[Roll_No] is : '+student[Roll_No]+'<br/>'+"The value for student[Course] is : "+student[Course];
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 3

The below is an example program to access an object value using dot notation. We can write an expression inside the dot notation. The expression inside the dot notation gets computed before the value gets accessed. When the computed expression value matches the original key name, then it returns a value.

<!DOCTYPE html>
<html>
<head>
   <title>To access an object value using variable key</title>
</head>
<body style="text-align : center">
   <h3>Access an object value using variable key.</h3>
   <p id="key-value"></p>
   <script>
      let student = { name : 'Rakesh',
         roll_no : 48
      };
      let Name = 'na';
      let Roll_No = 'roll_';
      let Course = 'course';
      student[Course] = 'IT';
      document.getElementById("key-value").innerHTML = 'The value for student[Name+"me"] is : '+student[Name+'me'] +'<br/>'+'The value for student[Roll_No+"no"] is : '+student[Roll_No+'no']+'<br/>'+"The value for student[Course] is : "+student[Course];
   </script>
</body>
</html>

On executing the above code, the following output is generated.