object 복사

object 복사

• object의 값을 복사할 때는 대상 전체가 아닌 object 내 주소 값만 복사되는 문제 발생

• 가리키는 대상 전체를 복사하는 방법은 얕은복사(Shallow copy), 깊은 복사 (Deep copy)를 통해 가능

얕은 복사

얕은 복사란 객체를 복사할 때 원래값과 복사된 값이 같은 참조를 가리키고있는 것을 말한다.

객체안에 객체가 있을 경우 한개의 객체라도 원본 객체를 참조하고 있다면 이를 얕은 복사라고 한다.

얕은 복사의 종류

// 반복문 for문을 통한 객체 복사

let user = {
  name: "john",
  age: 23,
};

let admin = {}; // 빈 객체

for (let key in user) { // key에 user을 복사를 해라
  admin[key] = user[key];
}

admin.name = "park";

console.log(admin.name); // output : park
console.log(user.name); // output: john

// Object.assing()함수를 이용한 복사

let user_1 = {
  name: "john",
  age: 23,
};

let admin_obj = Object.assign({}, user_1);

admin_obj.name = "park";
user_1.age = 30;

console.log(admin_obj.name); // output: "park"
console.log(user_1.name); // output: "john"
console.log(admin_obj.age); // output: 23
console.log(user_1.age); //output 30

얕은 복사의 문제점

let user_2 = {
  name: "john",
  age: 23,
  sizes: {
    height: 180,
    weight: 72,
  },
};

let admin_obj_1 = Object.assign({}, user);

admin_obj_1.sizes.weight++;
--admin_obj_1.sizes.height;

console.log(admin_obj_1.sizes.weight); // output:73
console.log(admin_obj_1.sizes.height); // output:179
console.log(user.sizes.weight); //output: 73
console.log(user.sizes.height); // output: 179

• user, admin_obj_1 둘다 값이 변경된다.

• 객체 내 또 다른 객체가 있다면 복사되지 않는다.

따라서 얕은 복사에는 한계가 있기 때문에 깊은 복사를 사용해야 한다.

깊은 복사

깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.

// 재귀 함수를 이용한 깊은 객체 복사

let user = {
  name: "john",
  age: 23,
  sizes: { height:180, weight:72 },
};

function copyObj(obj) {
  let result = {};
  for (let key in obj){
    if (typeof obj[key] === "object") result[key] = copyObj(obj[key]);
    else result[key] = obj[key];
  }
  return result;
}

let admin = copyObj(user);

admin.sizes.weight++;

console.log(admin.sizes.weight);
console.log(user.siezes.weight);

// .JSon 객체를 이용한 깊은 복사, stringfy는 객체를 문자열로 변환하는데 이떄 원본 객체와의 참조가 끊김

let user = {
  name: "john",
  age: 23,
  sizes: { height:180, weight:72 },
};

// stringfy: js object -> string, parse: string -> js object

let admin_jason = JSON.parse(JSON.stringify(user));

amdin_json.sizes.weight++;
--admin_json.sizes.height;

console.log(admin_json.sizes.weight); // output: 73
console.log(admin_json.sizes.height); // output: 179

console.log(user.sizes.weight); // output: 72
console.log(user.sizes.height); // output: 180