Skip to main content

How to Get an Object's Value Using a Variable or Dynamic Key in JavaScript

In JavaScript, there are two ways to access the properties of an object: dot notation (obj.key) and bracket notation (obj['key']). While dot notation is often more concise, bracket notation is far more powerful and flexible. It is the definitive solution for accessing properties when the key is dynamic—stored in a variable, contains special characters, or is the result of an expression.

This guide will explain the crucial difference between these two notations and show you how to use bracket notation to handle any dynamic key.

The Core Concept: Dot Notation vs. Bracket Notation​

Understanding the difference between these two syntaxes is key to working with objects effectively.

  • Dot Notation (obj.key):

    • Static: The key is a literal, fixed identifier. It cannot be a variable.
    • Limited: It only works for valid JavaScript identifiers (no spaces, hyphens, or starting with a number).

  • Bracket Notation (obj['key']):

    • Dynamic: The value inside the brackets is an expression that is evaluated. It can be a string literal, a variable, or any other expression that results in a string.
    • Flexible: It can handle any string as a key, including those with spaces, hyphens, or special characters.

Use Case 1: Accessing a Property Using a Variable​

This is the most common use case for bracket notation. You have the name of the key you want to access stored in a variable.

For example, we have a variable myKey and want to use its value to look up a property on an object.

const user = {
  name: 'Alice',
  id: 123,
};

const myKey = 'name';

// ⛔️ This will NOT work.
console.log(user.myKey); // Output: undefined
note

This fails because dot notation looks for a property literally named "myKey", which doesn't exist on the user object.

The recommended solution is with Bracket Notation. Bracket Notation evaluates the myKey variable, gets its value ("name"), and then uses that to access the property.

const user = {
  name: 'Alice',
  id: 123,
};
const myKey = 'name';

// ✅ This works correctly.
console.log(user[myKey]); // Output: "Alice"

Use Case 2: Accessing a Property with Spaces or Hyphens​

Dot notation cannot be used for property keys that are not valid JavaScript identifiers. This includes keys with spaces, hyphens, or other special characters.

This example fails because the JavaScript parser sees the hyphen as a subtraction operator.

const report = {
  'report-title': 'Q4 Sales',
  'generated by': 'Admin',
};

// ⛔️ This will cause a SyntaxError.
console.log(report.report-title);

The recommended solution is with Bracket Notation: bracket notation is the only way to access these types of keys.

const report = {
  'report-title': 'Q4 Sales',
  'generated by': 'Admin',
};

// ✅ This is the correct and only way.
console.log(report['report-title']); // Output: "Q4 Sales"
console.log(report['generated by']); // Output: "Admin"

Setting Properties with Dynamic Keys​

The same principles apply when you want to set a property on an object using a dynamic key. Bracket notation is the tool for the job.

const user = {};
const keyName = 'username';
const keyValue = 'alice123';

// Use bracket notation to set a dynamic key
user[keyName] = keyValue;

console.log(user); // Output: { username: 'alice123' }

Conclusion​

Understanding the difference between dot and bracket notation is fundamental to working with JavaScript objects.

  • Use dot notation (obj.key) for simple, static access to properties with valid identifier names. It's concise and readable.
  • Use bracket notation (obj[key]) for all other cases. It is the definitive solution when:
    • The key is stored in a variable.
    • The key contains spaces, hyphens, or other special characters.
    • The key is the result of an expression.

By mastering bracket notation, you gain the full power and flexibility to handle any dynamic object property.

Table of Contents