How to replace the names of multiple object keys with the values provided using JavaScript ?

The following approach covers how to replace the names of multiple object keys with the values provided by the user using JavaScript.

Problem Statement: You are given an object which contains different key-value pairs in which key symbolizes the property and value itself is known as the property value, and you need to change one or more key’s original name with the name provided by the user using JavaScript.

As an example take the above-illustrated object initially. This object contains key-value pairs like Name: “Hello” and so on. So let us suppose we are targeting the Name key and further we are going to change this Name key as FirstName key name by the following approach.

Before directly jumping into the approaches to solve the above-illustrated problem, let us first declare the object which we are going to use to solve the query.

Example: By using the following syntax let’s first create an object:

Javascript

<script>
  let object = {
    name: "Hello",
    age: 20,
    gender: "Male",
  };

  console.log(object);
</script>

Output:

{ name: 'Hello', age: 20, gender: 'Male' }

Now let us see the approaches to solve the above-illustrated problem.

Approach 1: 

• This is the native approach and quite a simple one too.
• In this approach we will directly pick up the object key and will change the name of that picked key with the name provided by the user.
• After providing the key name we will then delete the previously declared one and replace it with new one.
• We will write the logic part in a method (or function) and further will call that method which will execute our result.

Example 1: 

Javascript

<script>
  let object = {
    name: "Hello",
    age: 20,
    gender: "Male",
  };

  let renmeObjectKey = (object) => {
    object.FirstName = object.name;
    delete object.name;
  };
  renmeObjectKey(object);
  console.log(object);
</script>

Output:

{ age: 20, gender: 'Male', FirstName: 'Hello' }

Now suppose you want to target age key in the object with name provided by yourself.

Example 2: 

Javascript

<script>
  let object = {
    name: "Hello",
    age: 20,
    gender: "Male",
  };

  let renmeObjectKey = (object) => {
    object.FirstName = object.name;
    object.currentAge = object.age;
    delete object.name;
    delete object.age;
  };
  renmeObjectKey(object);
  console.log(object);
</script>

Now along with the name key, age key is also replaced with the new name provided by the user.

Output:

{ gender: 'Male', FirstName: 'Hello', currentAge: 20 }

Note: The only thing you could notice here is that the position of the object gets changed, but its value remains preserved and same too.

Approach 2: 

• In this approach we will declare a method which is completely responsible for executing our result.
• Inside the parameters of this method, we will pass in two arguments, first one is keysMap object which we will accept it from user that actually contains the new key name which will be going to replace from the previous key name and second one is the object which we are referring to.
• Now inside that method we will use Object.keys() which will accept our object initially and will target all our object keys, and then we will execute reduce() over it which will accept two things: first is accumulator value which will act as our result variable and second one is the key which we are targeting currently.
• Then afterwards we will write our logic part and for that we will first take into our account of spread operator which will spread our object into an array, and then we will render out the object keys and replace it with own passed key name.
• Then later we will pass our method inside a new variable which we will declare as our result variable and then will console.log() our result.

Example: 

Javascript

<script>
  let object = {
    name: "Hello",
    age: 20,
    gender: "Male",
  };

  let renameKeys = (keysMap, object) =>
    Object.keys(object).reduce(
      (acc, key) => ({
        ...acc,
        ...{ [keysMap[key] || key]: object[key] },
      }),
      {}
    );

  let result = renameKeys({ name: "FirstName" }, object);
  console.log(result);
</script>

Output:

{ FirstName: 'Hello', age: 20, gender: 'Male' }

Note: This approach will preserve the position of the key and also the value.