Immutably Rename Object Keys in Javascript

Edit: See how to rename many object keys here.

If you’re okay with mutating data, renaming an object’s key is easy.

obj = { name: 'Bobo' }
obj.somethingElse = obj.name
delete obj.name

If you don’t want to mutate your data, however, consider this function.

renameProp = (
    oldProp,
    newProp,
{ [oldProp]: old, ...others }
) => ({
    [newProp]: old,
    ...others
})

What’s happening here:

• Computed property names
• Spread syntax
• Rest params
• Destructuring assignment

Let’s add a debugger and inspect.

renameProp = (
  oldProp,
  newProp,
  { [oldProp]: old, ...others }
) => {
  debugger;
  return {
    [newProp]: old,
    ...others
  };
};

Imagine we have an object, bobo.

bobo = {
    name: 'Bobo',
    job: 'Front-End Master',
    age: 25
}