ReviseAlgo Logo

Objects & Prototypes

Computed Properties & Property Shorthand

Master ES6 object syntax enhancements. Learn how to write computed properties dynamically during declaration and use shorthand properties.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

ES6 introduced enhancements to object literal syntax, making it easier to declare properties. The two most common features are Property Shorthand (simplifying syntax when variable and key names match) and Computed Properties (declaring dynamic keys directly inside the object declaration).

2. Why It Matters

Using modern object shorthand syntax reduces boilerplate code, keeps declarations readable, and lets you define dynamic object keys in a single statement.

3. Real-World Analogy

Think of Labeling Storage Boxes:

  • Property Shorthand (Pre-printed Labels): You pack a "stapler" into a box. Instead of writing "Stapler: Contains Stapler" on the label, you simply write "Stapler" on the box. The item name and the label are identical.
  • Computed Properties (Dynamic Label Printer): You have a label printer that prints barcodes based on the current product SKU. Instead of labeling the box after it's sealed, the printer generates and applies the label automatically as the box moves down the assembly line.

4. How It Works

Let's look at how both features are implemented:

1. Property Shorthand:

If you have a variable with the same name as an object key, you can omit the colon and variable name, writing only the identifier once.

2. Computed Properties:

Wrap an expression in square brackets [expression] directly inside the object literal declaration to resolve the key name dynamically.

5. Practical Example

This script demonstrates using computed properties to build a dynamic form state updates handler:

6. Common Mistakes

  • Mixing up shorthand and standard declarations: Forgetting that shorthand variables must exist in the current scope before they are used inside object declarations.
  • Syntax errors: Forgetting the enclosing square brackets [ ] when declaring computed properties, which causes a parsing syntax error.

7. Quick Quiz

Q1: What bracket syntax is used to declare computed properties directly inside an object literal?

A) curly braces { }

B) square brackets [ ]

Answer: B — You must wrap computed property keys in square brackets [ ] to declare them dynamically inside object literals.

8. Scenario-Based Challenge

The Dynamic Action Creator:

You are designing a Redux action creator helper. It should return a structured action payload: { type: actionType, payload: data }. Refactor this function using both property shorthand and computed property keys to see how compact it can be.

9. Debugging Exercise

Identify and fix the syntax error in this object definition:

const propertyName = 'theme';
const value = 'dark';

const pageConfig = {
  propertyName: value // wants to set 'theme' key dynamically!
};
console.log(pageConfig.theme); // logs undefined!
View Solution

Diagnosis: The key propertyName is parsed literally as the string "propertyName" instead of resolving the variable value. This leaves the theme property undefined.

Fix: Wrap the key in square brackets to declare it as a computed property:

const pageConfig = {
  [propertyName]: value
};

10. Interview Questions

🟢 Q1: Explain how property shorthand and computed properties improve code quality in ES6.

Answer:
• Property Shorthand removes redundant key-value mapping boilerplate when local variable names match property keys, making code more readable.
• Computed Properties allow keys to be resolved from dynamic expressions directly within the object literal declaration. Prior to ES6, this required a multi-step process: declaring the object first, and then assigning dynamic keys using bracket notation on separate lines.

11. Production Considerations

  • • Shorthand Methods: Combine property shorthands with modern method shorthands (e.g. greet() {} instead of greet: function() {}) to write clean, concise object definitions.