Object.assign

object.assign을 이용해서 객체를 합치는 것이 가능하다. 또한 합칠때 2개의 객체가 같은 프로퍼티를 가지고 있다면 그 값을 덮어쓰기 해주며 객체의 복제에도 사용할 수 있다.

const target1 = { a: 1, b: 2}
const target2 = { c: 3, d: 4}

const newTarget = Object.assign(target1, target2);

console.log(target1)
console.log(target2)
console.log(newTarget)

{ a: 1, b: 2, c: 3, d: 4 }
{ c: 3, d: 4 }
{ a: 1, b: 2, c: 3, d: 4 }

Object.assign()의 첫번째 인수의 target1은 target2가 합쳐지지만, target2의 내용은 변경되지 않는다.
또한, Object.assign()의 리턴값의 newTarget에 합쳐진 객체가 들어가있다. Object.assign의 리턴값은 target1이다.

const target1 = { a: 1, b: 2 }
const target2 = { b: 3, d: 4}

const newTarget = Object.assign(target1, target2);

console.log(target1)
console.log(target2)
console.log(newTarget)

{ a: 1, b: 3, d: 4 }
{ b: 3, d: 4 }
{ a: 1, b: 3, d: 4 }

target1의 프로퍼티 b는 target2의 프로퍼티 b로 덮어써진다.

2번째의 배열 객체의 lastName만을 변경하고 싶은 경우에 Object.assign을 이용할 수 있다.

people = [
  {
    firstName: 'kim',
    lastName: 'one'
  },
  {
    firstName: 'lee',
    lastName: 'two'
  }, 
  {
    firstName: 'park',
    lastName: 'three'
  }
]

changeNamePerson = {
  firstName: 'lee',
  lastName: 'second'
}

Object.assign(people[1], changeNamePerson)

[
  { firstName: 'kim', lastName: 'one' },
  { firstName: 'lee', lastName: 'two' },
  { firstName: 'park', lastName: 'three' }
]
{ firstName: 'lee', lastName: 'second' }

{ firstName: 'lee', lastName: 'second' }

object의 복사(클론)에도 사용된다.

let user = {firstName: 'John', lastName: 'Doe' };
let user_clone = Object.assign({}, user);

인수가 여러 개인경우

let user = {
  username: "John",
};

let user_id = {
  id: 1,
};

let email = {
  email: "john@example.com",
};

user = Object.assign([user, user_id, email]);

console.log(user);

객체에 같은키가 있는경우 마지막으로 추가한 객체로 덮어씌워진다.

let user = {
  id: 0,
};

let user_id_1 = {
  id: 1,
};

let user_id_2 = {
  id: 2,
};

let user_id_3 = {
  id: 3,
};

user = Object.assign(user, user_id_1, user_id_2, user_id_3);

console.log(user);

form의 요소에서 사용할경우

const form = {
    firstName: null,
    lastName: null,
    Email: null,
    zipCode: null,
    Address: null,
    Phone: null
}

const input = {
    firstName: 'John',
    lastName: 'Doe',
    Email: 'john@example.com'
}

Object.assign(form, input)

console.log(form)

{
  firstName: 'John',
  lastName: 'Doe',
  Email: 'john@example.com',
  zipCode: null,
  Address: null,
  Phone: null
}

const address = {
    Address : {
        Prefecture: 'Tokyo',
        address_1: 'Setagaya-ku',
        address_2: 'kyoudou1'
    }
}
Object.assign(form, address);
console.log(form);

{
  firstName: 'John',
  lastName: 'Doe',
  Email: 'john@example.com',
  zipCode: null,
  Address: {
    Prefecture: 'Tokyo',
    address_1: 'Setagaya-ku',
    address_2: 'kyoudou1'
  },
  Phone: null
}