Rename object key in JavaScript

Difficulty Level : Easy
Last Updated : 25 Jun, 2019

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 variable or variables we will delete the old key,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 key, value pairs.

Example:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        JavaScript: Object Rename Key
    </title>
</head>
  
<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>
      
</body>
  
</html>                   

Output before rename:

Output after rename:
Ouput after rename

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:

<!DOCTYPE html>
<html>
    <head>
        <title>
            JavaScript: Object Rename Key
        </title>
    </head> 
    <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>    
    </body>
</html> 

Output before renaming:

Output after renaming:

My Personal Notes

Related Articles