[JavaScript] Reference data type ( VS Primitive data type )

- 자바스크립트의 데이터타입을 크게 나누자면 Primitive(원시) data type과 Reference(참조)  data type이 있다. 

#1. Primitive(원시) data type

- 변수값이 그대로 저장되는 그냥 문자와 숫자 등을 의미한다.

- Boolean, number, String, null, undefined 등이 이해 해당된다.

var pData1 = true;
var pData2 = 1;
var pData3 = 'hi';
var pData4 = null;
var pData5 = undefined;

 

#2. Reference(참조)  data type

- 변수에는 변수 값대신 Reference가 저장되는 data type을 말한다.

- Array와 Object가 이에 해당된다

* Reference? : 변수가 컴퓨터 메모리 어디에 저장되어있는지의 위치, 주소 같은 것을 의미한다. 

 

- primitive type data의 경우, 변수 안에는 값이 직접 저장된다. 

var pData1 = true;
var pData2 = 1;
var pData3 = 'hi';

 

- Reference type data의 경우, 변수 안에는 값이 직접 저장되는것이 아니라, 값이 저장된 메모리의 위치가 저장되어있는 것이다.

var data1 = {name: 'kim'};
var data2 = {name: 'park'};
var data3 = [1,2,3,4,5,6];

메모리주소는 설명하기 위한 가정값. 실제로는 저렇게 생기진 않음.

- 그래서 일반변수와 같이 무심코 변수를 복사하거나, 재할당 등을 할때 문제가 발생할 수 있으므로 유의 해야한다.

 

1. Reference type data 복사

- 아래 예제와 같이 obj2 = obj1 과 같이 저장을 한다면, obj2에는 obj1의 값인 {name: 김연아} 가 저장되는게 아니라,

obj1의 값이 저장되어있는 메모리 주소가 저장된다.

- 그래서, obj1안의 값을 바꿀때, obj2의 값도 바뀌어버리게 된다. 둘은 결국 같은 값이니까. 

var obj1 = { name: "김연아" }; // 풀어서 말하자면, 이름1은 ~~~에 있어요. 가 저장된거임
var obj2 = obj1; // 이 대입은 이름1이 저장된위치 = 이름2 다 하는거..

console.log(obj1); // >> 김연아
console.log(obj2); // >> 김연아

obj1.name = "손예진";

console.log(obj1); // >> 손예진
console.log(obj2); // >> 손예진 >> ?? 얜 바꾼적 없는디 ㅜ

 

- ...spread operation을 사용하면 의도한 바와 같은 결과를 얻을 수 있다. 

var obj1 = { name: "김연아" };
var obj2 = {...obj1};

console.log(obj1); // >> 김연아
console.log(obj2); // >> 김연아

obj1.name = "손예진";

console.log(obj1); // >> 손예진
console.log(obj2); // >> 김연아

 

2. Reference type data 비교하기

- 두 값을 똑같이 지정해서 비교를 한다면 true가 나올까?

- 아니다. 두개의 변수에 대입된 오브젝트 값에 같은 값을 넣더라도, 결국 변수에는 다른 값의 주소만 저장이 되기 때문에 아래 예제의 값은 false가 된다.

var obj3 = { name: "kim" };
var obj4 = { name: "kim" };
console.log(obj3 == obj4); // 출력결과 >> false

 

3. Reference type data 값 변경하기

var obj6 = { name: "kim" }; 
function 변경1(obj) { // 파라미터는 변수 생성 & 할당과 같다. 
	obj = { name: "park" }; 
}
변경1(obj6);
console.log(obj6); // >> {name: 'kim'} // 안바뀜!!!!!

- 함수를 사용하여 reference type data를 변경하고 싶은 경우, 다음과 같이 obj의 값에 대입을 해 변경하면 잘 변경된다.  

var obj5 = { name: "kim" };

function 변경(obj) {
	obj.name = "park";
}
변경(obj5);

console.log(obj5); // 출력결과 >> {name: 'park'}

 

- 하지만 다음과 같이 재할당을 하여 reference type data변경은 불가능하다.

var obj6 = { name: "kim" }; 
function 변경2(obj) { // 파라미터는 변수 생성 & 할당과 같다. 
	obj = { name: "park" };  
    // 2. 재할당
    // 1) obj에는 obj6주소가 저장되어있다가 
    // 2) 재할당으로 새로운 값, 주소가 저장됨
}
변경2(obj6);  // 1. (파라미터)obj = obj6
console.log(obj6); // >> {name: 'kim'} // 안바뀜!!!!!

- 8번째 라인, 함수 호출과정에서 (파라미터) obj = obj6 이 할당된다. >> 현재 obj = obj6의 주소값이 할당된 상태

8번째 라인 이후 그림으로 표현하면 이런 단계

 

 

- 하지만 3번째 라인, 함수 실행과정에서 obj = {name : "park"} 으로 재할당된다.  >> 재할당 즉, 주소값이 재 할당된다.

3번째 라인 실행결과

   -  이 결과, 마지막 라인 console.log(obj6) 은  {name: 'kim'} 이 나오게된다.

 

>> 결론 : reference type data인 array와 object에는 내가 정한 변수 값이 저장이되는 게 아니라, 메모리의 주소가 저장된다. 그러니까, 사용할때 유의해서 사용하자~!!!