change property name

Question

I have a JavaScript object as follows:

var a = { 
 Prop1: 'test', 
 Prop2: 'test2' 
}

How would I change the property name of Prop1 to Prop3?

I tried the following code but it didn't work...

for (var p in r){
  p.propertyName = 'Prop3';
}

I guess I'll be the one to say it this time. `var a = { Prop1: 'test', Prop2: 'test2' }` isn't JSON data. It's a JavaScript object literal that could be translated into JSON data if you chose to do so. — RightSaidFred, Dec 13 '11 at 02:02
- You can use a utility to handle this. https://stackoverflow.com/a/60677446/6512565 — Muhammed Moussa, Mar 13 '20 at 21:31

score 112 · Accepted Answer · answered Dec 13 '11 at 01:51

112

That isn't directly possible.

You can just write

a.Prop3 = a.Prop1;
delete a.Prop1;

answered Dec 13 '11 at 01:51

SLaks

837,282
173
1,862
1,933

3

the `delete` function is usually frowned upon for its performance. Would not it be better to recreate an object? – Dmitry Efimenko May 20 '15 at 17:27
6

@Dmitry: only ask yourself this question if you realize your app is slow because you're using delete. Also I guess creating a new object might be longer if there are lots of properties. – user276648 Dec 10 '15 at 08:14
@user276648: Plus GC churn. – SLaks Dec 10 '15 at 13:09
2

@Dmitry what are the downsides of using 'delete'? – Cloxure May 20 '16 at 18:35

score 25 · Answer 2 · edited Dec 25 '21 at 16:43

25

Another approach would be to use the proposed property rest notation like so:

const {Prop1, ...otherProps} = a;
    
const newObj = {Prop3: Prop1, ...otherProps};

This is supported by Babel's object rest spread transform.

edited Dec 25 '21 at 16:43

Gass

4,098
2
13
27

answered Feb 07 '17 at 01:31

score 12 · Answer 3 · answered Oct 25 '17 at 19:19

12

Adding to the object rest spread solution

const { Prop1: Prop3, ...otherProps } = a;
const newObj = { Prop3, ...otherProps };

answered Oct 25 '17 at 19:19

kendotwill

1,662
17
16

score 0 · Answer 4 · answered Dec 25 '21 at 16:52

Using Destructuring assignment

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

const myObj = {
  prop1: 'asd',
  prop2: 'asd',
  prop3: 'asd'
}

const {prop1, ...rest} = myObj;

console.log({...rest})

For more info click here

change property name

4 Answers4

Using Destructuring assignment

Linked

Related