Rename Object Key in JavaScript

In JavaScript, objects are used to store the collection of various data. It is a collection of properties. A property is a “key: value” pair where Keys are known as ‘property name’ and are used to identify values. Since JavaScript doesn’t provide an inbuilt function to rename an object key. So we will look at different approaches to accomplish this.

Below are the different approaches to rename Object key in JavaScript:

Table of Content

Assignment of variable
Using defineProperty()
Using Object.assign()
Object Destructuring with spread operator
Using a temporary variable and delete

Renaming the object by simple assignment of variables. After the assignment of variables or variables, we will delete the old key, and value pair and print the new key-value pair.

Syntax:

obj['New key'] = obj['old key'];

Note: Renaming the object by simple assignment of variable could be applied on multiple keys and value pairs.

Example: In this example, we have used the assignment of the variable method.

Javascript

// JavaScript Program to illustrate renaming

// Creating an object 'capital' with
// key "Burma" and value "Naypitaw"
let capitals = [{ 
    "Burma": "Naypyitaw"
}];

console.log(capitals);

// Function to rename on button click
function rename() { 
    capitals = capitals.map(function (obj) {

        // Assign new key
        obj['Myanmar'] = obj['Burma']; 

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

        return obj;
    });
    console.log(capitals);
}

rename();

Output

[ { Burma: 'Naypyitaw' } ]
[ { Myanmar: 'Naypyitaw' } ]

In this approach, we will rename the given object key by utilizing defineProperty() to manipulate the property of the object.

This static method is used to define a new property of an object or modify an existing one, and returns the object. It accepts 3 parameters. They are: Object that to be modified, the name of the key, and the description attribute respectively in that order.

Syntax:

Object.defineProperty(obj, key, description) ;

Example: In this example, we have used defineProperty() to rename Object key.

Javascript

// JavaScript Program to illustrate renaming key

// Creating an object 'capital' with
// key "Persia" and value "Tehran"
let capitals = [{
    "Persia": "Tehran"
}];
console.log(capitals);

// Function to rename old key
function renameKey(obj, old_key, new_key) {

    // Check if old key = new key
    if (old_key !== new_key) {

        // Modify old key
        Object.defineProperty(obj, new_key,

            // Fetch description from object
            Object.getOwnPropertyDescriptor(obj, old_key));

        // Delete old key
        delete obj[old_key];
    }
}
function rename() {
    capitals.forEach(obj => renameKey(obj, 'Persia', 'Iran'));
    console.log(capitals);
}

rename();

Output

[ { Persia: 'Tehran' } ]
[ { Iran: 'Tehran' } ]

This method allows you to copy the properties of one or more source objects to a target object.

Syntax:

Object.assign(target, ...sources);

Example: In this example, we have used Object.assign() method.

Javascript

// Sample object
let myObject = { oldKey: "value" };

// Rename the key using Object.assign()
let renamedObject = Object.assign({}, { newKey: myObject.oldKey });

console.log(renamedObject);

Output

{ newKey: 'value' }

Object destructuring and spread operator involve extracting properties from an object, creating a new object with a renamed key using spread syntax, and including the remaining properties. This method is concise and efficient for key renaming in JavaScript.

Example: In this example we extracts the oldKey property from myObject, assigns it to newKey, and spreads the rest of the properties into the new object renamedObject

JavaScript

let myObject = { oldKey: "value" };

// Rename the key using object destructuring and spread operator
const { oldKey, ...rest } = myObject;
let renamedObject = { newKey: oldKey, ...rest };

console.log(renamedObject);

Output

{ newKey: 'value' }

This method involves creating a temporary variable to store the value associated with the old key, assigning the value to the new key, and then deleting the old key from the object.

Example:

JavaScript

// Sample object
let obj = {
    oldKey: "value"
};

// Store the value associated with the old key in a temporary variable
let temp = obj.oldKey;

// Assign the value to the new key
obj.newKey = temp;

// Delete the old key
delete obj.oldKey;

// Print the updated object
console.log(obj); // Output: { newKey: "value" }

Output

{ newKey: 'value' }

Assignment of variable

Using defineProperty()

Using Object.assign()

Syntax:

Object Destructuring with spread operator

Using a temporary variable and delete

Contact Us