JavaScript Object.assign() 사용방법

1. JavaScript Object.assign() 무엇인가?

다음은 Object.assign() 메서드의 구문을 보여줍니다.

Object.assign(target, ...sources)

Object.assign()은 소스 개체에서 대상 개체로 모든 열거 가능한 속성과 자체 속성을 복사합니다. 대상 객체를 반환합니다.

Object.assign()은 소스 개체의 getter와 대상의 setter를 호출합니다. 새 속성을 복사하거나 정의하지 않고 속성만 할당합니다.

 

2. Object.assign()을 사용하여 객체 복제하기

다음 예제에서는 Object.assign() 메서드를 사용하여 개체를 복제합니다.

let widget = {
    color: 'red'
};

let clonedWidget = Object.assign({}, widget);

console.log(clonedWidget);

Output:

{ color: 'red' }

Object.assign()은 딥 클론이 아닌 얕은 클론(shallow clone)만 전달합니다.

 

3. Object.assign()을 사용하여 객체 병합하기

Object.assign()은 소스 개체의 모든 속성으로 구성된 속성이 있는 대상 개체로 소스 개체를 병합할 수 있습니다. 예를 들어:

let box = {
    height: 10,
    width: 20
};

let style = {
    color: 'Red',
    borderStyle: 'solid'
};

let styleBox = Object.assign({}, box, style);

console.log(styleBox);

Output:

{
    height: 10,
    width: 20,
    color: 'Red',
    borderStyle: 'solid'
}

소스 개체에 동일한 속성이 있는 경우 나중 개체의 속성이 이전 개체를 덮어씁니다.

let box = {
    height: 10,
    width: 20,
    color: 'Red'
};

let style = {
    color: 'Blue',
    borderStyle: 'solid'
};

let styleBox = Object.assign({}, box, style);

console.log(styleBox);

Output:

{
    height: 10,
    width: 20,
    color: 'Blue',
    borderStyle: 'solid'
}

 

4. 요약

• Object.assign()은 소스 개체의 열거 가능한 고유 속성을 대상 개체에 할당합니다.
• Object.assign()을 사용하여 개체를 복제하거나 개체를 병합할 수 있습니다.

 

 

 

Reference: https://www.javascripttutorial.net/es6/javascript-object-assign/