How to Rename an Object Key in JavaScript

Renaming an object key in JavaScript is a common task, especially when working with dynamic data or refactoring code. This guide explores various methods to rename an object key, providing detailed explanations and code examples.

let obj = { oldKey: "value" };

obj.newKey = obj.oldKey;
delete obj.oldKey;

console.log(obj); // { newKey: "value" }

To rename an object key in JavaScript, create a new key with the desired name, copy the value from the old key, and then delete the old key:

Renaming a key in an object is often required when dealing with APIs, refactoring code, or transforming data structures. JavaScript does not have a built-in method for renaming keys directly, but it can be done using a few simple steps.

Using Basic Assignment

The most straightforward way to rename an object key is to assign the value of the old key to a new key and then delete the old key.

Example 1: Using Basic Assignment

let obj = { oldKey: "value" };

obj.newKey = obj.oldKey;
delete obj.oldKey;

console.log(obj); // { newKey: "value" }

Explanation:

• obj.oldKey accesses the value associated with oldKey.
• obj.newKey = obj.oldKey creates a new key newKey and assigns it the value of oldKey.
• delete obj.oldKey removes the original oldKey from the object.

Using Destructuring

JavaScript’s destructuring syntax can also be used to rename keys in a more concise way.

Example 2: Using Destructuring

let obj = { oldKey: "value" };

let { oldKey: newKey } = obj;
obj = { newKey };

console.log(obj); // { newKey: "value" }

Explanation:

• { oldKey: newKey } destructures the object, assigning the value of oldKey to newKey.
• The object is then restructured with the new key.

Using a Utility Function

Creating a utility function to rename object keys can encapsulate the logic, making it reusable and cleaner.

Example 3: Using a Utility Function

function renameKey(obj, oldKey, newKey) {
  if (oldKey !== newKey) {
    Object.defineProperty(obj, newKey,
      Object.getOwnPropertyDescriptor(obj, oldKey));
    delete obj[oldKey];
  }
  return obj;
}

let obj = { oldKey: "value" };
obj = renameKey(obj, "oldKey", "newKey");

console.log(obj); // { newKey: "value" }

Explanation:

• Object.getOwnPropertyDescriptor(obj, oldKey) gets the property descriptor of oldKey.
• Object.defineProperty(obj, newKey, ...) creates newKey with the same value and attributes as oldKey.
• delete obj[oldKey] removes oldKey from the object.
• The utility function renameKey takes the object, old key, and new key as parameters and returns the modified object.

Renaming Multiple Keys

If you need to rename multiple keys in an object, you can loop through a list of key mappings.

Example 4: Renaming Multiple Keys

let obj = { key1: "value1", key2: "value2" };
let keyMap = { key1: "newKey1", key2: "newKey2" };

for (let oldKey in keyMap) {
  if (obj.hasOwnProperty(oldKey)) {
    obj[keyMap[oldKey]] = obj[oldKey];
    delete obj[oldKey];
  }
}

console.log(obj); // { newKey1: "value1", newKey2: "value2" }

Explanation:

• keyMap is an object mapping old keys to new keys.
• The loop iterates over each key in keyMap, renaming them as needed.

Conclusion

Renaming an object key in JavaScript is a simple task that can be accomplished in various ways depending on your needs. Whether using basic assignment, destructuring, a utility function, or renaming multiple keys, understanding these methods ensures that you can handle object manipulation effectively. This knowledge helps in making your code more maintainable and adaptable to different scenarios.