Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to access an object value using variable key in JavaScript?
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.
Syntax
// Dot notation (fixed property name) object.propertyName // Bracket notation (dynamic property access) object['propertyName'] object[variableName]
Example 1: Basic Object Access
The following example demonstrates accessing object values using both 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>
The value for student["name"] is: Rakesh The value for student.roll_no is: 48 The value for student["course"] is: Computer Science
Example 2: Using Variable Keys
The below example shows how to access object values using variable keys by storing the property names in variables.
<!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 nameKey = 'name';
let rollKey = 'roll_no';
let courseKey = 'course';
document.getElementById("key-value").innerHTML =
'The value for student[nameKey] is: ' + student[nameKey] + '<br/>' +
'The value for student[rollKey] is: ' + student[rollKey] + '<br/>' +
'The value for student[courseKey] is: ' + student[courseKey];
</script>
</body>
</html>
The value for student[nameKey] is: Rakesh The value for student[rollKey] is: 48 The value for student[courseKey] is: Computer Science
Example 3: Dynamic Key Construction
The below example demonstrates accessing object values using computed expressions inside bracket notation. The expression gets evaluated before property access.
<!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 namePart = 'na';
let rollPart = 'roll_';
let courseKey = 'course';
// Add new property dynamically
student[courseKey] = 'IT';
document.getElementById("key-value").innerHTML =
'The value for student[namePart + "me"] is: ' + student[namePart + 'me'] + '<br/>' +
'The value for student[rollPart + "no"] is: ' + student[rollPart + 'no'] + '<br/>' +
'The value for student[courseKey] is: ' + student[courseKey];
</script>
</body>
</html>
The value for student[namePart + "me"] is: Rakesh The value for student[rollPart + "no"] is: 48 The value for student[courseKey] is: IT
Key Points
- Use dot notation for known, fixed property names
- Use bracket notation for dynamic property access with variables
- Variables in bracket notation must contain string values matching property names
- Expressions inside brackets are evaluated before property access
- Bracket notation allows adding new properties dynamically
Conclusion
Bracket notation with variable keys provides flexible object property access in JavaScript. This technique is essential for dynamic programming scenarios where property names are determined at runtime.
14K+ Views
