How to Use a Variable as a Key in JavaScript

By Dot Notation Method

In JavaScript, you can use a variable as a key by using the bracket notation where the variable name is enclosed within square brackets. This method allows dynamic property access on an object.

var key = 'username';
var obj = {};
obj[key] = 'JohnDoe';

How it works

Bracket notation in JavaScript can take in a variable that resolves to a string, to dynamically assign and access the properties of an object.

• The key variable is assigned the string value ‘username’.
• An empty object obj is created.
• The property username is added to the object obj by referencing the variable key inside the brackets. This is written as obj[key]. Since the key variable holds the string ‘username’, it’s equivalent to writing obj['username'].
• The property username is then assigned the value ‘JohnDoe’. So, the object obj now has one property: username with its value being ‘JohnDoe’.

By Bracket Notation Method

Bracket notation in JavaScript allows you to use a variable as a key in an object. The variable, when used in bracket notation, is evaluated to its associated value, which then becomes the key used to access the value in the object.

var customer = {};
var key = "firstName";

customer[key] = "John";

console.log(customer.firstName); // Outputs: John

How it works

In the provided example, a variable is used as an object’s key to assign and retrieve a value. The JavaScript engine evaluates the variable to its actual value, using this as the key in the object.

• We first declare a variable customer and initialize it as an empty object.
• Next, we declare another variable key and assign the string "firstName" to it.
• Using the bracket notation, we assign the value "John" to the property in customer object. Here, the variable key is evaluated to its value "firstName" which becomes the key in the customer object.
• Finally, we log the value of the firstName property of the customer object to the console. Since we have assigned the value "John" to this property, it logs "John".

Using ES6 Computed Property Names

In ES6, JavaScript introduced computed property names that allow you to dynamically create object keys using variables. This lets you create more dynamic and flexible data structures. Here’s an example:

let variable = "key";
let obj = { [variable]: "value" };

How it works

When creating an object in JavaScript, you typically define a set of key-value pairs. However, with ES6 computed property names, you can use a variable wrapped in square brackets ([variable]) instead of a static text key. The JavaScript engine will evaluate the variable, convert it to a string (if it’s not already one), and use that as the key in the object.

Let’s break it down:

• First, we define a variable with the string “key”.
• Next, we create an object where instead of using a hard-coded string as the key, we put the variable inside square brackets. This is the syntax for computed property names.
• When the object is created, JavaScript evaluates the expression inside the square brackets (in this case, it’s just our variable). It converts the result of that expression to a string and uses it as the key in our object.
• Finally, we have an object with one property, “key”, which was dynamically set using our variable. The value of this property is “value”.