What the heck is Computed Properties in JavaScript

*Have you ever come across situations where you need to dynamically assign values to object properties * or perform computations based on dynamic property names?

if Yes

Computed properties in JavaScript provide an elegant solution to handle such scenarios. In this article, we'll explore computed properties, how they work, and how they can be leveraged effectively in your JavaScript code.

*before we start *
we will discuss Choosing Between Map and Object with Computed Properties in the next article.

---

1. Introduction to Computed Properties

Computed properties, introduced in ECMAScript 2015 (ES6), allow you to create object properties dynamically using an expression in square brackets ([]). Instead of specifying a fixed property name, you can use an expression to compute the property name at runtime. This provides flexibility in working with object properties and enables dynamic behaviors.

2. Syntax and Usage

The syntax for computed properties is as follows:

const propertyName = "dynamicPropertyName";
const obj = {
  [propertyName]: value
};

In this example, the propertyName variable contains the computed property name, which is enclosed in square brackets within the object literal. The value assigned to the computed property can be any valid JavaScript expression.

3. Dynamic Property Names

One common use case for computed properties is when you have dynamic property names. Consider the following example:

function createPerson(name, age) {
  return {
    name,
    age,
    [`is${name}Adult`]: age >= 18
  };
}

const person = createPerson("John", 25);
console.log(person);

In this code snippet, the createPerson function takes in name and age parameters and returns an object with properties for name, age, and a computed property [is${name}Adult] that indicates whether the person is an adult based on their age.

By using a computed property name, we can create a dynamic property that reflects the person's name and their adult status. This approach allows for flexibility in constructing object properties based on dynamic values or conditions.

4. Dynamic Property Assignment

Computed properties can also be used to dynamically assign values to object properties. Consider the following example:

function createProduct(id, name, price) {
  const product = {};
  product[id] = {
    name,
    price
  };
  return product;
}

const productId = "ABC123";
const productData = createProduct(productId, "Sample Product", 9.99);
console.log(productData);

In this example, the createProduct function takes in an id, name, and price and creates a product object. The computed property assignment product[id] dynamically assigns the object containing the name and price properties to the id property of the product object.

By using computed properties for assignment, we can handle dynamic values as property keys, allowing for more flexible and customizable object structures.

5. Benefits of Computed Properties

Computed properties offer several benefits in JavaScript programming:

• Dynamic Property Handling: Computed properties allow for dynamic property names and assignments, enabling more flexible object structures based on runtime conditions or dynamic values.

• Code Readability and Maintainability: By using computed properties, you can create concise and readable code, especially when dealing with dynamic property names or values. This improves code maintainability by reducing the need for explicit if-else or switch statements for property assignments.

• Code Reusability: Computed properties facilitate the creation of reusable code blocks that can handle different dynamic scenarios. Instead of writing separate code logic for each property assignment, computed properties allow you to handle dynamic cases with a single code block.

6. Conclusion

Computed properties in JavaScript provide a powerful mechanism for dynamically assigning property names and

values. By using square brackets with expressions, you can create more flexible and adaptable object structures. Computed properties enhance code readability, maintainability, and reusability by handling dynamic scenarios with ease.

In this article, we explored the syntax and usage of computed properties in JavaScript. We discussed their benefits and demonstrated how they can be used to handle dynamic property names and assignments effectively.

Happy coding!

---

About the Author:

Muhmmad is a passionate JavaScript,
With a strong understanding of JavaScript concepts and a love for elegant code.

Muhmmad enjoys sharing knowledge and helping fellow developers improve their coding skills.

Connect with Muhmmad on LinkedIn to stay updated with his latest articles and projects.

Follow Muhmmad Awd on:

Comments

[Ben Calder]

The example for "dynamic property names" is spurious and would never be done in practice: as already noted you should just use a static property name for such a generic property - i.e. isAdult.

I'm actually finding it very hard to find a practical example where this functionality might be needed; but I think I might have used it once or twice in the past 😅
You could perhaps use it to create a condensed data structure that is intended to be iterated with Object.entries()...

// in practice this data would probably be retrieved via an API:
const mySourceData = [
  { id: "foo", value: "something", /* many other properties */  },
  { id: "bar", value: "something else", /* many other properties */ },
];

// parsing to an array using destructuring to get relevant properties
const dataArray = mySourceData.map(({ id, value }) => ({ id, value }));

// parsing to an object
const dataObject = mySourceData.reduce((accumulator, { id, value }) => ({
    ...accumulator,
    [id]: value
}), {});    

console.log(dataArray);
console.log(dataObject);

Both the map and reduce examples above are written in a condensed style I usually avoid since it hurts readability. For the reduce function I'd normally opt for "dynamic property assignment" since IMO that's clearer. i.e.:

accumulator[id] = value;
return accumulator;

Dynamic property assignment is something I have definitely needed more frequently; but it's still something of a rarity.

[Mohammed Awad]

or maybe we can use Map() data strucure

[Ben Calder]

To achieve what?

[Mohammed Awad]

instead of using dynamic property

[Ben Calder]

In what context?
TBH it looks like you had some help writing the article; so I'm not sure what you're trying to achieve here 😅

[Mohammed Awad]

insted of using normal object we can use Map() insted If I need to use local variable or something like this . what you use insted of

    function handleChange(event) {
  const { name, value } = event.target;
        setMeme(prevMeme => ({
            ...prevMeme,
            [name]: value
        }))
    } 

we can use

function handleChange(event) {
  const { name, value } = event.target;
  setMeme(prevMeme => {
    const updatedMeme = new Map(prevMeme);
    updatedMeme.set(name, value);
    return updatedMeme;
  });
}

is this works??

[Mateus Amorim]

when you mentioned computed properties I thought it was about object getters hehe, for what you did I would just call it a dynamic object key.

computed properties would be something like this (in my understanding):

const user = {
   firstName: "foo",
   secondName: "bar",
   get fullName() {
      return [user.firstName, user.secondName].join(" ");
   }
}

console.log(user.fullName) // "foo bar"

[Mohammed Awad]

I think you are correct. I just learned from course computed but then I saw people call it dynamic object key to be honest this name makes more sense

[Mohammed Awad]

If I need to use local variable or something like this . what you use insted of [event.target.name]: value

    function handleChange(event) {
        setMeme(prevMeme => ({
            ...prevMeme,
            [event.target.name]: value
        }))
    }```

[Ben Read]

In my experience this could be good for when you have to send custom events to an analytics platform such as Google Analytics or for simplifying the way an object is transformed - I came across somewhere I think this might have been useful where data was fetched from an api, modified by the user, then sent back to a different api that needed a different data structure. You never need it until you need it!

[Mohammed Awad]

should I use Map() data strucure then ?

[Mohammed Awad]

I'm still learning, can you tell me more, what is the best solution ?

[Mohammed Awad]

say Hi

[Mateus Amorim]

The example seems a little weird to me. Usually you report an analytics event by name, like this:

track(event.name, event.attributes);

one thing to consider with dynamic keys too is the fact that it is a little harder to provide typescript types, meaning that if not done correctly, people will need to explore the code to understand what can be accessed.

In the "person" example that was provided in the post, this is how it would be typed:

function createPerson<T extends string>(name: T, age: number) {
  return {
    name,
    age,
    [`is${name}Adult`]: age >= 18
  };
}

if you are not using typescript then it will be harder for others to know that the "person" has a "isAdult" property