JavaScript - Primitive Type(원시 타입) vs Reference Type (참조 타입)

자바스크립트는 두 가지에 타입을 제공한다. 바로 promitive type과 reference type이다.

Primitive Type(원시 타입)

원시 타입의 데이터는 변수에 할당이 될 때 메모리 상에 고정된 크기로 저장이 되고 해당 변수가 원시 데이터 값을 보관한다. 원시 타입 자료형은 모두 변수 선언, 초기화, 할당 시 값이 저장된 메모리 영역에 직접적으로 접근한다. 즉, 변수에 새 값이 할당이 될 경우, 변수에 할당된 메모리 블럭에 저장된 값을 바로 변경한다.

primitive type의 종류에는 string, number, Boolearn, null, undefined 가 있다.

변수에 원시타입의 데이터의 값을 복사할 경우 그 값만 복사 된다.

let a = 1
let b = a

a = 3

console.log(a) //3
console.log(b) //1

원시타입의 데이터의 값만 복사 되었기때문에 a을 3의 변경이 되어도 b의 값을 변하지 않는다. b는 이전 값인 1이 출력이 된다.

---

Reference Type (참조 타입)

참조 타입의 데이터는 크기가 정해져 있지 않고 변수에 할당이 될 때 값이 직접 해당 변수에 저장될 수 없으며 변수에는 데이터에 대한 참조만 저장된다. 변수의 값이 저장된 힙 메모리의 주소값을 저장한다. 참조 타입은 변수의 값이 저장된 메모리 블럭의 주소를 가지고 있고 자바스크립트 엔진이 변수가 가지고 있는 메모리 주소를 이용해서 변수의 값에 접근한다.

reference type의 종류에는 객체, 배열, 함수가 있다.

const x = { count : 100 };
const y = x;

x.count = 99;

console.log(x); // 99
console.log(y);	// 99

y에 x를 할당하면 y가 x의 메모리주소를 바라보게 된다. 즉, x와 y는 같은 메모리 주소를 공유하게 된다. 그래서 x가 변경이 되면 y도 같이 변경이 되게 된다.

const x = [1,2,3]
const y = [1,2,3]

if (x === y) {
	consol.log("true")
} else {
	console.log("false")
}

// false

위와 같은 경우는 x와 y가 각각 새로운 배열을 담아주고 있다. 결과값을 false가 나온다. 그 이유를 보면 같은 배열을 가지고 있더라도 서로 각자 다른 주소를 바라보고 있기 때문이다. 예를 들면 x는 주소 1번에 생성이 된 것이고 y는 주소 2번에 생성이 된 것이다. 그렇기 때문에 false 값이 나온 것이다.

const x = [1,2,3]
const y = x

if (x === y) {
	consol.log("true")
} else {
	console.log("false")
} 

위와 같은 경우는 값이 true가 나온다. y를 x를 값으로 할당했다. 이렇게 되면 y에 [1,2,3]가 새로 생기는 것이 아니라 y에 x의 주소가 담기게 되고 y는 x주소를 바라보게 된다. 그래서 y를 출력하면 [1,2,3]이 나오고 if문은 true가 나온다.