[jQueryt] $.extend - 객체합치기, 깊은복사, 얕은복사

var objA = { "a": 1, "b": 2 };
var objB = { "c": 3, "d": 4 };
var newObj = $.extend({}, objA, objB);
console.log(objA);    // { a: 1, b: 2 }
console.log(objB);    // { c: 3, d: 4 }
console.log(newObj);  // { a: 1, b: 2, c: 3, d: 4 }

var objA = { "a": 1, "b": 2 };
var objB = { "b": 3, "c": 4 };
var newObj = $.extend({}, objA, objB);
console.log(objA);    // { a: 1, b: 2 }
console.log(objB);    // { b: 3, c: 4 }
console.log(newObj);  // { a: 1, b: 3, c: 4 } // 두 객체에 같은 속성명이 있을경우 중복된 마지막 속성명의 값으로 합쳐진다.

// 객체가 가진 값이 객체일 경우 위 예제와 같이 같은 속성명이 있는 중복된 마지막 속성명의 값(객체)으로 합쳐진다.
var objA = { "a": 1, "b":{ "b1": 100, "b2": 100 }};  
var objB = { "b": { "b2": 8000, "b3": 600}, "c" : 4 };  
var newObj = $.extend({}, objA, objB); 
console.log(objA);      
console.log(objB);   
console.log(newObj);  

var objA = { "a": 1, "b":{ "b1": 100, "b2": 100}};  
var objB = { "b": { "b2": 8000, "b3": 600}, "c" : 4 };  
var newObj = $.extend(true, {}, objA, objB); // true 옵션 (deep copy)
console.log(objA);      
console.log(objB);   
console.log(newObj);  

jQuery $.extend 함수 - true옵션에 따라 깊은복사, 얕은복사 차이 확인

var obj = { "a": { "aa": 100 }};  
var objCopy = $.extend({}, obj); // 얕은복사(shallow copy) 
objCopy.a.aa = 1000;
console.log(obj);  // obj.a.aa의 속성값도 1000으로 변경됨     
console.log(objCopy);  

// 객체가 가진 값이 객체일때 $.extend함수에서 true 옵션에 따라 깊은복사, 얕은복사가 된다.
var obj = { "a": { "aa": 100 }};  
var objCopy = $.extend(true, {}, obj); // 깊은 복사(deep copy)
objCopy.a.aa = 1000;
console.log(obj);  // obj.a.aa의 속성값은 100으로 유지됨
console.log(objCopy);