DEV Community

Nilesh Raut
Nilesh Raut

Posted on • Originally published at technilesh.com on

How to Set Dynamic Property Keys with ES6 ?

How to Set Dynamic Property Keys with ES6

In the world of programming, we often find ourselves faced with the challenge of manipulating objects and their properties dynamically. How can we create and access object properties when we don't know their names in advance? Well, that's where ES6, the sixth version of ECMAScript, comes to the rescue with some nifty features. In this blog post, we'll explore how to set dynamic property keys with ES6, making your JavaScript code more flexible and efficient.

The Power of Computed Property Names

Imagine you have an object, and you want to set a property with a name based on some dynamic value. In ES6, we can use computed property names to achieve this. These are enclosed in square brackets [], and the expression inside the brackets is evaluated as the property name. Let's see an example:

const dynamicKey = 'color';
const myObject = {
  [dynamicKey]: 'blue',
};

console.log(myObject.color); // Outputs: 'blue'
Enter fullscreen mode Exit fullscreen mode

In this example, we set the dynamicKey variable as the property name within square brackets, and it creates a property with the name 'color' in the myObject.

Using Functions for Dynamic Property Keys

What if you want to go a step further and use a function to determine property names? No worries; ES6 has us covered. Here's how you can do it:

function getPropertyKey() {
  return 'quantity';
}

const product = {
  [getPropertyKey()] : 10,
};

console.log(product.quantity); // Outputs: 10
Enter fullscreen mode Exit fullscreen mode

In this case, the getPropertyKey function returns 'quantity,' and this becomes the property name for the product object. This approach is incredibly useful when you need to compute property names based on certain conditions or logic.

Dynamic Property Deletion

With great power comes great responsibility. You might need to remove dynamically named properties at some point. Fortunately, you can use the delete operator in conjunction with computed property names to achieve this:

const user = {
  name: 'Alice',
  age: 30,
};

const propertyToDelete = 'age';
delete user[propertyToDelete];

console.log(user.age); // Outputs: undefined
Enter fullscreen mode Exit fullscreen mode

By setting propertyToDelete as the property name in square brackets, we can remove the 'age' property from the user object.

Wrapping Up

Setting dynamic property keys with ES6 opens up a world of possibilities for flexible and efficient JavaScript coding. Computed property names and functions can help us create, access, and even delete properties in objects on the fly. Whether you're working with user data, configurations, or any other dynamic content, ES6 empowers you to make your code adapt to various scenarios.

So, next time you find yourself juggling object properties dynamically, remember that ES6 is here to simplify your life. Embrace the power of computed property names, and watch your code become more versatile and easier to manage. Happy coding!keys...

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Hello! Have you read the DEV.to content policy? Specifically this part (from section 11 here)

Posts must contain substantial content — they may not merely reference an external link that contains the full post.

Collapse
 
speaklouder profile image
Nilesh Raut

Thank You . Made Changes .