6 ways to Rename object keys in ES6 JavaScript

JavaScript

In this post, we are going to learn 6 ways to Rename object keys in ES6 JavaScript. We will rename single or all keys in the object of javascript with examples by using assign(), reduce(), map(), and object. keys() method of javascript

1. Rename object key using assignment

The simple way to rename an object key assigns the object’s old key to a new key as we have done in this example, We have assigned the old key Employee. Empname to new key name Employee.Fullname. Once the assigning is done delete the old key using the javascript delete operator

let Employee = {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'};

Employee.Fullname= Employee.Empname;

delete Employee.Empname;

console.log(Employee);

Output

{ salary: 60000, EmpID: 1, Dep: 'Admin', Fullname: 'John' }

2. Rename object key [] notation

In this Javascript code snippet, We have assigned the old key name to the new key name of the object Employee by using square [] notation and Finally delete the old key using the Javascript delete operator.

let Employee = {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'};

Employee['Fullname'] = Employee['Empname'];

delete Employee['Empname'];


console.log(Employee);

Output

{ salary: 60000, EmpID: 1, Dep: 'Admin', Fullname: 'John' }

3. Rename object Key using assign()

In this Javascript program to rename an object key, We have written clean one-line code by using the object.assign() method that copies all enumerable own properties Source to target object and returns the modified target object and finally used the delete operator to delete old key from the object.

let Employee = {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'};

delete Object.assign(Employee, {Fullname: Employee.Empname})['Empname'];

console.log(Employee);

Output

{ salary: 60000, EmpID: 1, Dep: 'Admin', Fullname: 'John' }

4. destructuring to Rename Multiple object Keys

In this Javascript program, We have used ES6 destructuring assignment to rename multiple properties in the object.

let Employee =
    {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'}
   
   


const {Empname: Fullname, Dep: Department, ...rest} = Employee;
updateobj = {Fullname, Department, ...rest}  
console.log(updateobj)

Output

{ Fullname: 'John', Department: 'Admin', salary: 60000, EmpID: 1 }

5. Rename Multiple object keys

Sometimes, We have to replace multiple object keys, To achieve this, We have defined a custom function renameMutKeys() that accepts Objects and keys we have to replace.

Inside the function, We have used an object.keys() method to get object keys as an array and iterate over it. The map() function will run for each key of the object and rename their name, Finally used the assign() method to copy all source objects properties to the target object and returns the modified target object. 

let Employee = {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'};

console.log('original Object:\n',Employee );

function renameMutKeys(Employee, newKeys) {
  const keyValues = Object.keys(Employee).map(key => {
    const newKey = newKeys[key] || key;
    return { [newKey]: Employee[key] };
  });
  return Object.assign({}, ...keyValues);
}

const newKeys = { Empname: "Fullname", Dep: "Department",EmpID:"ID" };
const updatedObj = renameMutKeys(Employee, newKeys);
console.log('Renamed Object:\n',updatedObj);

Output

original Object:
 { Empname: 'John', salary: 60000, EmpID: 1, Dep: 'Admin' }
Renamed Object:
 { Fullname: 'John', salary: 60000, ID: 1, Department: 'Admin' }

6. Rename Multiple object keys

In this Javascript example, we will learn how To replace the multiple object keys. First, we have defined a custom renameMutiKeys() that accepts keys and objects we have to replace. Inside the function, the object.keys() method to get object keys as an array and iterate over the return array. The array.reduce() method call a callback function for each element of the array and the result returned by the callback function after each iteration pass to the accumulator of reduce function that is used for the next iteration.

let Employee = {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'};


console.log('original Object:\n',Employee );

keysToMap ={Empname: 'Fullname',EmpID:'ID',Dep:'Department'}

const renameMutiKeys = (keysToMap, Employee) =>
  Object.keys(Employee).reduce(
    (acc, key) => ({
      ...acc,
      ...{ [keysToMap[key] || key]: Employee[key] }
    }),
    {}
  );
console.log('Renamed Object :\n',renameMutiKeys(keysToMap,Employee))

Output

original Object:
 { Empname: 'John', salary: 60000, EmpID: 1, Dep: 'Admin' }
Renamed Object :
 { Fullname: 'John', salary: 60000, ID: 1, Department: 'Admin' }

Summary

In this post, we have learned 6 ways to Rename object keys in ES6 JavaScript with examples by using assign(), reduce(), map(), and object. keys() method of Javascript.

Related Posts