object.assign(target, sources)

객체를 합치거나 합칠 때 2개의 객체가 같은 프로퍼티를 가지고 있다면 그 값을 덮어쓰기 해주며, 객체의 복제에서도 사용할 수 있음.

(object.assign은 폼(form) 등에 빈번히 이용됨)

 

1. 오브젝트를 합치기

const target = {a: 1, b: 2}
const sources = {c: 3, d: 4}

const returnedTarget = Object.assign(target, sources);

console.log(target); // { a: 1, b: 2, c: 3, d: 4 }
console.log(sources); // { c: 3, d: 4 }
console.log(returnedTarget); // { a: 1, b: 2, c: 3, d: 4 }

2. 같은 프로퍼티를 가지는 오브젝트 합치기

const target = { a: 1, b: 2 }
const sources = { b: 3, d: 4 }

const returnedTarget = Object.assign(target, sources);

console.log(target); // { a: 1, b: 3, d: 4 }
console.log(sources);// { b:3, d: 4 }
console.log(returnedTarget); // { a: 1, b: 3, d: 4 }

3. 오브젝트 배열 요소를 갱신하기

employees = [
  {
    firstName: 'John',
    lastName: 'Doe',
  },
  {
    firstName: 'David',
    lastName: 'Hue',
  },
  {
    firstName: 'Jack',
    lastName: 'Daniel',
  },
];

employee = {
  firstName: 'Davie',
  lastName: 'Cameron',
}

Object.assign(employees[1], employee); 

// [
//     { firstName: 'John', lastName: 'Doe' },
//    { firstName: 'David', lastName: 'Cameron' },
//    { firstName: 'Jack', lastName: 'Daniel' },
// ]

4. Object의 복사 (클론)

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

5. 여러 개의 인수 합치기

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); // { username: 'John', id: 1, email: 'john@example.com' }

 

 

 

 

Object.assgin을 사용한 예(form)

 

const form = {
  firstName: null,
  lastName: null
}

const input = {
  firstName: 'John Doe'
}

Object.assign(form, input); // { firstName: 'John Doe', lastName: null }
form.firstName = input.firstName; // Object.assign 대신 사용해도 동일한 값 출력

 

심화

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

const address = {
  Address: {
    Prefeature: 'Tokyo',
    address_1: 'Setagaya-ke',
    address_2: 'kyoudoul'
  }
}

Object.assign(form, address);
console.log(form);

// {
//    firstName: null,
//    lastName: null,
//    zipCode: null,
//    Address: {
//      Prefeature: 'Tokyo',
//      address_1: 'Setagaya-ke',
//      address_2: 'kyoudoul'
//    },
//    Phone: null
//  }