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

학습목표

• 원시 자료형(primitive data type)과 참조 자료형(reference data type)의 구분이 왜 필요한지에 대해서 영상을 보고 이해할 수 있다.
• 원시 자료형과 참조 자료형의 차이를 이해하고, 각자 맞는 상황에서 사용할 수 있다.
• 원시 자료형이 할당될 때는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다는 개념을 코드로 설명할 수 있다.
• 참조 자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 특별한 보관함을 사용한다는 것을 이해할 수 있다.

원시 자료형 (primitive data type)

객체가 아니면서 method를 가지지 않는 6가지의 타입
string, number, bigint, undefined, symbol, (null)

'string', 42, true, undefined... // string, number, boolean, undefined

• 데이터 보관함 한 칸에 하나의 데이터만 넣을 수 있는 원시적인 방식.
• 즉 변수에 데이터의 크기와 상관없이 하나의 데이터를 담을 수 있다.
• 값 자체에 대한 변경이 불가능하지만(immutable), 변수에 다른 데이터를 할당할 수 있다.

참조 자료형 (reference data type)

식별자로 참조할 수 있는 메모리 상의 값
array([ ]), object({ }), 함수(function( ) { })

• 참조 자료형엔 하나가 아닌 여러개의 데이터를 담을 수 있다.
• 참조 자료형의 데이터 자체는 원시 자료형이 보관되는 데이터 보관함이 아닌 특별한 데이터 보관함에 저장된다. 이를 힙( heap )이라 한다.
• 변수에는 힙의 메모리 상 주소를 가르키는 주소값이 저장된다.
• 데이터 보관함의 경우 사이즈를 자유자재로 조절할 수 있다. 이를 보고 다양하게(dynamic) 변한다고 한다.

let a = [4,5,6];  // 변수 a에는 배열 [4,5,6]이 저장된 heap의 주소값 할당.
console.log(a[0]);  // 주소값을 통해 데이터를 읽을 수 있음.

데이터 복사

원시 자료형을 복사하면 데이터를 독립적인 메모리 공간에 할당하기 때문에, 복사본의 값을 수정해도 기존의 데이터를 저장한 변수에는 영향이 없다. 이처럼 실제 값을 복사하는 것을 깊은 복사라고 한다.

let a = 'a';
let b = a;

console.log(a); // output : 'a'
console.log(b); // output : 'a'

b = 'b';

console.log(a); // output : 'a'
console.log(b); // output : 'b'

// 복사한 데이터를 변경해도 기존의 데이터는 상관 X

참조 자료형은 변수에 객체를 참조할 수 있는 주소값을 담고있기에, 복사본에도 동일한 주소값이 할당되게된다. 그러므로 복사본의 데이터를 변경하게 되면 원본 객체의 데이터도 변경되게 된다. 이처럼 객체의 참조값(주소값)을 복사하는 것을 얕은 복사라고 한다.

let a = {
  name : 'jun';
  country : 'Korea';
}
let b = a;

console.log(a)  // { name : 'jun', country : 'Korea' }
console.log(b)  // { name : 'jun', country : 'Korea' }

b.name = 'zun';

console.log(a)  // { name : 'zun', country : 'Korea'}
console.log(b)  // { name : 'zun', country : 'Korea'}

// b객체의 name의 value를 변경했지만, a객체에도 영향을 끼쳤다.