오늘은 원시자료형과 참조자료형의 구분이 왜필요하고 각자의 차이를 이해하고 각자 맞는 상황은 무엇인지 공부해보겠습니다.
원시자료형의 특징
고정된 저장 공간을 차지하는 데이터를 모두 원시 타입(primitive type) 데이터 라고 한다.
- 원시 자료형을 변수에 할당하면 메모리 공간에 값 자체가 저장된다.
- 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사되어 전달된다.
- 원시 자료형은 변경 불가능한 값(immutable value)이다. 즉, 한 번 생성된 원시 자료형은 읽기 전용(read only) 값이다.
원시 타입 데이터: string, number , bigint, boolean, undefined, symbol, null
원시 자료형은 모두 하나의 데이터만을 담고 있다.
참조 자료형의 특징
자바스크립트에서 원시 자료형이 아닌 모든 것들은 참조 자료형이다. 대표적으로 배열과 객체, 함수가 있다.
이러한 자료형을 자바스크립트에서는 참조 자료형(reference data type) 이라고 부른다.
원시 자료형은 하나의 변수에는 하나의 데이터만을 담을 수 있는데, 참조 자료형은 여러 데이터를 담을 수 있다.
- 참조 자료형을 변수에 할당하면 메모리 공간에 주솟값이 저장된다.
- 참조 값을 갖는 변수를 다른 변수에 할당하면 주솟값이 복사되어 전달된다.
- 참조 자료형은 변경이 가능한 값(mutable value)이다.
1. 값 자체를 저장 🆚 주소값을 저장
원시 자료형을 변수에 할당하면 값 자체가 할당됩니다. num이라는 변수를 선언하고 숫자 20을 할당하면 어떤 일이 일어날까요?
let num = 20;
num이라는 이름의 저장 공간에 원시 값 20이 저장 되었습니다. 이처럼 원시 자료형은 값 자체를 저장합니다. 그렇다면 여러 개의 값을 다룰 수 있는 참조 자료형은 어떻게 값을 저장할까요? 예를 들어 arr이라는 변수에 0부터 3까지의 숫자를 요소로 가지고 있는 배열을 할당했다고 해본다고 가정하면
let arr = [0, 1, 2, 3];
배열의 요소를 각각 하나의 공간에 저장한 후 같은 변수명을 부여한다고 가정하면 여러 개의 값이 저장되어 있는 공간에 같은 변수명이 부여되어 있으므로, 원하는 데이터를 조회하기 어려울 것입니다.또 배열의 요소나 객체의 프로퍼티는 추가 및 삭제가 수시로 일어나고, 정해진 개수가 없기 때문에 이와 같은 형태도 바람직하다고 볼 수 없습니다.
JavaScript는 특별한 저장 공간에 참조 자료형을 저장한 후, 그 저장공간을 참조할 수 있는 주소값을 변수에 저장합니다. 이때 참조 자료형을 저장하는 특별한 저장 공간을 힙(heap)이라고 부르기도 합니다. 따라서 변수 arr에 해당하는 저장공간에는 주소값이 저장되어 있고, 그 주소값을 통해 참조 자료형에 접근할 수 있습니다. 이를 참조한다(refer)고 합니다.
2. 원시 값 자체를 복사 vs 주소값을 복사
let num = 20;
let copiedNum = num;어떤 변수에 저장되어있는 원시 자료형을 다른 변수에 할당한다면 그 결과는??
원시 잘료형 값 자체가 복사됩니다. 즉 변수 num 과 변수 copiedNum은 동일하게 20이라는 값을 가집니다.
let num = 20;
let copiedNum = num;참조 자료형이 할당된 변수를 다른 변수에 할당하면, 이 두 변수는 같은 주소를 가리킵니다.
원시 자료형은 원본(num)에 다른 값을 재할당해도 복사본(copiedNum)에 영향을 미치지 않습니다. 반면에 참조 자료형은 원본(arr)을 변경하면 복사본(copiedArr)도 영향을 받는 것을 확인할 수 있었습니다.
값 자체를 복사하는 원시 자료형과는 달리, 참조 자료형을 할당한 변수를 다른 변수에 할당할 경우 같은 주소를 참조하고 있기 때문입니다.
변경 불가능한 값 vs 변경이 가능한 값
한 번 생성된 원시 값은 변경할 수 없습니다. num이라는 변수를 선언하고 숫자 20을 할당해 보겠습니다.
let num = 20;
num = 30;변수에 할당된 값이 20에서 30으로 변경되기 때문에 원시 자료형인 숫자 타입의 값이 변경된 것처럼 보입니다. 그렇다면 원시 자료형이 변경 불가능한 값이라는 것은 무슨 뜻인 걸까요? 값을 재할당했을 때, 메모리에서 어떤 일이 일어났는지 확인해 보겠습니다.
num이라는 변수가 참조하던 공간에 들어 있던 20이 30으로 변경될 것 같지만, 메모리 내부에서는 이처럼 동작하지 않습니다.
만약 위에 있는 코드 처럼 할당된값이 20 에서 30으로 변경되는 상황이 이루어졌을때 즉 값을 재할당했을때 메모리에서는 num 이라는 변수가 참조하던 공간에 들어 있던 20이 30으로 변경될 것 같지만, 메모리 내부에서는 이처럼 동작하지 않습니다.
메모리 내부에서는 30이라는 원시 값을 저장하기 위한 새로운 공간을 확보한 뒤, 그 공간에 num이라는 이름을 붙이고 30을 저장합니다
이처럼 변수에 다른 값을 재할당해도 원시 값 자체가 변경된 것이 아니라 새로운 원시 값을 생성하고, 변수가 다른 메모리 공간을 참조합니다. 따라서 원시 자료형은 어떤 상황에서도 불변하는 읽기 전용 데이터입니다. 이는 원시 자료형이 높은 신뢰성을 가질 수 있는 요인이기도 합니다.
남아 있는 값 20은 JavaScript 엔진은 이처럼 사용하지 않는 값을 자동으로 메모리에서 삭제합니다. 이런 기능을 가비지 콜렉터(garbage collector)라고 합니다. 그러나 가비지 콜렉터가 어느 시점에 진행되는지는 예측할 수 없습니다.
