Creating object with dynamic keys

javascript

prompt-engineering

functions

callbacks

byNikita Barsukov·Sep 12, 2024

To create a JavaScript object with dynamic keys, use computed property names in an object literal, or simply assign values to keys outside the literal:

let key = 'userID';
let value = 123;

// Aquaman approves this 🌊💪
let obj = { [key]: value };

In the wake of this, obj now proudly features the property userID, nobly holding the value 123.

For the underdog who finds solace in older browsers, fear not, for bracket notation is at your service:

// Remember, old is always gold, kind of like Internet Explorer 🌝 
obj[key] = value;

Voila! Much like its counterpart, this too endows obj with the userID property and the value 123.

Deep diving into dynamic keys

Dynamic keys are essentially your ticket to creating objects that step out of the confines of static or hard-coded property names. This versatile feature is a blessing in an array of scenarios when one needs to construct an object based on volatile data, such as:

When a user’s dynamic input dictates the keys.
To tailor-make your local object structure to fit data coming in from a server response.
Data transformation scenarios, where the need to rechristen keys while mapping one object structure to another is indispensable.

Pivot to ES6/ES2015 and above to find a straightforward method of using dynamic keys:

let dynamicKey = 'selected' + itemId;
// Guide: How to make every item feel special 🎁😀 
let isSelected = true;

let itemStatus = {
  [dynamicKey]: isSelected
};

Now, the itemStatus object will proudly strut a property like selected23 if itemId was 23.

Skirting the pitfalls

When you're in the dynamic keys territory, be prepared for potential traps:

Legacy JavaScript environments that don't support ES2015 require a transpiler like Babel or Google's Traceur for compatibility.
While defining multiple dynamic keys at the same time, tread carefully to avert overwriting property calamities.
For nested or complex objects, you must arm yourself with additional logic to handle dynamic key assignments without data loss.

How to use dynamic keys

Taming user-generated data

Visualize building an interactive form where every field needs to tag along in an object:

function handleFormInput(fieldName, value) {
  // Assembling Avengers! 😎🌟
  let formData = {
    [fieldName]: value
  };
  // Handle form submission with formData
}

Renaming keys from an API response

Sometimes, for your UI component state to pillow-fit, you need to recast the keys:

function renameKeys(data, keyMap) {
  // Your tailor-made key names, hot and ready! 🍕😋
  return Object.keys(data).reduce((newData, key) => {
    let newKey = keyMap[key] || key;
    newData[newKey] = data[key];
    return newData;
  }, {});
}

Generating custom configurations

To create config objects for setup or initialization, dynamic objects can come in handy:

let settings = {
  [`is${option}`]: isEnabled
};
// Custom settings, check! ⚙️✔️

Diving deeper into dynamic keys

Merging objects with dynamic properties:

ES2018 brought the spread syntax that made merging objects a breeze, enhancing dynamic property support:

let dynamicDefaults = { [key]: defaultValue };
// Dynamic defaults meet the user settings. Sounds like a rom-com title, doesn't it? 💕🎬
let userSettings = { ...dynamicDefaults, ...userProvidedSettings };

Dynamic key-value storage with Maps

For complex scenarios, a Map, designed to handle dynamic key-value pairs, might be your superhero:

// The 'MAP' in MAPping. See what I did there? 🧐🗺️
let map = new Map();
map.set(dynamicKey, value);

Metaprogramming with Proxies

Proxies are the wizards of dynamic property interactions, enabling interception and defining custom behavior for property access:

let handler = {
  // Gotcha! Now, the sky's the limit for this target! 🎈🎯
  get(target, propKey) {
    return propKey in target ? target[propKey] : 42;
  }
};

let proxy = new Proxy({}, handler);
// Will return '42', if not found. Because, why not, right? 🚀🪐
console.log(proxy[dynamicKey]);