Article Categories

Selected Reading

How to use a variable for a key in a JavaScript object literal?

Javascript Web Development Front End Technology

In JavaScript, you can use variables as object keys using bracket notation or computed property names. This is useful when working with dynamic data, API responses, or when key names are determined at runtime.

Using Bracket Notation (After Object Creation)

The most common approach is to create the object first, then add properties using bracket notation:

<html>
<body>
   <h2>Using variables as key of JavaScript object</h2>
   <div id="content"></div>
   <script>
      let content = document.getElementById("content");
      
      let object = {
         "table_id": 1,
         "table_name": "table1",
         "table_price": 100
      };
      
      let dimensions = "100 x 100";
      let key = "dimensions";
      
      // Add property using variable as key
      object[key] = dimensions;
      
      for (let prop in object) {
         content.innerHTML += prop + " : " + object[prop] + "<br>";
      }
   </script>
</body>
</html>

Using Computed Property Names (ES6)

ES6 introduced computed property names, allowing you to use variables as keys directly in object literals:

<html>
<body>
   <h2>Computed Property Names Example</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      
      let dynamicKey = "color";
      let value = "blue";
      
      // Using computed property names
      let car = {
         brand: "Toyota",
         model: "Camry",
         [dynamicKey]: value,  // Variable as key
         ["year"]: 2023        // Expression as key
      };
      
      output.innerHTML = "Car object: " + JSON.stringify(car, null, 2);
   </script>
</body>
</html>

Dynamic Key Generation Example

Here's an example that generates keys dynamically using a loop:

<html>
<body>
   <h2>Dynamic Key Generation</h2>
   <div id="results"></div>
   <script>
      let results = document.getElementById("results");
      let squares = {};
      
      // Generate keys dynamically
      for (let i = 1; i <= 5; i++) {
         let key = "number_" + i;
         squares[key] = i * i;
      }
      
      results.innerHTML = "Squares object: " + JSON.stringify(squares, null, 2) + "<br><br>";
      
      // Access values using bracket notation
      for (let key in squares) {
         results.innerHTML += key + " = " + squares[key] + "<br>";
      }
   </script>
</body>
</html>

Comparison of Methods

Method	Timing	Browser Support	Use Case
Bracket notation	After creation	All browsers	Adding properties dynamically
Computed properties	During creation	ES6+ (modern browsers)	Object literal with dynamic keys

Key Points

Variables store the actual key name as a string
Bracket notation works with any expression that evaluates to a string
Computed property names require square brackets around the variable in object literals
Both methods are useful for different scenarios - choose based on your needs

Conclusion

Using variables as object keys provides flexibility for dynamic programming. Use bracket notation for post-creation additions or computed property names for modern JavaScript environments during object creation.

Shubham Vora

Updated on: 2026-03-15T23:19:01+05:30

12K+ Views

Previous Next