자바스크립트 JavaScript : Reference data type

오늘은 객체지향 문법 시작 전 반드시 알아야할 reference, primitive data type을 알아봅시다. 

Primitive data type

자바스크립트의 자료형 (문자, 숫자, array, object 등)은 자료형을 크게 2개로 분류합니다. 

Primitive & reference라고 분류하는데 

Primitive data type들은 그냥 별건 없고 자료 자체가 변수에 저장되는 자료들입니다. 

문자, 숫자 자료형들이 대표적인 primitive data type들입니다. 

var name = 'john';
var age = 20;

 

이렇게 문자나 숫자 자료형은 문자나 숫자가 변수에 직접 저장된다는 소리입니다. 

이를 설명한 이유는, 그렇지 않은 것들도 존재하기 때문인데요.

 

그것은 바로..!!

.

.

.

Reference data type

Array, Object 자료형은 reference data type에 속합니다.

reference data type은 자료를 변수에 직접 저장하는게 아닌, 자료가 저쪽에 있습니다 라는 화살표 (레퍼런스)를 변수에 저장합니다. 

var 사람 = { name : 'Kim' };

 

예를 들어, 방금 { name : 'Kim' } 이라는 자료를 변수에 저장했습니다. 

하지만 변수에 저장된건 { name : 'Kim' } 이게 아닙니다. 

"{ name : 'Kim' }이 저기 저장되어있습니다"라는{ name : 'Kim' } 값을 가리키는 화살표가 저장이 되어있을 뿐입니다. 

 Kim이라는 데이터가 변수에 저장된게 아닙니다. Kim이라는게 저기 있습니다~ 라는 정보만 저장할 뿐입니다.  

그래서 이런 reference만 저장되는 array, object 자료형을 reference data type이라고 합니다.

Q. 화살표가 가리키는 저기가 어딘데요?
A. 컴퓨터 메모리 상의 어떤 곳입니다.

 

예제 1. 복사하면 이상한 일이 일어납니다.

한번 아주 직관적이고 간단한 Primitive 자료형부터 복사해보도록 합시다.

var 이름1 = '김';
var 이름2 = 이름1;
이름1 = '박';

 

(1) 이름1은 '김'이라는 문자를 집어넣었고

(2) 이름2는 이름1에 있던 자료를 복사해서 집어넣습니다. (등호는 그냥 집어넣는다라는 뜻입니다 같다는게 아니고요)

(3) 셋째줄에서 이름1을 '박'으로 변경했습니다. 

그럼 이름1, 이름2를 출력하면 각각 무엇이 나올까요?

 

이름1은 변경했으니 '박'이고, 이름2는 복사만했지 변경하진 않았으니 '김' 입니다. 

끝입니다. 별로 이상한 점이 없습니다. 

근데 똑같은 일을 reference data type으로 진행하면 이상한 일이 일어납니다. 

 

한번 Reference 타입 자료형인 object를 이용해 똑같이 해보도록 하겠습니다. 

var 이름1 = { name : '김' };
var 이름2 = 이름1;
이름1.name = '박';

 

(1) 이름1은 { name : '김' } 이라는 object자료형을 집어넣었고

(2) 이름2는 이름1에 있던 자료를 복사해서 집어넣습니다. 

(3) 셋째줄에서 이름1 object 안의 name을 박으로 변경했습니다. 

그럼 이름1, 이름2를 출력하면 각각 무엇이 나올까요?

 

정답은 둘다 {name : '박'} 이 나옵니다.

분명 코드를 보면 이름2는 우리가 값을 전혀 수정한 적이 없는데 바뀌어있습니다.

 

그 이유는, 이름1에 있던 { name : '김' } 이라는 데이터가 복사된게 아니라 reference (화살표)가 저장되어있다고 했으니까 그렇습니다.

이름1의 화살표를 이름2에 복사하신겁니다.  이제 이름1과 이름2는 같은 화살표를 가지고 있습니다.

 

쉽게 말하면, 이름1과 이름2는 같은 화살표 (reference) 를 가지게 된 것이고

그 화살표는 PC 메모리에 존재하는 { name : '김' } 이라는 같은 값을 가리키고 있는 것일 뿐입니다. 

 

예제 2. 화살표가 할당되는 기준 & object 두개가 같은지 비교해보기

새로운 {} object를 할당할 때마다 referenece (화살표) 가 새로 생성된다고 보시면 됩니다.

var 이름1 = { name : '김' };
var 이름2 = { name : '박' };

 

지금 첫줄과 둘째줄 모두 object를 새로 할당해주고 있습니다. 

실은 object가 저기 있다는 화살표를 할당해준 것입니다. 끝입니다

 

그럼 이걸 한번 보도록 합시다. 

var 이름1 = { name : '김' };
var 이름2 = { name : '김' };

 

지금 첫줄과 둘째줄 모두 object를 새로 할당해주고 있습니다. 근데 object 안의 내용이 똑같네요.

 

예제에서 이름1 == 이름2 이렇게 두개를 같다고 비교하면 true가 나올까요 false가 나올까요?

결과는 바로... false가 나옵니다. 

이유는 

이름1과 이름2에 저장된건 데이터가 아니라 화살표랬죠?

== 등호로 비교하고 계신건 지금 object 두개가 아닙니다. 화살표 두개입니다. 

그렇기 때문에 화살표가 같으면 (같은 곳을 가리키면) true가 나오고, 화살표가 같지 않으면 false가 나옵니다. 

 

예제 3. 함수를 이용해 object를 변경하면 어떻게 될까

var 이름1 = { name : '김' };

function 변경(obj){
  obj = { name : 'park' };
}

변경(이름1);

 

이 함수는 뭔가 오브젝트를 입력하면 오브젝트 내용을 { name : 'park' } 으로 재할당해주는 함수입니다.

Q. 근데 실행해봐도 이름1은 바뀌지 않습니다. 왜 그럴까요?
A. 사실 파라미터는 변수생성 &  할당과 똑같습니다(새로운 변수)
그래서 함수를 호출해주는 변경(이름1) 은 사실 변경(var obj = 이름1)과 마찬가지로 이름1의 reference가 저장됩니다. 그래서 결과로는 {name:'김'} 로 출력되는 것 입니다,

1. 이름1(변수) -> pc 메모리 {name:'김'}
2. obj(파라미터 변수) -> pc 메모리 {name : 'park'}

 

그래서 값을 변경하고 싶을 경우

var 이름1 = { name : '김' };

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

변경(이름1);
console.log(이름1); // {name : "park"}

 

이런식으로 화살표가 아니라 객체 내부의 값을 변경해주어야 원하는 대로 출력됩니다.