Add a property to a JavaScript object using a variable as the name?

Deeper explanation and nitty-gritties

Sometimes, while working with JavaScript objects, you may face a situation where the property names are not known until runtime, or you might want to use a variable value as the property name. This is precisely when the bracket notation and computed property names come into play.

Bracket notation for flexible nomenclature

JavaScript's bracket notation provides a flexible way for using any expression, including variables, as the property name.

let fancyPropertyName = "currentStatus";
let fancyValue = "Active";

let userStatus = {};
userStatus[fancyPropertyName] = fancyValue;


Now, running userStatus.currentStatus will return "Active".

Embracing ES6 and computed property names

With ES6, you can use computed property names directly within object literals for an even more streamlined approach.

const propertyName = 'theme';
const propertyValue = 'dark';

const settings = {
  [propertyName]: propertyValue 
  //It's never too late to switch to the dark side
};


Executing settings.theme would return 'dark'.

Dynamic properties: A superhero's toolkit

Dynamic properties can show their true power in situations like adding properties conditionally:

let flexibleObj = {};
let flexibleKey = "raincheck";
let mightNeedThis = false;

if (mightNeedThis) {
  flexibleObj[flexibleKey] = "available";
  // If rainchecks were superhero powers!
}


This way, you can prevent unnecessary properties from unnecessarily being created.

Nesting made easy with third-party utilities

Struggling with deeply nested objects? Libraries like lodash can come to your rescue:

// You can assume _ as lodash
let multiLevelPath = "customer.address.postalcode";
let postalValue = "12345";

_.set(flexibleObj, multiLevelPath, postalValue);
// Make postcode pigeon-friendly. Not used by Santa.


Interesting how _.set will create nested objects as needed, right?

Common pitfalls and how to avoid them

Here's something you should definitely avoid to prevent syntax errors: mixing bracket and dot notation.

// This won't fly
obj.someProperty[key] = "myValue";  // SyntaxError

// This is the correct way
obj["someProperty"][key] = "myValue";  
// This ain't no dot-to-dot puzzle


Real life scenarios for dynamic properties

Handling data-driven applications

Dynamic properties are a godsend for applications where object properties need to correspond to dynamic data available only during runtime.

Dynamic form fields

Web forms with fields generated based on data from a backend can make good use of dynamic property assignment for each input field's value.

Navigating fluid API responses

Handling API responses with an unknown or variable structure? Dynamically naming properties can help map values to an object.

Adapting to on-the-fly configurations

Even for configuring objects without knowing the keys in advance, leveraging dynamic properties is a plus. Think about library or plugin options.

Pro tips and best practices

Respect the norms of property naming

Remember that invalid identifiers can be used with bracket notation, but it doesn't hurt to be a good citizen and use valid JavaScript identifiers.

Consistency is key

Keep the dynamic nature of your properties evident to the reader, even if your variable is a string literal. Using it in square brackets obj[varName] helps achieve this.

Look before you leap

Always double-check if a dynamic key exists on an object before using it. This becomes crucial when dealing with user-generated input.