얕은 복사 & 깊은 복사?

• 정의는 객체를 프로퍼티 값으로 갖는 객체의 경우 얕은 복사는 한 단계까지만 복사,
  깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 말한다.

=> 단순 정의만 놓고 봤을 땐 이해가 잘 되지 않았다.

얕은 복사의 예시

var obj={ x:1 };
var obj2 = obj; //{x:1}

console.log(obj === obj2) // true

obj.x = 2;

console.log(obj) //{x:2}
console.log(obj2)// {x:2}

1. 객체를 변수에 할당하게 되면 변수는 실질적으로 그 객체 값이 저장되어 있는 메모리를 가리키는 참조메모리의 주소가 저장되어있다. 위의 경우는 obj의 참조메모리 주소를 그대로 복사한다. 따라서 복사하여 === 비교연산자를 사용하여 비교하면 true를 리턴한다.

2. 또한, 변수 obj가 가리키는 참조 메모리가 가리키는 객체값이 변경되면 당연히 obj를 복사한 obj2의 값 또한 변경될 것이다. 왜냐! obj와 obj2가 가리키고 있는 참조 메모리가 가리키고 있는 객체 값이 저장되어 있는 메모리는 같기 때문이다.

=> 그래서 초기값이 변경되어 복사한 값이 변경되면 얕은 복사 라고 부른다!

깊은 복사의 예시

var obj = {x:1};
var obj2 = JSON.stringify(obj); // {"x":1}
obj.x = 2;
console.log(obj); // {x:2} 
console.log(obj2); // {"x":1}

1. 위 코드처럼 깊은 복사는 초기값을 변경해도 복사한 객체의 값이 변경 되지 않는다! 왜냐?

=> obj가 가리키고 있는 참조 메모리가 가리키고 있는 객체 값의 메모리와 obj2가 가리키고 있는 참조 메모리가 가리키고 있는 객체 값의 메모리가 완전 다르기 때문이다..!

다른 예시를 들어보겠다!

var arr = [1,2,5,4,3];
var arr2 = [...arr];
var arr3 = arr.slice();

console.log(arr); // [1,2,5,4,3]
console.log(arr2); // [1,2,5,4,3]
consnole.log(arr3); // [1,2,5,4,3]
console.log(arr===arr2); // false
console.log(arr2===arr3); // false
console.log(arr===arr3); //false

1. 위 코드는 하나는 arr을 arr2에 spread operator를 이용해 복사한 것이고, 하나는 arr을 arr3에 slice 배열 베소드를 이용해 복사한 것이다.

2. 각각의 변수를 console에 찍어보면 모두 arr의 배열과 똑같은 값이 나온다. 당연하다. 복사했으니까. 근데 비교연산자를 사용하여 console에 찍어보면 모두 false를 반환한다.
   왜일까?!!!

=> 복사한 값이 초기 값이 저장되어 있는 메모리가 아닌 아예 각각 다른 메모리에 저장되어있기 때문이다. 그래서 arr이라는 배열에 변경요소가 있어도 복사한 배열에는 영향을 미치지 않는다!

회고

• 딥다이브 스터디를 진행하면서 지금까지 코딩하면서 떴던 에러들, 왜 안되지? 했던 것들의 이유를 하나하나씩 알게 되는 기분이라 속이 뻥 뚫린다..