Skip to content
Related Articles
Open in App
Not now

Related Articles

Rename object key in JavaScript

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 03 Jan, 2023
Improve Article
Save Article

JavaScript doesn’t provide an inbuilt function to rename an object key. So we will look at different approaches to accomplish this in this article. 

Keys: In JavaScript, objects are used to store collection of various data. It is a collection of properties. A property is a “key:value” pair. Keys are known as ‘property name’ and are used to identify values.

Method 1: 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, value pairs. 

Example: 

HTML




<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <button type="button" onclick="rename()">
            rename
        </button>
  
        <script>
            // JavaScript Program to
            // illustrate renaming
              
            var capitals = [{ // creating an object 'capital' with
                "Burma": "Naypyitaw" // key "Burma" and value "Naypitaw"
            }];
            console.log(capitals);
              
            function rename() { // function to rename on button click
                capitals = capitals.map(function(obj) {
                    obj['Myanmar'] = obj['Burma']; // Assign new key
                    delete obj['Burma']; // Delete old key
                    return obj;
                });
                console.log(capitals);
            }
        </script>
    </center>
</body>

Output:

Rename object key in JavaScript

Rename object key in JavaScript

Method 2: In this approach we will rename the given object key by utilizing defineProperty() to manipulate the property of the object. defineProperty(): 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 to be modified, name of the key, and the description attribute respectively in that order. Syntax:

 Object.defineProperty(obj, key, description) 

Example: 

HTML




<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <button type="button" onclick="rename()">
            rename
        </button>
        <script>
            // JavaScript Program to
            // illustrate renaming key
              
                var capitals= [{     // creating an object 'capital' with
                "Persia": "Tehran" // key "Persia" and value "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) {                
                        Object.defineProperty(obj, new_key, // modify old key
                                            // fetch description from object
                        Object.getOwnPropertyDescriptor(obj, old_key));
                        delete obj[old_key];             // delete old key
                        }
                }
                function rename(){
                    capitals.forEach(obj => renameKey(obj, 'Persia', 'Iran'));
                    console.log(capitals);
                }
        </script>
  </center>
</body>

Output:

Rename object key in JavaScript

Rename object key in JavaScript


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!