Object/Array copy

- 일반밸류

/* string copy, 원본과 복사된 값의 간섭이 없다 */
var str = "Tomorrow is on Friday";
var str2 = str;
str = "Tomorrow is not on Saturday";

console.log(str);   //  Tomorrow is not on Saturday
console.log(str2);   //  Tomorrow is on Friday

- 객체 복사

var obj = {name: "john", age: 20, school: "seneca"};
var objNested = {
  name: "john",
  age: 20, 
  school: {name: "seneca", course: "computer", class: ["tue", "thu", "fri"]}, 
  family: ["dad","mom","brother"]
};

/* 객체복사 shallow copy 원본이 같이 변화한다  */
var obj2 = obj;
obj2.name = "tom";
console.log(obj);   //  {name: "tom", age: 20, school: "seneca"}
console.log(obj2);   //  {name: "tom", age: 20, school: "seneca"}

obj.age = 30;
console.log(obj);   //  {name: "tom", age: 30, school: "seneca"}
console.log(obj2);   //  {name: "tom", age: 30, school: "seneca"}

/* spread(...)를 통한 복사 - Deep Copy */
var obj2 = {...obj};
obj.name = "tom";
consol.log(obj);   //  {name: "tom", age: 20, school: "seneca"}
console.log(obj2);   //  {name: "john", age: 20, school: "seneca"}

var obj3 = {...obj, name: "park"};   // {name: "park", age: 20, school: "seneca"}

var objNested2 = {...objNested};   //  nested 값이 같이 변경됨, 진정한 Deep Copy 아니다
objNested.school.name = "humber";
objNested.family[0] = "father";

/* Object.assign({}, obj) - Deep Copy */
var obj2 = Object.assign({}, obj);
obj.name = "tom";
consol.log(obj);   //  {name: "tom", age: 20, school: "seneca"}
console.log(obj2);   //  {name: "john", age: 20, school: "seneca"}

var objNested2 = Object.assign({}, objNested);   //  nested 값이 같이변경됨, 진정한 Deep Copy아니다
objNested.school.name = "humber";
objNested.family[0] = "father";

/* JSON parsing - Deep Copy */
var obj2 = JSON.parse(JSON.stringify(obj));
obj.name = "tom";
consol.log(obj);   //  {name: "tom", age: 20, school: "seneca"}
console.log(obj2);   //  {name: "john", age: 20, school: "seneca"}

var objNested2 = JSON.parse(JSON.stringify(objNested));  // objNested2의 nested 값은 변화없음, 진정한 Deep Copy
objNested.school.name = "humber";
objNested.family[0] = "father";

/* jQuery - Deep Copy */
var obj2 = $.extend(true, {}, obj);
obj.name = "tom";
consol.log(obj);   //  {name: "tom", age: 20, school: "seneca"}
console.log(obj2);   //  {name: "john", age: 20, school: "seneca"}

var objNested2 = $.extend(true,{},objNested);   // objNested2의 nested 값은 변화없음, 진정한 Deep Copy
objNested.school.name = "humber";
objNested.family[0] = "father";

- 배열복사

var arr = ["baseball", "soccer", "basketball", "ballyball", "handball"];
var arrNested = ["baseball", "soccer", "basketball", 
		{america: "football", canada: "hockey", 
    	north: ["america", "canada", "mexico"], 
      south: {win:"brazil", lose:"germany"}
    },
  	"handball", [32,54,30,20], ["add", "substract", "multiple", "devide"]
  ];

/* 배열복사, 원본도 같이 변한다 - shallow copy */
var arr2 = arr;
arr[0] = "softball";
console.log(arr);   //  ["softball", "soccer", "basketball", "ballyball", "handball"]
console.log(arr2);   //  ["softball", "soccer", "basketball", "ballyball", "handball"]

/* Array.from() - Deep Copy */
var arr2 = Array.from(arr);
arr[0] = "softball";
console.log(arr);   //  ["softball", "soccer", "basketball", "ballyball", "handball"]
console.log(arr2);   //  ["baseball", "soccer", "basketball", "ballyball", "handball"]

