[JavaScript] Object.assign에 대한 이해

Object.assign을 이용해서 객체를 합치는 것이 가능하다. 또한 합칠 때는 2개의 객체가 같은 프로퍼티를 가지고 있다면 그 값을 덮어쓰기 해주며, 객체의 복제에서도 사용될 수 있다. Object.assign는 폼(form)등에 빈번히 이용되므로 볼 수 있는 기회가 많아 어떻게 처리가 되는지 이해해둘 필요가 있다. 여기서는 Object.assign()기본 조작과 폼의 값을 유지의 예를 이용해 설명하도록 하겠다.

 

1. 오브젝트를 합친다.

---

2개의 객체를 준비하여 Object.assign으로 합치면 어떠한 결과가 나타나는지 확인하자.

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

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

console.log(target)
console.log(source)
console.log(returnedTarget)

실행하면 아래의 결과가 된다. Object.assign()의 첫 번째 인수의 target은 source가 합쳐지지만, source의 내용은 변경되지 않는다. 또한, Object.assign()의 리턴값의 returnedTarget에는 합쳐진 객체가 들어가 있다는 것을 알 수 있다.

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

Object.assing의 리턴값은 target이라는 것을 알 수 있다.

 

2. 같은 프로퍼리를 가지는 오브젝트를 합치는 경우

---

target과 source에 b라는 같은 프로퍼티를 가지고 있는 경우에 어떠한 결과가 될지 살펴보자.

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

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

console.log(target)
console.log(source)
console.log(returnecTarget)

target의 프로퍼티 b는 source의 프로퍼티 b로 덮어써진다는 것을 알 수 있다.

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

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

---

3개의 객체가 들어있는 객체를 준비하자.

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

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

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

emplyee = {
    firstName: 'David',
    lastName: 'Cameron'
}

Object.assign(emplyees[1],emplyee);

실행결과는 다음과 같다.

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

 

4. Object의 복사 (클론)

---

Object.assign은 객체의 복사에도 빈번히 사용된다.

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

 

5. 인수가 여러 개인 경우

---

여기 까지는 Object.assign의 인수가 target과 source뿐인 경우를 보았다. Object.assign에서는 여러 개의 인수를 합치는 것이 가능하다.

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' }

4개의 인수도 합칠 수 있는지 확인해보자.

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

let user_id = {
  id: 1,
};

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

let tel = {
  tel: "090-1111-1111",
};

user = Object.assign(user, user_id, email, tel);
//結果
{
  username: 'John',
  id: 1,
  email: 'john@example.com',
  tel: '090-1111-1111'
}

아래와 같이 추가한 객체에 같은 키가 들어 있는 경우는 어떤 키가 보존되는지 확인해보자. 마지막으로 추가한 객체로 덮어씌어진다는 것을 알 수 있다.

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);
//결과
{ id: 3 }

 

6. Object.assign을 사용한 예(form)

---

어떨 때 Object.assign를 사용하면 좋을까라는 의문이 있을 것이라고 생각되므로 입력 폼의 값을 유지하는 form 객체를 사용하여 설명하도록 하겠다.

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

입력 폼에 값이 들어오고 이를 input객체로 받는다.

const input = {
    firstName: 'John Doe'
}

form 객체를 input 객체로 덮어쓰는 경우에 Object.assign을 이용하면 아래와 같이 firstName의 값이 덮어씌어진 것을 알 수 있다.

Object.assign(form, input)

//결과
{ firstName: 'John Doe', lastName: null }

Object.assign을 사용하지 않고도 아래와 같이 firstName의 값을 변경할 수 있다. 이러한 심플한 예로는 Object.assign을 사용하는 이점을 알기 어렵다고 생각된다.

form.firstName = input.firstName;

방금의 예와 달리 form의 요소가 약간 복잡하게 된 경우에 Object.assign을 이용하는 코드가 심플하다는 것을 알 수 있다.

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
}

또한 폼에 주소와 관련된 값이 address이라는 객체에 보존되어 있는 경우에도 Object.assign을 사용하여 form의 값을 덮어쓸 수 있다.

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
}

---

참고자료

qiita.com/SE-studying-now/items/ecdbc0317ba1806aed61

reffect.co.jp/html/javascript-object-assign