[JavaScript] 원시 자료형과 참조 자료형

1. 원시 자료형

JavaScript에서 원시 타입의 데이터(원시 자료형)는 객체가 아니면서 method를 가지지 않는 6가지의 타입을 말한다.

• string, number, boolean, undefined, null, bigint, symbol이 원시자료형에 해당한다.
• 데이터의 크기와는 관계없이 하나의 데이터만 담을 수 있다.
• 원시 자료형은 값 자체에 대한 변경은 불가능하지만, 변수에 다른 데이터를 할당 할 수는 있다.

2. 참조 자료형

JavaScript에서 원시 자료형을 제외한 모든 것은 참조 자료형이다. 배열, 객체, 함수가 대표적인 참조 자료형이다. 이런 자료형을 참조 자료형(참조 타입)이라고 한다.

특별 데이터 보관함(heap)

• 참조 자료형에는 하나의 데이터가 아닌 여러개의 데이터가 담기게 되고 참조 자료형의 데이터 자체는 윈시 자료형이 보관되는 데이터 보관함이 아닌 특별한 데이터 보관함(heap)에 저장된다.
• 변수에는 이 데이터가 위치한 곳(메모리 상 주소)을 저장한다.
• heap은 마음대로 사이즈를 늘리고 줄일 수 있어서 "동적으로 변한다"고 하기도 한다.

✍️ 원시 자료형과 참조 자료형 비교 예시

let x = 2;
let y = x; // x의 값을 y로 복사하여 할당
y =3; // y에 3을 재할당
console.log(x) // 2 // 변수 x에는 영향이 없음

let x = { foo: 3 };
let y = x; // x의 값의 주소를 y에 할당
y.foo = 2; // y.foo에 2를 할당
console.log(x.foo) // 2
// 같은 주소를 공유하는 y.foo가 2로 변경되서 x.foo 또한 2로 변경 됨

// 배열도 마찬가지
let myArray = [2, 3, 4, 5];
let ourArray = myArray; // ourArray에 myArray의 주소 할당
ourArray[2] = 25; // ourArray 주소에 위치한 배열의 2번째 요소를 25로 변경. myArray도 같은 주소를 공유하기 때문에 둘다 [2, 3, 25, 5]인 상태
ourArray = undefined; // ourArray에 undefined 재할당. 더이상 myArraydp 접근할 수 없음
console.log(myArray) // [2, 3, 25, 5]

console.log('codestates' === 'codestates') // true
console.log(3.14 === 3.14) // true
console.log([1,2,3] === [1,2,3]) // false
console.log( { foo: 'bar' } === { foo: 'bar' } ) //false

let a = [1, 2, 3];
let b = [1, 2, 3];
console.log( a === b ) // fasle
let c = a;
console.log( a === c ) // true // 같은 주소 공유