Destructuring JavaScript Object

Question

I have a JavaSCript object, person, that contains id, name, phone and address properties. I want to modify the property names and put them into a new object, personData. Can this be done in 1 step?:

Step 1 (create a var for each property with different names):

var { id:personId, 
      name:personName, 
      phone:personPhone, 
      address:personAddress
   } = person;

Step 2 (create a new object containing those vars):

var personData = {
    personId,
    personName,
    personPhone,
    personAddress
}

holydragon · Accepted Answer · 2018-12-13 02:57:40Z

1

create a new object containing those vars:

var personData = {
    personId: person.id,
    personName: person.name,
    personPhone: person.phone,
    personAddress: person.addres
}

edited Dec 13, 2018 at 2:57

answered Dec 6, 2018 at 2:59

holydragon

6,7687 gold badges48 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Woodchuck Over a year ago

holydragon, your Step 2 is what I was looking for. Your Step 1 seems superfluous, though. Thanks!

holydragon Over a year ago

If the answer solves your problem, please consider accepting it. Thank you.

Woodchuck Over a year ago

holydragon, see my comment. Step 2 answers my question. Can you edit and remove step 1? Then I can accept. Thanks.

Adrian Brand · Accepted Answer · 2018-12-06 02:59:21Z

1

You want the spread operator, not destructuring.

var personData = { ...person, name: 'New name', phone: 'New phone' }

This creates a new object personData with all the properties of person and either adds or replaces the other properties listed.

answered Dec 6, 2018 at 2:59

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

1 Comment

Woodchuck Over a year ago

This seems promising. However, it seems to allow you to change the property values when creating that new object and/or to add new properties. Is there a way to actually remove an existing property (either by changing its name or removing it and adding a different one)?

Collectives™ on Stack Overflow

Destructuring JavaScript Object

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related