How to add an object as a field to another existing object in JavaScript

Question

I am new to JS and I am trying to do a basic operation on a JS object.

I have the following object:

var originalObj = {
   id: 1,
   name: 'originalObj'
}

Now I would like to add another object as a field to originalObj.

var newObj = {
   newId: 2,
   name: 'newObj'
}

So expected outcome is:

orginalObj = {
  id: 1,
  name: 'originalObj',
  newObj: {
    newId: 2,
    name: 'newObj'
  }
}

What I tried so far:

originalObj.newObj = newObj and originalObj['newObj'] = newObj

This results in:

orginalObj = {
      id: 1,
      name: 'originalObj',
      newObj: 
    }

Object.assign(originalObj, newObj) This add all the fields of newObj on the same level as originalObj. Like below:

originalObj = { id: 1, name: 'originalObj', newId: 2, name: 'newObj' }

What is the difference between expected output and what you get from the first attempt? — adiga
– adiga, Commented Apr 5, 2019 at 5:55

Michael · Accepted Answer · 2019-04-05 06:09:32Z

1

Depends on if you want a deep copy or just a reference.

originalObj.newObj = newObj; will assign a reference to newObj where as

originalObj.newObj = Object.assign({}, newObj); will create a new one.

Note: if your using ECMAScript 2015 (6th Edition, ECMA-262) you can use the spread operator ...

originalObj.newObj = {...newObj};

Example: https://jsbin.com/yisiyip/edit?js,console

edited Apr 5, 2019 at 6:09

answered Apr 5, 2019 at 6:03

Michael

3133 silver badges19 bronze badges

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

Comments

Afsar · Accepted Answer · 2019-04-05 06:13:22Z

0

originalObj.newObj=newObj; //this should do the job

answered Apr 5, 2019 at 6:13

Afsar

495 bronze badges

Comments

Lelouch · Accepted Answer · 2019-04-05 08:11:41Z

0

const originalObj = {
   id: 1,
   name: 'originalObj'
}

const newObj = {
   newId: 2,
   name: 'newObj'
}

originalObj  = { ...originalObj, newObj }

what's happening here is you are spreading the values of originalObj into an empty object together with the value of newObj by shorthand method

reference:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

edited Apr 5, 2019 at 8:11

answered Apr 5, 2019 at 6:11

Lelouch

9707 silver badges19 bronze badges

1 Comment

TheParam Over a year ago

Please explain answer in deatails to understand to others more effectively.

Collectives™ on Stack Overflow

How to add an object as a field to another existing object in JavaScript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related