Object.assign() 메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다.

구문

Object.assign(target, ...sources)

매개변수

target
대상 객체.
sources
하나 이상의 출처 객체.

반환 값

대상 객체.

설명

동일한 키가 존재할 경우 대상 객체의 속성은 출처 객체의 속성으로 덮어쓰여집니다. 후에 출처의 속성은 이전의 출처의 속성과 유사하게 덮어씁니다.

Object.assign() 메소드는 열거할 수 있는 출처 객체의 속성만 대상 객체로 복사합니다. 이 메소드는 출처 객체의 [[Get]], 대상 객체의 [[Set]] 을 사용하여 getter 와 setter 를 호출합니다. 따라서 이는 속성을 단순히 복사하거나 새롭게 정의하는 것이 아니라 할당하는 것입니다. 병합 출처가 getter 를 포함하는 경우 프로토타입으로 새로운 속성을 병합하는 것이 적절하지 않을 수 있습니다. 프로토타입으로 속성의 열거성을 포함한 속성의 정의를 복사하려면 대신 Object.getOwnPropertyDescriptor()Object.defineProperty() 를 사용해야합니다.

String 과 Symbol 속성 모두가 복사됩니다.

에러가 발생할 수 있는 상황에서는(예, 프로퍼티가 쓰기 불가인 경우), TypeError 가 발생하며, 에러가 발생하기 전에 속성이 추가되었다면 target 객체는 변경될 수 있습니다.

Object.assign() 메소드는 null 또는 undefined 출처 값에 대해서는 오류를 던지지 않음을 유의하세요.

예시

객체 클로닝

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

깊은 클로닝에 대한 주의사항

깊은 클로닝에 대해서, Object.assign() 은 속성의 값을 복사하기때문에 다른 대안을 사용해야합니다. 출처 값이 객체에 대한 참조인 경우, 참조 값만을 복사합니다.

function test() {
  'use strict';

  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
  
  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
  
  obj2.b.c = 3; // obj1, obj2 모두에 영향을 줌
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
  
  // 깊은 클론
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
}

test();

객체 병합

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 대상 객체 자체가 변경됨.

같은 속성을 가진 객체 병합

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

속성은 파라미터 순서에서 더 뒤에 위치한 동일한 속성을 가진 다른 객체에 의해 덮어쓰입니다.

심볼형 속성 복사

const o1 = { a: 1 };
const o2 = { [Symbol('foo')]: 2 };

const obj = Object.assign({}, o1, o2);
console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
Object.getOwnPropertySymbols(obj); // [Symbol(foo)]

프로토타입 체인의 속성과 열거 불가형 속성은 복사 불가

const obj = Object.create({ foo: 1 }, { // foo 는 obj 의 프로토타입 체인상에 있음.
  bar: {
    value: 2  // bar 는 열거 불가능한 속성임.
  },
  baz: {
    value: 3,
    enumerable: true  // baz 는 자체 열거형 속성임.
  }
});

const copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }

원시 자료형은 객체로 래핑

var v1 = 'abc';
var v2 = true;
var v3 = 10;
var v4 = Symbol('foo');

var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// 원시 자료형은 래핑되지만, null 과 undefined 는 무시됨.
// 스트링 래퍼만 자체 열거형 속성을 가짐을 유의.
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

예외에 의해 진행중인 복사 작업 중단

var target = Object.defineProperty({}, 'foo', {
  value: 1,
  writable: false
}); // target.foo 는 읽기 전용 속성

Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
// TypeError: "foo" is read-only
// target.foo 에 할당할 때 예외 발생

console.log(target.bar);  // 2, 첫 번째 출처 객체는 성공적으로 복사되었음.
console.log(target.foo2); // 3, 두 번째 출처 객체의 첫 번째 프로퍼티도 성공적으로 복사되었음.
console.log(target.foo);  // 1, 여기에서 예외가 발생.
console.log(target.foo3); // undefined, assign 메소드가 종료되었음, foo3 은 복사되지 않음.
console.log(target.baz);  // undefined, 세 번째 출처도 복사되지 않음.

접근자 복사

var obj = {
  foo: 1,
  get bar() {
    return 2;
  }
};

var copy = Object.assign({}, obj); 
console.log(copy); 
// { foo: 1, bar: 2 }, copy.bar 의 값은 obj.bar 의 getter 의 반환 값임.

// 모든 descriptors 를 복사하는 할당 함수
function completeAssign(target, ...sources) {
  sources.forEach(source => {
    let descriptors = Object.keys(source).reduce((descriptors, key) => {
      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
      return descriptors;
    }, {});
    // 기본적으로, Object.assign 는 열거형 Symbol 도 복사함.
    Object.getOwnPropertySymbols(source).forEach(sym => {
      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
      if (descriptor.enumerable) {
        descriptors[sym] = descriptor;
      }
    });
    Object.defineProperties(target, descriptors);
  });
  return target;
}

var copy = completeAssign({}, obj);
console.log(copy);
// { foo:1, get bar() { return 2 } }

폴리필

ES5 에는 심볼이 없기 때문에 다음 폴리필 은 심볼 속성을 지원하지 않습니다.

if (typeof Object.assign != 'function') {
  // Must be writable: true, enumerable: false, configurable: true
  Object.defineProperty(Object, "assign", {
    value: function assign(target, varArgs) { // .length of function is 2
      'use strict';
      if (target == null) { // TypeError if undefined or null
        throw new TypeError('Cannot convert undefined or null to object');
      }

      var to = Object(target);

      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];

        if (nextSource != null) { // Skip over if undefined or null
          for (var nextKey in nextSource) {
            // Avoid bugs when hasOwnProperty is shadowed
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}

명세

명세 상태 코멘트
ECMAScript Latest Draft (ECMA-262)
The definition of 'Object.assign' in that specification.
Draft  
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Object.assign' in that specification.
Standard 초기 정의.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
assignChrome Full support 45Edge Full support 12Firefox Full support 34IE No support NoOpera Full support 32Safari Full support 9WebView Android No support NoChrome Android Full support 45Edge Mobile Full support YesFirefox Android Full support 34Opera Android Full support 32Safari iOS Full support YesSamsung Internet Android Full support 5.0nodejs Full support 4.0.0

Legend

Full support  
Full support
No support  
No support

 

함께 보기

문서 태그 및 공헌자

최종 변경자: mdnwebdocs-bot,