[JavaScript] Data Type의 분류(기본형, 참조형) 정리

자료형(Data Type)
기본형(Primitive Type)		참조형 (Reference Type)
Number String Boolean	Null, Undifind	Object

1. 기본형(Primitive Type)

 

let x = 10;
let y = x;

console.log(x);  // 10이 출력
console.log(y);  // 10이 출력

y = 20;

console.log(x);  // 10이 출력
console.log(y);  // 20이 출력

 - JavaScript에서 어떤 값을 핸들링 할때  기본형 타입은 변수에 값을 할당해서 사용 한다.  즉 변수 이름을 가진 그릇에 그 값을 넣어준다고 할 수 있다.

 

위 코드의 첫 번째 줄에서 변수 x에 10이라는 값을 할당하였기 때문에, x라는 그릇에 숫자 10이라는 값을 담았다고 볼 수 있는 것이다. 그리고 2 번째 줄에서 y라는 변수에 변수 x를 할당하여 값을 대입하였는데, 이러면 y 변수가 x가 가지고 있는 값을 복사해서 담게 되는 것이다.

그래서 위 코드를 실행하면 4, 5번째 줄이 실행되면서 console창에 10이 2번 출력된다.

 

그 후 7 번째 줄에서 변수 y의 값을 새롭게 20을 할당해 주었는데,  이렇게 되면 y가 담고 잇는 값은 더 이상 10이 아니라 새로 할당 시켜준 20이라는 값이 된다. 그래서 8 번째 줄과 9 번째 줄이 실행되면 10과 20이 출력 되는 것을 알수 있다.

 

2. 참조형 (Reference Type) 

 

let obj1 = {
		width : 100
        }
let obj2 = obj1

console.log(obj1); //  {width: 100}
console.log(obj2); //  {width: 100}

obj2.color = 'red'

console.log(obj1);  //  {width: 100, color: 'red'}
console.log(obj2);  //  {width: 100, color: 'red'}

 

그 다음은 위 기본형의 예제의 형태를 거의 동일하게 참조형 변수인 객체(Object)에서 살펴보자

 

- 위 코드는 첫 번째 obj1이라는 객체에 property를 하나 width를 담아주고, 4 번째 줄에는 역시나 obj2에 obj1 대입해주어 obj1의 값을 복사해 주었습니다. 그리고 나서 6 번째, 7 번째 줄에서 실행을 하게되면 역시나 같은 값이 출력된다.

 

- 그리고 9 번째 줄에서 새로운 property인 color를 obj2에 추가 해주고 11번째, 12 번째 줄에서 실행을 하게되면 위에 기본형 예제에서라면 11 번째줄의 출력 값과 12 번째 줄이 다르게 출력되어야 할테지만, 여기에서는 obj2에 추가해준 property값인 color를 obj1에서도 똑같이 추가되어 출력된 것을 확인 할 수 있다.

 

obj1		obj2
address1
width = 100

** 이는 기본형 데이터 타입과 달리 참조형 데이터 타입은 값을 변수 자체에 보관 하는 것이 아니라 그 안의 객체 값을 주소 안에 보관하는데 이를 복사하게되면 객체 자체의 값을 복사 하는 것이 아니라 그 값을 보관하는 주소를 복사하게 되는 것이다.

 

obj1		obj2
address1
width = 100 color = 'red'

그렇기 때문에 obj1 과 obj2는 서로 같은 객체를 보게되면서 수정은 obj2의 값만 추가하였지만 obj1의 출력 값 역시 수정되는 것이다. 그렇기 때문에 참조형 변수는 수정할 때 이를 항상 유의 해야한다.

 

정리하면 

 

기본형 데이터타입은 값을 변수에 담고, 참조형의 경우에는 변수를 할당하게 되면 값 자체가 복사 되는 것이 아니라 주소 값이 복사되기 때문에 결국에는 같은 객체를 가르키게 되고 결과적으로 한 쪽을 수정하게 되면 다른 한쪽도 함께 수정된다.