Rename an Object’s Key in JavaScript?

In JavaScript, an object is an unordered collection of items. It stores the data in the form of key-value pairs and these key-value pairs are called the properties of the object.

When we are working with these objects, we might need to rename an existing key. But, unfortunately, there is no built-in method to rename the key of an object in JavaScript.

So, we will look at different approaches which we can use to rename the key.

Method 1 – By Adding New Key to the Object and Deleting the Old one

In this approach, we first get the value of the existing key and add the new key with the same value to the object. Now, the object has both keys(old & new) with the same value. Therefore, we delete the old key’s entry from the object using the delete operator.

Example:

const obj = {
    oldName: 'John Doe',
    age: 24,
}

// Add new key to object
obj['newName'] = obj['oldName'];

// Delete old key 
delete obj['oldName'];

console.log(obj);
// {newName: "John Doe", age: 24}

As you can see from the above example, the old key oldName is renamed as newName in the same object.

Well, in reality, the old key is not renamed, it is actually replaced with the new key.

Rename Multiple Keys of an Object

The basic concept of renaming multiple keys is also same as renaming a single key i.e. add new key to the object and delete the old one. The only difference is that we have to run a for loop to do it for multiple keys.

See the following example:

const obj = {
    oldKey1: 'value1',
    oldKey2: 'value2',
    oldKey3: 'value3',
    oldKey4: 'value4',
}

// Keys to be renamed
let keyMap = {
    oldKey1: 'newKey1',
    oldKey2: 'newKey2',
}

for(let oldKey in keyMap){
    
    let newKey = keyMap[oldKey]; // get the new key
    obj[newKey] = obj[oldKey];  // add new key to obj
    
    delete obj[oldKey];  // Delete the old key
}

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

As you can see from the above example, the keys oldKey1 & oldKey2 are renamed as newKey1 & newKey2 in the original object.

Method 2 – Rename Object’s Key Using defineProperty() Method

The Object.defineProperty() method is used to add a new property to the specified object or modify an existing property and returns the modified object.

It accepts three parameters:

• obj – The object to be modified
• key – The key to be added or modified
• descriptor – The descriptor object for the specified key

Object.defineProperty(obj, key, descriptor)

This method does also not rename the existing key, therefore, we have to delete manually using the delete operator after adding the new key to the object.

const obj = {
    oldName: 'John Doe',
    age: 24,
}

// Add new key to the object
Object.defineProperty(obj, 'newName', {
    value: obj['oldName']
});


// Delete the old key
delete obj['oldName'];

console.log(obj);
// { newName: "John Doe", age: 24 }

Conclusion

In this article, we learned two ways to rename an object’s keys using JavaScript.

The first approach is to add the new key to the specified object by copying the value of the old key and then delete the old key using the delete operator.

The second approach is to add the new key using the Object.defineProperty() method with the same value as the old key and then delete the old key.