var arrNested2 = Array.from(arrNested);   //  nested2 값이 같이 변경됨, 진정한 Deep Copy 아니다
arrNested[3].america = "superball";
arrNested[3].north[1] = "CANADA";
arrNested[3].south.lose = "spain";
arrNested[5][3] = 300;
arrNested[6][2] = "minus"
console.log(arrNested);
console.log(arrNested2);

/* slice()사용, splice()는 원본이 []가 됨 - Deep Copy */
var arr2 = arr.slice(0);
arr[0] = "softball"
console.log(arr);   //  ["softball", "soccer", "basketball", "ballyball", "handball"]
console.log(arr2);   //  ["baseball", "soccer", "basketball", "ballyball", "handball"]

var arrNested2 = arrNested.slice(0);   //  nested2 값이 같이 변경됨, 진정한 Deep Copy 아니다
arrNested[3].america = "superball";
arrNested[3].north[1] = "CANADA";
arrNested[3].south.lose = "spain";
arrNested[5][3] = 300;
arrNested[6][2] = "minus"
console.log(arrNested);
console.log(arrNested2);

/* spread 사용 - Deep Copy */
var arr2 = [...arr];
arr[0] = "softball"
console.log(arr);   //  ["softball", "soccer", "basketball", "ballyball", "handball"]
console.log(arr2);   //  ["baseball", "soccer", "basketball", "ballyball", "handball"]

var arrNested2 = [...arrNested];   //  nested2 값이 같이 변경됨, 진정한 Deep Copy 아니다
arrNested[3].america = "superball";
arrNested[3].north[1] = "CANADA";
arrNested[3].south.lose = "spain";
arrNested[5][3] = 300;
arrNested[6][2] = "minus"
console.log(arrNested);
console.log(arrNested2);

/* map() 사용 - Deep Copy */
var arr2 = arr.map(x => x);
arr[0] = "softball"
console.log(arr);   //  ["softball", "soccer", "basketball", "ballyball", "handball"]
console.log(arr2);   //  ["baseball", "soccer", "basketball", "ballyball", "handball"]

var arrNested2 = arrNested.map(x => x);   //  nested2 값이 같이 변경됨, 진정한 Deep Copy 아니다
arrNested[3].america = "superball";
arrNested[3].north[1] = "CANADA";
arrNested[3].south.lose = "spain";
arrNested[5][3] = 300;
arrNested[6][2] = "minus"
console.log(arrNested);
console.log(arrNested2);

/* JSON parsing - Deep Copy */
var arr2 = JSON.parse(JSON.stringify(arr));
arr[0] = "softball"
console.log(arr);   //  ["softball", "soccer", "basketball", "ballyball", "handball"]
console.log(arr2);   //  ["baseball", "soccer", "basketball", "ballyball", "handball"]

var arrNested2 = JSON.parse(JSON.stringify(arrNested));   //  nested2 값 변경없음, 진정한 Deep Copy
arrNested[3].america = "superball";
arrNested[3].north[1] = "CANADA";
arrNested[3].south.lose = "spain";
arrNested[5][3] = 300;
arrNested[6][2] = "minus"
console.log(arrNested);
console.log(arrNested2);

/* jQuery - Deep Copy */
var arr2 = $.extend(true,[],arr);
arr[0] = "softball"
console.log(arr);   //  ["softball", "soccer", "basketball", "ballyball", "handball"]
console.log(arr2);   //  ["baseball", "soccer", "basketball", "ballyball", "handball"]

var arrNested2 = $.extend(true,[],arrNested);   //  nested2 값 변경없음, 진정한 Deep Copy
arrNested[3].america = "superball";
arrNested[3].north[1] = "CANADA";
arrNested[3].south.lose = "spain";
arrNested[5][3] = 300;
arrNested[6][2] = "minus"
console.log(arrNested);
console.log(arrNested2);