Open In App

Rename Object Key in JavaScript

Last Updated : 09 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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:

Method 1: Assignment of variable

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' } ]

Method 2: Using defineProperty()

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' } ]

Approach 3: Using Object.assign()

 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' }

Method 4: Object Destructuring with spread operator

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' }




Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads