객체 복사 문제점

admin 식별자를 추가해 네임을 park로 복사 후 변경 시
let admin = user;
admin.name = "park";

console.log(admin.name); 출력 시 "park" 이라고 제대로 작동
하지만, console.log(user.name); 출력 시 "john"이 아닌 "park"으로 출력이 된다.
이것이 객체 복사의 문제점이다.

object 복사

• object의 값을 복사할 때는 대상 전체가 아닌 object 내 주소 값만 복사되는 문제 발생
• 가리키는 대상 전체를 복사하는 방법은 얕은 복사(Shallow copy), 깊은 복사(Deep copy)를 통해 가능

user_1(user)을 이용해 user_2(admin)를 복사 시 (위 코드 예제 참고)

let admin = user;
admin.name = "park";

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

user_1(user)의 이름을 수정하지 않았는데 john이 아닌 park으로 뜨는 이유는
admin 객체를 복사 하면서 user의 name:"john" 과 age:"27"이 주솟값을 통해 변경되었다.

❌여기서! admin 객체를 복사해서 다른 이름과 나이값을 입력하면 
새로운 주소값에 저장되는 시스템인줄 알았는데 아니였다!

💻이 문제를 해결할수 있는 복사 방법은 얕은 복사(Shallow copy), 깊은 복사(Deep copy) 

얕은 복사 (Shallow copy)

1. 반복문 for 문을 통한 객체 복사

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

3. ES6에서부터 지원하는 전개 연산자(Spread Operator)를 이용한 복사

얕은 복사 문제점

user라는 object에 또 다른 object 추가 시 얕은 복사 문제점이 생긴다.
admin_obj=Object.assgin({})을 이용하여 사이즈의 무게 증가와 키의 감소를 입력 시
admi_obj로 추가한 값이 기존 user 주솟값을 통해 변경되었다.(객체 복사 문제점과 동일)

❌user와 admin_obj의 object(name, age)는 각각 다른 주솟값을 통해 저장되었지만
추가된 object(height, wegiht)은 user 주소값을 통해 변경되었다.

💻 이 문제를 해결하기 위해 깊은 복사 (Deep copy) 2가지 방법이 있다.

깊은 복사 (Deep copy)

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

2. JOSN 객체를 이용한 깊은 복사, stringify는 객체를 문자열로 변환하는데 이때 원본 객체와의 참조가 끊김

JSON(객체)를 stringify로 쓰면 문자열로 바꿔줌(object -> string)
다시 parse 함수를 통해 string -> js object로 바꿔준다.

❓왜 도대체 이런 행위를 하는가?

단계적으로 오브젝트가 있더라도 새로운 object로 만들어준다.
즉, stringify에서 문자열로 바꿔주고 함수를 통해 또 문자열이 js object 바꿔주는 과정에서
새로운 height,weight의 할당량을 만들어준다.

console.log(admin.sizes.height);
console.log(user.sizes.height);

181
180

추가된 object의 할당량이 만들어져 출력이 된 것을 볼 수 있다.

Jonna 어려웠고 이해하고 정리하는데도 시간이 오래 걸렸지만.. 해냈다