객체 복사 ( Object.assign (), $.extend() )

 

1. Object.assign() 

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

방법 : Object.assign(target,... sources)

• target 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체
• ...sources 타겟 오브젝트에 병합
• 리턴값으로 타겟 오브젝트를 반환

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

const obj1 = {a:1};
const obj2 = {b:2};
const obj3 = {c:3};
const newObj = Object.assign( {}, obj1, obj2, obj3 );
console.log(newObj); // {a: 1, b: 2, c: 3}

const obj1 = {a:1};
const obj2 = {b:2};
const obj3 = {c:3};
const newObj = Object.assign( obj1, obj2, obj3 );
console.log(newObj); // {a: 1, b: 2, c: 3}
console.log(obj1);   // {a: 1, b: 2, c: 3}

 

2. $.extend()

jQuery.extend( target [, object1 ] [, objectN ] )

• target 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체
• object1 합쳐질 때 기준이 될 객체
• objectN 기준 객체에 합쳐질 추가 객체

jQuery.extend([deep ], target, object1 [, objectN ] )  : 깊은 복사

• deep true 라면, 깊은 수준 복사가 됩니다.
• target 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체
• object1 합쳐질 때 기준이 될 객체
• objectN 기준 객체에 합쳐질 추가 객체

오브젝트 a와 b를 합치고 싶은 경우

const a = {
  id: 1,
  name: 'A'
};

const b = {
  name: 'B',
  hobby: 'football'  
};

$.extend(a, b);
console.log(a);

// 결과:
// {
//    id: 1,
//    name: "B",
//    hobby: "football"
// }

 

$.extend(a, b)를 실행하면 a에 b를 합쳐 줍니다. 같은 프로퍼티가 존재한다면 b의 값으로 덮어쓰기를 하며 b에 있는 프로퍼티가 새로운 값이라면 추가를 합니다. 그리고 extend() 함수는 파라미터로 넣을 오브젝트의 개수 제한이 없습니다.

const a = {
  id: 1,
  name: 'TAM'
};


const b = {
  name: 'TAM-new',
  hobby: 'football'  
};


const c = {
  name: 'TAM-new-new',
  job: 'designer'
};


$.extend(a, b, c);
console.log(a);

// 결과:
// {
//    id: 1,
//    name: "TAM-new-new",
//    hobby: "football",
//    job: "designer"
// }

 

이런 식으로 무제한으로 파라미터를 설정 할 수 있으며 $.extend(a, b, c)를 실행할 경우 a의 값에 b를 합치며 그 값에 c를 합칩니다. 합쳐진 결과 값이 직접적으로 a 오브젝트(첫번째 파라메터)에 반영이 되므로 첫번째 파라메터가 변하는걸 원치 않는 경우에는 첫번째 파라메터를 {}으로 지정 한 뒤 리턴값을 새로운 오브젝트에 넣어주면 됩니다.

const a = {
  id: 1,
  name: 'TAM'
};


const b = {
  name: 'TAM-new',
  hobby: 'football'  
};


var newobject = $.extend({}, a, b);

 

마지막으로 프로퍼티가 오브젝트일 경우를 알아보겠습니다.

 

const a = {
  style: {
     top: 100,
     left: 200,
     width: 300
  },
  duration: 1000
};


const b = {
  style: {
    height: 400
  }
};

$.extend(a, b);
console.log(a);

// 결과:
// {
//   style: {
//     height: 400
//   },
//   duration: 1000
// }

 

프로퍼티가 오브젝트일 경우 a.style.top, a.style.left, a.style.width는 모두 지워지고 b.style.height만 덮어 씌워지게 됩니다.

밑의 계층까지 합치고 싶은 경우에는 extend()의 첫 번째 파라미터에 true를 넣으면 됩니다.

const a = {
  style: {
     top: 100,
     left: 200,
     width: 300
  },
  duration: 1000
};


const b = {
  style: {
     height: 400
  }
};


$.extend(true, a, b);
console.log(a);

// 결과:
// {
//   style: {
//      top: 100,
//      left: 200,
//      width: 300
//      height: 400
//    },
//    duration: 1000
//  }

 

출처 : https://y-chyachya.tistory.com/15