JavaScript 원시 자료형과 참조 자료형에 대해 쉽게 이해해 보자.

1. 원시 자료형과 참조 자료형이란?

number, string, boolean, undefined, null과 같은 자료형은 고정된 저장 공간을 차지한다. 이런 특징을 가진 자료형을 원시 자료형(primitive data type)이라는 이름으로 분류한다. 반면에 대량의 데이터를 다루기에 적합한 배열과 객체, 함수 등의 자료형은 참조 자료형(reference data type)이라고 분류한다.

 

원시 타입 데이터는 각 변수간의 원시타입 데이터를 복사할 경우, 데이터 값이 복사되기 때문에 기존의 데이터에 영향이 가지 않음. 참조 타입 데이터는 주소를 복사한다. 때문에 복사한 데이터에서 원소를 변경하게 된다면 주소 안에 있는 데이터가 변경이 되는 것이기에 기존의 데이터에도 영향이 가는 것이다. 쉽게 설명하자면, 원시 자료형이 할당될 때는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다고 할 수 있다. 또한 참조 자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 특별한 보관함이다.

 

 

2. 원시 자료형과 참조 자료형의 각 특징

원시 자료형

- 원시 자료형을 변수에 할당하면 메모리 공간에 '값 자체'가 저장된다.

- 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사되어 전달된다.

- 원시 자료형은 '변경 불가능한 값(immutable value)' 즉, 한 번 생성된 원시 자료형은 읽기전용(read only) 값이다.

참조 자료형

- 참조 자료형을 변수에 할당하면 메모리 공간에 '주소값'이 저장된다.

- 참조 값을 갖는 변수를 다른 변수에 할당하면 주소값이 복사되어 전달된다.

- 참조 자료형은 변경이 가능한 값(mutable value)이다.

 

 

3.  JavaScript가 참조 자료형을 저장하는 방법

힙(heap) 이라는 저장공간에 참조 자료형을 저장한 후, 그 저장공간을 참조할 수 있는 주소값을 변수에 저장한다. 따라서 변수에 해당하는 저장공간에는 주소값이 저장되어 있고, 그 주소값을 통해 참조 자료형에게 접근하는 것이다. 이 접근을 '참조한다(refer)'고 한다.

 

 

4.  원시 값 자체를 복사 vs. 주소값을 복사

만약 어떤 변수에 저장되어 있는 원시 자료형을 다른 변수에 할당한다면, 원시 자료형은 값 자체가 복사된다. 따라서 변수 num과 변수 copiedNum은 동일하게 20이라는 값을 가진다.

let num = 20;
let copiedNum = num;

 

참조 자료형은 이와 달리 주소값을 복사한다. 즉, 참조자료형이 할당된 변수를 다른 변수에 할당하면, 이 두 변수는 같은 주소를 가리킨다.

let arr = [0, 1, 2, 3];
let copiedArr = arr;

 

정리하자면, 값 자체를 복사하는 원시 자료형과 달리, 참조 자료형을 할당한 변수를 다른 변수에 할당할 경우 '같은 주소'를 참조하고 있는 것이다.

// 원시 자료형이 참조된 변수를 다른 변수에 할당하기
let num = 20;
let copiedNum = num;

// 참조 자료형이 할당된 변수를 다른 변수에 할당하기
let arr = [0, 1, 2, 3];
let copiedArr = arr;

// 두 변수가 같은지 확인하기 - 1
console.log(num === copiedNum); // true
console.log(arr === copiedArr); // true

// 원본을 변경하기
num = 30;
arr.push(4);

// 두 변수가 같은지 확인하기 - 2
console.log(num === copiedNum); // false: 원시자료형은 원본(num)에 다른 값을 할당해도 복사본(copiedNum)에 영향을 미치지 않음
console.log(arr === copiedArr); // true: 참조자료형은 원본(arr)을 변경하면 복사본(copiedArr)도 영향을 받기에 동일해짐

// 이 두 변수의 현재 상태는?
console.log(copiedNum); // 20
console.log(copiedArr); // [0, 1, 2, 3, 4];

 

 

5. 변경 불가능한 값 vs. 변경이 가능한 값

원시 자료형

한 번 생성된 원시 값은 변경할 수 없다. num이라는 변수를 선언하고 숫자 20을 할당해 보겠다.

let num = 20;

 

여기서 변수 num에 할당된 값을 숫자 20대신 다른 값으로 변경하고자 한다면, 다른 값을 변수에 재할당 하면 된다.

num = 30;

 

변수에 할당된 값이 20에서 30으로 변경되었기에 원시 자료형인 숫자 타입의 값이 변경된 것처럼 보인다. 그렇다면 원시 자료형이 변경 불가능한 값이라는 것은 무슨 뜻인 걸까? 값을 재할당했을 때 메모리에서는 num이라는 변수가 참조하던 공간에 들어 있던 20이 그대로 30으로 변경될 것 같지만, 메모리 내부에서는 30이라는 원시 값을 저장하기 위한 '새로운 공간을 확보'한 뒤, 그 공간에 num이라는 이름을 붙이고 30을 저장하는 것이다. 즉, 20번 사물함이 30번으로 변경된 것이 아니라 20번 사물함과 30번 사물함이 별개로 존재하는 것이다. (숫자 타입 뿐만 아니라, 문자열도 마찬가지다.)

 

copyright @unsplash

 

따라서 원시 자료형은 어떤 상황에서도 불변하는 읽기 전용 데이터인 것이다. 이는 원시 자료형이 높은 신뢰성을 가질 수 있는 요인이기도 하다. 그렇다면 남아 있는 값 20은 어떻게 될까? JavaScript 엔진은 이처럼 사용하지 않는 값을 자동으로 메모리에서 삭제하며, 이러한 기능을 가비지 콜렉터(garbage collector)라고 한다. 단, garbage collector가 어느 시점에 진행되는지는 예측할 수 없다.

 

참조 자료형

반면 참조 자료형은 변경 가능한 값이다. 원시 자료형의 경우 값의 크기가 거의 일정하기 때문에 새로운 공간을 확보하여 값을 복사하는 방법이 유용하지만, 크기가 일정하지 않은 참조 자료형의 경우 매번 값을 복사한다면 그만큼 효율성은 떨어질 수밖에 없다. 이런 이유로 참조 자료형은 변경이 가능하도록 설계되어 있다.

arr[3] = '3';
arr.push(4);
arr.shift();

console.log(arr); // [1, 2, '3', 4] : 위 코드가 실행되면, 변수가 참조하고 있는 주소에 저장되어 있는 값을 변경함

 

참고로, 문자열은 원시 자료형이지만 배열처럼 인덱스로 문자열의 각 문자에 접근이 가능하다.

console.log(str[0]) // 's'
console.log(str[2]) // 'a'

 

하지만 배열과는 달리 인덱스에 직접 다른 문자를 할당하여 값을 변경할 수는 없다. 아래 예시 코드와 같이 문자열도 원시 자료형이기 때문에 값 변경이 불가하기 때문이다. 

let str = '코딩은';
str = '재밌어';

str[2] = '엉';
console.log(str); // 재밌어