Skip to main content

How to Rename an Object's Key in JavaScript

Renaming a key in a JavaScript object is a common data transformation task. You might need to standardize keys from an API response (e.g., changing user_id to userId) or simply update a property name to be more descriptive.

This guide will demonstrate the two main approaches to renaming a key: a simple, mutating method that modifies the original object, and a more robust, non-mutating method using modern destructuring syntax that creates a new object.

Renaming a Single Key (The Simple Case)​

Let's start with the most common scenario: you have an object and need to rename one of its keys.

For example, you have an object and need to rename oldKey to newKey.

// Problem: Rename 'oldKey' to 'newKey'.
const user = {
  oldKey: 'someValue',
  otherProp: 123
};

The Mutating Method: Add and Delete​

This is the most direct, imperative approach. It modifies the original object in place.

Solution:

  1. Copy the value from the old key to the new key.
  2. Delete the old key.
const user = { oldKey: 'someValue', otherProp: 123 };

// Step 1: Add the new key with the old key's value.
user.newKey = user.oldKey;

// Step 2: Delete the old key.
delete user.oldKey;

console.log(user);

Output:

{ otherProp: 123, newKey: 'someValue' }
note

This method is simple and effective, but it modifies the original user object, which may not always be desirable.

This modern approach creates a new object, leaving the original untouched. It is generally safer and aligns with functional programming principles.

Solution:

  1. Use destructuring to "pull out" the value of the key you want to rename.
  2. Use the rest syntax (...) to collect all other properties into a new object.
  3. Combine the collected properties with your new key.
const user = { oldKey: 'someValue', otherProp: 123 };

// Destructure 'oldKey' into a new variable, and collect the 'rest'.
const { oldKey: newKey, ...rest } = user;

// Create the new object by combining the rest with the new key.
const updatedUser = { newKey, ...rest };

console.log(updatedUser); // Output: { newKey: 'someValue', otherProp: 123 }
console.log(user);        // Output: { oldKey: 'someValue', otherProp: 123 } (Original is unchanged)

Output:

{ newKey: 'someValue', otherProp: 123 }
{ oldKey: 'someValue', otherProp: 123 }
note

This method is more declarative and is the recommended best practice for its safety and predictability.

Renaming Multiple Keys​

The destructuring and spread syntax approach scales beautifully for renaming multiple keys at once.

The Modern Method: Destructuring​

For example, you need to rename fName to firstName and lName to lastName.

const person = {
  fName: 'John',
  lName: 'Doe',
  age: 30
};

Solution: you can rename multiple properties in a single destructuring assignment.

const person = { fName: 'John', lName: 'Doe', age: 30 };

// Rename fName to firstName, lName to lastName, and collect the rest.
const { fName: firstName, lName: lastName, ...rest } = person;

// Combine them into a new object.
const updatedPerson = { firstName, lastName, ...rest };

console.log(updatedPerson);

Output:

{firstName: 'John', lastName: 'Doe', age: 30}

A Note on Property Descriptors​

The simple methods shown above are sufficient for over 99% of use cases. They copy the value of a property but not its metadata (e.g., whether it is enumerable, writable, or configurable).

In the rare case that you need to preserve these property descriptors during a rename, you must use a more verbose approach with Object.getOwnPropertyDescriptor() and Object.defineProperty().

The Rarely Needed Solution:

const obj = { oldKey: 'value' };

Object.defineProperty(
  obj,
  'newKey',
  Object.getOwnPropertyDescriptor(obj, 'oldKey')
);
delete obj.oldKey;

console.log(obj);

Output:

{newKey: 'value'}
note

For most everyday data objects, this level of complexity is unnecessary.

Conclusion​

Renaming keys in a JavaScript object is a simple task with clear, modern solutions.

  • For a quick, mutating rename, the "add and delete" pattern (obj.newKey = obj.oldKey; delete obj.oldKey;) is straightforward.
  • For a safer, non-mutating rename, the destructuring and spread syntax is the recommended best practice. It is more declarative, leaves the original object intact, and scales elegantly for renaming multiple keys.

By preferring the non-mutating approach, you can write cleaner, more predictable, and less error-prone code.

Table of Contents