참조형 자료

데이터타입

원시형 자료와 참조형 자료

Primitive type vs Reference type

📝 얕은 복사 vs 깊은 복사
지난 번 shallow copy 와 deep copy 에 포스트로 정리하였다.
생각의 흐름을 일일이 따라 정리한지라 퇴고가 필요하다고 생각했는데,
원시형 자료와 참조형 자료에 대한 정리가 우선되어야 할 것 같았다.
직접 그림으로 작업하여 정리해보았다.

⁍ Primitive type data

number, string, undefined, null 등이 있으며,
원시형 자료의 복사는 값 자체를 복사한다.

const giftA = 'present';
const giftB = giftA;

console.log(giftB); // 'present';
console.log(giftA===giftB); // true;

giftA와 giftB를 엄격 비교하면 둘은 '같다'(true)로 판단된다.
giftA는 원시형 자료이고, 이를 복사하면 일종의 deep copy 같이 값 자체를 clone한다. 동일한 물건을 사와 넣는 것이다. 안에 직접 든 내용물이 같고, 우리가 직접 확인할 수 있다.

여기서 우리가 사물함 넣어둔 'present'를 꺼내온다고 생각해보자. 변수 giftA에 저장한 데이터 값을 삭제하는 셈이라고 생각한다면,
giftB의 데이터는 아무런 영향을 받지 않는다. 동일한 물건을 사 넣어뒀기 때문이다.

the same과 same의 차이..

⁍ Reference type

참조 자료형은 Array, Object 등.
배열도 객체이다.

let giftSetA = { /*--생략--*/ };
let giftSetB = giftSetA; /* 복사(shallow copy) */
/* 
giftSetA---> 메모리 주소 5001 (address B)
giftSetB ---> 메모리 주소 5001 (address B) 
*/

위의 giftSetA는 실제 물건(데이터 값) 대신 물건(데이터)이 있는 메모리 주소를 저장하고 있다. giftSetA가 참조할 값의 주소인 것이다.
이러한 '주소'를 저장하고 있는 giftSetA를 giftSetB에 복사한다면, giftSetB 가 저장하게 되는 것은? 보관함을 열면 '주소'가 적힌 쪽지가 있는 것이다.

그래서 우리는 실제 물건을 보려면 쪽지에 적힌 주소에 찾아가야 한다.
이 때 giftSetA===giftSetB는 true일까 false일까?
만약 true라면, 참조형 자료의 '같다'의 그 정확한 의미는 무엇일까?

레퍼런스 타입 데이터에는 객체가 있다. 여러 속성 키와 그 값의 쌍을(property key : value) 공통적인 카테고리 하에 묶어둔 형태이다.
여러 데이터가 자리(index)가 지정되어 담겨 있는 배열의 형태도 있다. 모두 주소를 저장한다.

let giftSetA = {a: 'shoes', b: 'robot', c: 'teddybear', d: 'gloves', e: 'glasses'};
let giftSetB = giftSetA;

앞서 작성한 코드대로 giftSetA를 복사하여 giftSetB에 할당하면,
giftSetA와 giftSetB는 같은 메모리 주소를 참조하는 것이다.

console.log(giftSetA === giftSetB); // true

레퍼런스 타입의 동치 비교는,
동일한 레퍼런스 주소를 가리키고 있다면 '같다'고 판단된다. 즉 엄격비교(===)가 true로 판단된다.
그럼 원시형 자료와의 차이는 어디서 있는 걸까?

delete giftSetB.a; // 또는 giftSetB['a']
console.log(giftSetB);

// {b: "robot", c: "teddybear", d: "gloves", e: "glasses"}

giftSetB의 a key 값을 삭제해보았다.(a: "shoes")
giftSetB에서 삭제된 것은 당연해보인다.

console.log(giftSetA);

// {b: "robot", c: "teddybear", d: "gloves", e: "glasses"}

giftSetA의 a key와 value도 삭제된 것을 확인한다. 눈 뜨고 코 베인 것이 아니다. giftSetA 와 giftSetB 가 동일하게 가리키고 있는 창고(메모리 주소)에서 "a"신발이 한번, 삭제된 것이다.

이것이 shallow copy이다.
동일한 물건을 복제clone하지 못하는 것이 얕은 복사이다.

보다 정확한 정립을 위해 다른 케이스를 확인 하고 마무리 한다.
그렇다면 위 그림과 같이 각각 다른 창고(메모리 주소)를 참조하는 두 개의 reference type 데이터가 있다. 둘은 객체이고, 안의 물건을 보니 동일한 데이터 내용을 지니고 있다. 이 둘은 '같은 것' 일까?

let giftSetA = {a: 'shoes', b: 'robot', c: 'teddybear', d: 'gloves', e: 'glasses'};
let giftSetB = {a: 'shoes', b: 'robot', c: 'teddybear', d: 'gloves', e: 'glasses'};

console.log(giftSetA === giftSetB); // false;

두 객체는 '같지 않다'.
객체와 같은 reference type 데이터는, 참조할 값이 있는 메모리 주소를 동일하게 가리킬 때 '같은 것'으로 성립된다.

❇︎참고
원시형 데이터의 메모리주소와 데이터 저장에 대해 [📖 코어 자바스크립트]
원시형과 참조형의 메모리 주소 할당 및 저장 과정에 대해 [🔗 콜 스택과 힙]