techjavascript

Object.assign()

, , ,

Object.assign()

Object.assign() 메소드는 열거할 수 있는 하나 이상의 소스 오브젝트로 부터 타겟 오브젝트로 프로퍼티를 복사하는데 사용됩니다. 그리고, 타겟 오브젝트가 반환될 것입니다.

문법

1
Object.assign(target, ...sources)

인자

target: 타겟 오브젝트
sources: 하나 이상의 소스 오브젝트

리턴값

타겟 오브젝트

설명

소스 프로퍼티와 동일한 프로퍼티의 키를 가진 타켓 오브젝트의 프로퍼티들은 소스 오브젝트의 프로퍼티로 덮어쓰기 될 것입니다.

Object.assign() 메소드는 열거할 수 있는 오브젝트의 프로퍼티들만 타겟 오브젝트로 복사합니다. 이 메소드는 소스 오브젝트 대상으로 게터를 호출하고, 타겟 오브젝트 대상으로 세터를 호출합니다.

따라서, 소스 오브젝트의 프로퍼티를 그냥 단순히 복사하거나, 새로운 프로퍼티를 생성하는 것이 아니라, 타겟 오브젝트의 프로퍼티를 게터와 세터를 이용하여 할당할 수도 있습니다. 만약, 병합되는 소스 오브젝트가 게터를 포함하고 있다면, 새로운 프로퍼티를 타겟의 프로토타입에 병합하는 것은 알맞지 않을 것입니다. 열거 가능성을 포함한 프로퍼티를 프로토타입으로 복사하기 위해서는 Object.getOwnPropertyDescriptor()와 Object.defineProperty()을 사용하시기 바랍니다.

String과 Symbol 프로퍼티 둘 다 복사될 것 입니다.

프로퍼티가 쓰기불가능(non-writable)등과 같이 만약 에러가 발생할 수 있는 상황에서는, TypeError가 발생하고 타겟 오브젝트에는 변화가 없을 것입니다.

Object.assign() 메소드는 null이나 undefiend는 반환하지 않으니 주의하세요.

예제들

객체 복제하기

1
2
3
var obj = {a: 1};
var copy = Object.assign({}, obj);
console.log(copy); // {a: 1}

깊은 복제에 대한 주의사항

깊은 복제에 대해서는 대안적인 방법을 사용할 필요가 있습니다. 왜냐하면, Object.assign()은 타겟 오브젝트에 할당을 할 때, 프로퍼티의 참조를 복사하기 때문입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function test() {
    let a = {
        b: {
            c: 4
        },
        d: {
            e: {
                f: 1
            }
        }
    }
    let g = Object.assign({}, a);
    let h = JSON.parse(JSON.stringify(a));
    console.log(g.d); // {e: {f: 1}}
    g.d.e = 32;
    console.log('g.d.e set to 32.');
    console.log(g); // {b: {c: 4}, d: {e: 32}}
    console.log(a); // {b: {c: 4}, d: {e: 32}}
    console.log(h); // {b: {c: 4}, d: {e: {f: 1}}}
    h.d.e = 54
    console.log('h.d.e set to 54');
    console.log(g); // {b: {c: 4}, d: {e: 32}}
    console.log(a); // {b: {c: 4}, d: {e: 32}}
    console.log(h); // {b: {c: 4}, d: {e: 54}}
}
test();

참조: MDN

Share