[JavaScript 33가지 지식] 값 타임(Value Type)과 참조 타입(ReferenceType)

JavaScript의 변수타입

JavaScript의 변수 타입에는 크게 

원시타입과 참조타입으로 나누어져있습니다.

 

원시타입(PrimitiveType)의 변수들은 데이터복사가 일어날때 메모리공간을 새로 확보하며 독립적인 값을 저장한다.

참조타입(ReferneceType)은 메모리에 직접접근이 아닌 메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근하는 데이터 타입이다.

 

---

값 타입(Value Type)

JavaScript에서 원시타입은  변수에 할당될때, 메모리의 고정크기로 원시값을 저장하고 해당 저장된 값을 변수가 직접적으로 가리키는 형태이다.

 값이 절대 변하지 않는 불변성을 갖고 있기 때문에 재할당시 기존 값이 변하는 것처럼 보일지 몰라도 사실 새로운 메모리에 재할당한 값이 저장되고 변수가 가리키는 메모리가 달라졌을 뿐이다.

 

예시1)

let a =100;
a = 20

<실행 과정>

이 경우 첫번째 a 가 가지고 있는 값은 100이되고 

두번째 줄이 실행되면 a가 가르키는 값은 20이된다.

하지만 100이 지워지고 20이 되었다는것이 아니라 새로운 메모리에 20을 만들고 a가 100이 아닌 20을 가르키가 만든것이다.

 

즉, 메모리에는 100, 20 둘다 모두 존재하며  앞서 언급한것 처럼 원시타입은 불변성을 가지고 있기에 기존 메모리에 생성된값들은 그자체가 변경될수는 없다.

그저 식별자와 연결되어 있는 메모리의 주소가 바뀌었기에 우리 눈에는 값이 재할당된 것처럼 보이는것이다.

 

예시2)

let a = 50;
let b = a;
a = 20;

console.log(b);//50

 

변수 b에는 첫번째 줄 a가 가지고있던 값 50을 가지고 있다(a가 아니라) 그렇기에 3번째 줄에서 a가 가르키는 값이 20이되어도 

b가 가르키는 값은 전혀 영향을 받지 않는다.

 

---

참조타입(ReferenceType)

 

참조타입은 변수에 할당 할 때 값타입처럼 값을 저장하는 것이 아닌 주소를 저장한다.

변수는 주소를 저장하고, 주소는 특별한 동적인 데이터 보관함에 저장되는데 이 보관함을 힙(Heap)이라고한다.

만약 값을 재할당할경우 주소를 참조한 모든 값이 영향을 받는다.

 

• 참조형은 원시형 데이터의 집합이다. 배열 ,객체, 함수가 대표적이다.
• 참조자료형은 기존에 고정된 크기의 보관함이 아니다.참조 자료형을 변수에 할당 할 때는 변수에 값이 아닌 주소를 저장한다.
• 동적으로 크기가 변하는 데이터를 보관하기 위해 변수가 아닌 다른 곳에 데이터를 저장하고 변수에는 그 주소만 할당된다.

예시)

let obj = { a: 1 };
let obj2 = obj;
obj2.a = 20;

console.log(obj.a); //20

아까 원시형 타입과는 전혀 다르게 obj2의 값을 바꾸었는데 obj의 값이 바뀌었다.

위에서 설명한것과 같이 두개의 객체 obj,obj2는 각자의값을 가지고 있는것이 아니라
동일한 주소를 참고하기에 위와같은 결과가 나온것이다.

 

만약 이러한 결과 값이 바뀌는것을 막고싶은면 깊은 복사라는것에 대해 공부를 해보면 좋다

(이 부분에 대해서 좀 더 정확히 공부 후 업로드하겠다)

---

 

정리

 

값타입(원시타입)

• 값에 의해 결과값이 나온다
• 원시타입 값을 그대로 복사하며 데이터를 바꿔도 다른 데이터에 영향을 미치지 않는다.

 

참조타입

• 참조에의해 결과값이 나온다.
• 객체의 메모리 주소를 복사하며 데이터를 바꾸면 참조하는 모두에게 영향을 미친다.

---

목차

[JavaScript 33가지 지식] 시리즈 소개 및 목차

 

---

 

참고레퍼런스

 

JS Basics #1 - JS 기본형과 참조형 차이점 정리