[JavaScript] 참조에 의한 객체 복사

객체가 원시데이터와 다른 점은 원시데이터는 값 그대로를 저장하고 복사하는 반면

객체는 참조에 의한 복사로 기존 객체에 저장된 값을 참조할 수 있는 값이 복사된다는 것이다.

변수 fruit의 값을 복사한 변수 red.

예를 들어 변수를 복사할 때 메모리는 fruit라는 변수와 그에 대한 값 apple을 한 공간에 저장하고

복사된 변수 red와 값 apple 또한 메모리의 한 공간에 저장된다.

즉, 상자도 두개 내용물도 두개가 되는 것.

---

apple이 담긴 fruit 상자

apple이 담긴 red 상자

---

하지만 객체는 다르다. 애초에 생성될 때 변수 fruit는 메모리의 어느 공간에 저장되고

name:apple이 되는 객체와 프로퍼티를 참조할 수 있는 값이 저장된다.

즉, 변수 자체에 객체가 담겨있는 게 아니라 변수는 단지 객체에 접근할 수 있는 권한과 자격을 가지는 것.

따라서 객체를 복사하게 되면 해당 변수의 권한과 자격을 복사하는 것과 같아서

하나만 존재하는 객체에 두 변수가 모두 접근할 수 있게 되는 개념이다.

객체 fruit의 값을 참조해 복사된 변수 객체 red

객체 복사는 상자는 두개지만 내용물로 담을 수 있는 건 하나라고 생각하면 된다.

apple을 담아갈 수 있는 fruit 상자

apple을 담아갈 수 있는 red 상자

 

그래서 같은 객체를 참조하고 있는 변수 중 누구라도 객체의 값을 변경하면 다른 변수도 그 값을 받아온다.

red의 점표기법으로 값을 바꿨지만 fruit도 동일하게 바뀜.

---

참조에 의한 객체 비교

객체를 복사하면 같은 객체를 참조하기 때문에 비교연산자를 사용하면 당연히 true가 반환된다.

하지만 똑같이 빈 객체를 가진 두 변수는 false를 반환.

참조하는 객체가 비어있는 건 같지만 각기 다른 메모리에 저장된 객체고 두 변수는 각기 다른 객체를 참조하기 때문.

---

참조에 의한 복사가 아닌 독립된 객체로 복제하기

위처럼 객체를 복사하면 참조값이 복사되는데, 같은 프로퍼티를 가진 객체를 참조값이 아닌 독립적인 객체로 복사하려면

객체를 순환하는 메서드 for...in 혹은 Object.assign을 사용하면 된다.

 

for(... in) 반복문

---

Object.assign

Object.assign(목표 객체, obj1, obj2, obj3...objN)

• 인수로 받는 '목표 객체'에 인수로 받는 객체 obj1 ~ objN까지의 프로퍼티를 복사해 반환한다.
• 같은 프로퍼티 키를 가진 객체가 존재하면 값을 변경한다.