Updating javascript object property?

Solution 1:

Using ES7+ syntax and a functional approach:

const new_obj = { ...obj, name: { first: 'blah', last: 'ha'} }

Solution 2:

On recent browsers with ECMAScript 2015, you can do:

Object.assign(skillet.person.name, { first: 'blah', last: 'ha'});

which will preserve any existing attribute not listed in the right object.

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

[EDIT] With ES7, you can do even shorter (but is it clearer?...):

{...skillet.person.name, ...{ first: 'blah', last: 'ha'}};

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

Solution 3:

If you want to mix an object into another one, you can use jQuery's deep extend function. "Deep" means that it does not overwrite name with the new object, but rather overwrites the properties inside such an object.

$.extend(true, skillet.person, {
  name: {
    first: 'updated'
  },
  birthday: {
    day: 'updated',
    year: 'updated'
  }
});

Now, skillet.person has the appropriate properties updated, while the other properties are untouched.

Solution 4:

skillet.person.name.first = "blah"
skillet.person.name.last = "ha"

or

skillet.person.name = {first : "blah", last : "ha"}

Solution 5:

As @ramon-diogo wrote with ES7+

I like to update nested values like:

let user = {
    name: {
        first: 'john',
        last: 'smith'
    },
    age: 18,
    city: 'new york'
}

const age = 20;

user = {...user, age}

console.log(user.age)
// output: 20


const newData ={
    age: 22,
    city: 'san francisco'
};

user = {...user,...newData}

console.log(user.name.first)
// output: john
console.log(user.age)
// output: 22
console.log(user.city)
// output: 'san francisco'