JavaScript computed properties let you create object property names dynamically by using an expression inside square brackets. Instead of writing a property name directly, you can calculate it at runtime from a variable, a function result, a string expression, or even a Symbol. This feature is especially useful when building objects from form fields, API data, configuration options, and reusable functions.

What Are Computed Properties in JavaScript?

A computed property is an object property whose key is evaluated from an expression. You write the expression inside square brackets in an object literal. JavaScript evaluates that expression and uses the resulting string or Symbol as the property key.

The syntax was introduced in ECMAScript 2015 (ES6), making it easier to create objects with dynamic property names.

Basic Syntax of Computed Properties

const propertyName = "name";

const user = {
  [propertyName]: "Ava"
};

console.log(user.name); // "Ava"

In this example, propertyName contains the string "name". JavaScript evaluates [propertyName] and creates an object property named name. The resulting object is equivalent to { name: "Ava" }.

Using Variables as Computed Property Names

The most common use of computed properties is to use a variable as an object key. This is useful when the property name is not known until the program runs.

const key = "email";

const person = {
  name: "Rahim",
  [key]: "rahim@example.com"
};

console.log(person.name);  // "Rahim"
console.log(person.email); // "rahim@example.com"

Notice the difference between key: "email" and [key]: "rahim@example.com". Without square brackets, key would be the literal property name. With square brackets, JavaScript evaluates the variable and uses its value as the property name.

Using Expressions in Computed Properties

You are not limited to a variable. Any expression that produces a valid property key can be used inside the brackets. For example, you can combine strings to build a property name.

const prefix = "user";

const profile = {
  [prefix + "Name"]: "Nadia",
  [prefix + "Age"]: 25
};

console.log(profile.userName); // "Nadia"
console.log(profile.userAge);  // 25

You can also call a function to calculate a key:

function createKey(section, field) {
  return section + "_" + field;
}

const settings = {
  [createKey("user", "theme")]: "dark",
  [createKey("app", "language")]: "en"
};

console.log(settings.user_theme);   // "dark"
console.log(settings.app_language); // "en"

Computed Method Names in Objects

Computed properties can also define method names. This allows an object to receive a method whose name is decided dynamically.

const methodName = "greet";

const user = {
  name: "Ava",

  [methodName]() {
    return "Hello, " + this.name;
  }
};

console.log(user.greet()); // "Hello, Ava"

The expression [methodName] evaluates to "greet", so the object gets a method named greet. The method can use this to access other properties of the same object.

Computed Property Names with Getters

You can use computed names with getters and setters too. A getter runs when you read a property, while a setter runs when you assign a value to it.

const propertyName = "fullName";

const user = {
  firstName: "Nadia",
  lastName: "Islam",

  get [propertyName]() {
    return this.firstName + " " + this.lastName;
  }
};

console.log(user.fullName); // "Nadia Islam"

Using Symbols as Computed Property Keys

A computed property can use a Symbol as its key. Symbols are unique primitive values and are useful when you need a property key that will not accidentally collide with ordinary string keys.

const userId = Symbol("userId");

const user = {
  name: "Rahim",
  [userId]: 101
};

console.log(user.name);     // "Rahim"
console.log(user[userId]);  // 101

console.log(Object.keys(user)); // ["name"]
console.log(Object.getOwnPropertySymbols(user)); // [Symbol(userId)]

Methods such as Object.keys() return enumerable string-keyed property names, so they do not include Symbol keys. Use Object.getOwnPropertySymbols() or Reflect.ownKeys() when you also need to inspect Symbol-keyed properties.

Computed Properties in Destructuring

Square brackets are also useful in object destructuring when the property you want to read is stored in a variable. The syntax looks similar, but here it selects an existing property rather than creating a new one.

const propertyName = "email";

const user = {
  name: "Ava",
  email: "ava@example.com"
};

const { [propertyName]: userEmail } = user;

console.log(userEmail); // "ava@example.com"

The expression inside the brackets evaluates to "email". The value of that property is then assigned to the local variable userEmail.

Practical Example: Creating an Object from Form Data

Imagine that a form provides a field name and its value. You can use computed properties to build an object without hardcoding every possible field name.

function createFieldObject(fieldName, fieldValue) {
  return {
    [fieldName]: fieldValue
  };
}

const nameField = createFieldObject("name", "Nadia");
const cityField = createFieldObject("city", "Dhaka");

console.log(nameField); // { name: "Nadia" }
console.log(cityField); // { city: "Dhaka" }

This pattern is helpful for creating API payloads, updating selected settings, mapping form values, and generating configuration objects. Always validate external field names before using them in application logic, especially when they come from untrusted input.

Computed Properties vs. Bracket Notation

Computed property syntax is used inside an object literal to create a property with a dynamically evaluated name. Bracket notation is used to access or update a property on an object after the object exists.

const key = "age";

// Computed property: creates the property
const person = {
  [key]: 25
};

// Bracket notation: reads or updates the property
console.log(person[key]); // 25

person[key] = 26;

console.log(person.age); // 26

Both forms use square brackets, but their purpose is different: computed property names define keys during object creation, while bracket notation reads or changes properties on an existing object.

Categorized in:

Javascript, JS Basic,