[JavaScript] 원시타입과 창조타입

2022.11.07

💡 오늘의 JavaScript 공부

▶️ Primitive

자바스크립트에서는 객체가 아니면서 method를 가지지 않는 6가지의 타입을 원시타입이라고 부르며

string, number, boolean, null, undefined 등이 이에 해당한다.

예를 들어 let a, a = 1 이 있다고 한다면 원시타입에서는 stack이라는 상자에 a라는 이름표를 붙여서 1이라는 값을 저장하는 것이다.

원시타입 데이터는 각 변수간에 원시타입 데이터를 복사할 경우 데이터 값이 복사되기 때문에 기존의 데이터에 영향이 가지 않는다.

▶️ Reference

창조타입이라고 부르며 창조타입 데이터에는

array, objct, function등이 이에 해당한다.

창조타입은 원시타입과 다르게 heap이라는 빈 공간을 만들어 값이 아닌 주소에 할당하게 된다. 이 주소는 heap에 연결되어 있고 해당주소지의 값을 연결한다. 따라서 다량의 데이터를 다루기 쉬운 것이다.

창조타입 데이터는 각 변수간에 창조타입 데이터를 복사할 경우 주소가 복사되기 때문에 복사된 주소에서 데이터를 변경하게 된다면 기존의 데이터에 영향이 간다.

📌 왜 원시 자료형이라고 부를까?

원시 자료형은 모두 ‘하나’의 데이터를 담고있다. 옛날 컴퓨터에서는 데이터 보관함 한칸에 하나의 데이터만 넣을 수 있었기에 비슷한 느낌으로 원시 자료형이라 부른다.

원시자료형의 보관함인 변수에는 하나의 원시자료형만 담을 수 있다. 이 특징은 참조 자료형의 heap과는 구분되는 모습이다.

const num1 = 123;
const num2 = 12345;
// 이렇게 변수에는 데이터 크기와 상관없이 
// 하나의 데이터만 담을 수 있다. 

📌 참조 자료형?? Heap?

참조 자료형에서는 하나의 데이터가 아닌 여러 데이터가 담긴다.

원시 자료형이 하나의 데이터 보관함에 저장되었다면 참조자료형은 별도의 공간 heap을 생성해 그 곳의 주소에 데이터를 저장한다고 생각하면 된다. 이 특별한 공간은 데이터에 맞게 사이즈를 동적으로 변하기도 한다.

나름 예시를 들어보자면

let a = [4,5,6];      // 1번 사물함:a 주소:1
let b = ['hi',1,2];   // 2번 사물함:b 주소:2
let c = [true,false]	// 3번 사물함:b 주소:3
a[0] =3;
b.pop();
c.push('a')
--------------------------------------
// heap 공간 
// 주소 1 = 3,4,5
// 주소 2 = 'a',1
// 주소 3 = true,false,'a'

이런 식으로 이해하면 될 것 같다.

📌 Quiz

// 다음 코드들의 x의 값은?  
let x = 2;
let y = x;
y = 3;
// x = 2 이다 
// 원시자료형이기에 y에 다른 값을 할당해도 
// x는 변하지 않는다. 

let x = {foo:3};
let y = x;
y.foo = 2
// 참조자료형이기에 기본값에 영향을 준다. 
// x = 2 이다

let x = {foo:3};
let y = x;
y = 2
// 참조자료형으로 주소값을 할당받았지만,
// y를 원시타입으로 할당했으니 기본값에 영향을 받지 않는다. 
// x = 3 이다