Object.assign()

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 (ECMA-262) The definition of 'Object.assign' in that specification.	Living Standard
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Object.assign' in that specification.	Standard	초기 정의.

브라우저 호환성

BCD tables only load in the browser