Renaming Object Keys in JavaScript

Renaming Object Keys in JavaScript

JavaScript objects are fundamental data structures, and modifying them is a common task. Sometimes, you need to rename a key within an object. This tutorial explores several approaches to accomplish this, ranging from simple to more robust solutions, and considers performance and edge cases.

The Basic Approach

The most straightforward way to rename a key is to copy the value associated with the old key to the new key, and then delete the old key.

const myObject = { oldKey: "value" };

myObject.newKey = myObject.oldKey;
delete myObject.oldKey;

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

This method is concise and easy to understand. However, it doesn’t account for property descriptors (like whether a property is writable, enumerable, or configurable). This can lead to unexpected behavior if you are working with properties that have custom descriptors.

Preserving Property Descriptors

To ensure that the renamed property behaves exactly like the original, including its descriptors, you can use Object.getOwnPropertyDescriptor and Object.defineProperty.

const myObject = {
  oldKey: "value",
  configurable: true,  //Example descriptor
};

const descriptor = Object.getOwnPropertyDescriptor(myObject, "oldKey");

if (descriptor) {
  Object.defineProperty(myObject, "newKey", descriptor);
  delete myObject.oldKey;
}

console.log(myObject);

This approach retrieves the property descriptor from the original key and applies it to the new key, preserving all original attributes. This is the most complete and correct method when preserving property behavior is critical.

Using Object.assign (ES6+)

ES6 introduced Object.assign, which can also be used for key renaming.

const myObject = { oldKey: "value" };

Object.assign(myObject, { newKey: myObject.oldKey });
delete myObject.oldKey;

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

Object.assign copies enumerable properties from source objects to a target object. In this case, it’s used to copy the value from oldKey to newKey before deleting the original key. Like the basic approach, this doesn’t preserve property descriptors.

You can also use Object.assign to create a new object instead of modifying the original:

const myObject = { oldKey: "value" };
const newObject = Object.assign({}, myObject, { newKey: myObject.oldKey });
delete newObject.oldKey;

console.log(newObject);

Extending Object.prototype (Advanced)

For frequent key renaming operations, you can extend the Object.prototype to add a renameProperty method. This provides a fluent interface for renaming multiple keys.

Object.prototype.renameProperty = function (oldName, newName) {
  if (oldName === newName) {
    return this;
  }

  if (this.hasOwnProperty(oldName)) {
    this[newName] = this[oldName];
    delete this[oldName];
  }
  return this;
};

const myObject = { oldKey: "value" };
myObject.renameProperty("oldKey", "newKey");

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

Important Considerations: Modifying built-in prototypes like Object.prototype should be done with caution as it can potentially lead to conflicts with other libraries or code. Using a more isolated approach (like utility functions) is generally recommended.

For stricter control and to prevent unintended modifications, you can define the method using Object.defineProperty:

Object.defineProperty(
  Object.prototype,
  'renameProperty',
  {
    writable: false,
    enumerable: false,
    configurable: false,
    value: function (oldName, newName) {
      if (oldName === newName) {
        return this;
      }

      if (this.hasOwnProperty(oldName)) {
        this[newName] = this[oldName];
        delete this[oldName];
      }
      return this;
    }
  }
);

This defines the method as non-writable, non-enumerable, and non-configurable, providing a more robust and controlled implementation.

Renaming Multiple Keys

If you need to rename multiple keys at once, you can use a function that iterates through a mapping of old keys to new keys.

function renameKeys(obj, newKeys) {
  const keyValues = Object.keys(obj).map(key => {
    const newKey = newKeys[key] || key;
    return { [newKey]: obj[key] };
  });
  return Object.assign({}, ...keyValues);
}

const myObject = { a: "1", b: "2" };
const newKeys = { a: "A", c: "C" };
const renamedObj = renameKeys(myObject, newKeys);

console.log(renamedObj); // Output: { A: "1", b: "2" }

This function creates a new object with the renamed keys.

Using Object.fromEntries and Object.entries

For more functional approaches and transformations on object keys, consider using Object.fromEntries and Object.entries:

const obj = {foo: 'bar'}

const altObj = Object.fromEntries(
  Object.entries(obj).map(([key, value]) => 
    // Modify key here
    [`x-${key}`, value]
  )
)

console.log(altObj); // Output: {'x-foo': 'bar'}

This approach is particularly useful when you need to apply more complex transformations to the keys during the renaming process.