개체 참조 및 복사

객체를 복사하면 '참조에 의해' 저장된다.

 

객체에 할당된 변수는 객체 자체가 아니라 '메모리의 주소' 즉 '참조'를 저장한다.

 

다음 코드를 살펴보자.

 

const test = {
  a: 1,
  b: 2,
  c: 3
};

let test2 = test;

delete test2.c;

console.log(test2);
console.log(test);

 

다음과 같이 test 객체의 값을 test2로 복사한 후 test2.c의 값을 delete 시켰다.

 

그리고 test2와 test를 각각 찍어보자.

 

같은 값이 나옴

 

test2의 값을 할당할 때 있는 그대로 값을 복사하는 것이 아니라 메모리의 주소를 참조하기 때문에 test2의 데이터를 변경하면 test의 데이터에도 영향을 끼친다.

 

 

 

 

객체 변수가 복사되면 참조는 복사되지만 객체 자체는 복제되지 않는다.

 

 

 

만약 값이 같은, 하지만 완전히 다른 새로운 객체를 생성하고 값을 할당하기 위해서는 기본 객체의 구조를 복제해야한다.

 

const test = {
  a: 1,
  b: 2,
  c: 3
};

let test3 = {};

for (let i in test) {
  test3[i] = test[i];
}

delete test3.c;

console.log(test3);
console.log(test);

서로 다른 값을 가진다.

 

그런데 이러한 for문을 통한 복사가 얕은 복사라는 코멘트를 보게 되었다.

 

얼핏봤을 때에는 그렇지 않은 듯 보이는데...

 

예제 코드를 하나 더 생성해 보았다.

 

const test = {
  a: 1,
  b: 2,
  c: 3,
  d: {
    e: 5
  }
};

let test2 = {};

for (let i in test) test2[i] = test[i];

test2.d.e = 'test';

console.log(test);
console.log(test2);

'e'의 값이 동일하게 변한다.

 

 

어째서 저러한 결과가 나타나는지는 따로 공부를 해봐야할 듯 싶다.

 

 

 

 

 

그렇다면 자바스크립트에서 깊은 복사를 하기위해선 어떤 방법을 사용해야할까?

 

 

단순한 방법으로 는 JSON문법을 사용하는 것이 있다.

 

갑자기 왠 JSON? 

 

다음과 같이 작성하였을 경우 내가 원하는 가장 완벽한 결과를 얻을 수 있었다.

 

const test = {
  a: 1,
  b: 2,
  c: 3
};

let test4 = JSON.parse(JSON.stringify(test));

delete test4.c;

console.log(test4);
console.log(test);

서로 다른 값을 가진다.

 

 

JSON.stringify(obj)을 통해 객체를 문자열로 변환시키면 단순하게 값을 치환하는 것이 아니라 완전히 새로운 객체로 생성하게된다고 한다.

 

멀쩡한 객체를 JSON으로 사용할 순 없으니 다시 JSON.parse(obj)를 통해 객체화 시켜준다.

 

 

 

얼핏보면 멀쩡한 객체를 JSON으로 만들고 다시 객체로 만드는, 의미 없어보이는 코드에 이렇게 깊은 의미가 담겨져있었다.