데이터 타입
- 자바스크립트에서 데이터 타입은 변경 불가능한(immutable) 원시 타입과, 변경 가능한(mutable) 참조 타입으로 구분된다.
출처 : https://ihoneymaan.medium.com/javascript-engine-and-how-it-works-e1fa2f7a657c
- 원시 타입은 콜스택 내의 실행컨텍스트에 저장되고, 참조 타입(객체)은 메모리 힙에 저장된다.
- 변수 식별자가 가리키는 메모리 주소에 저장된 값이 실제 값인지 혹은 참조할 메모리 주소인지에 따라 원시 타입과 참조 타입을 구분할 수 있다.
원시 타입
- 객체를 제외한 모든 타입의 값(Boolean, Null, Undefined, Number, String, Symbol, BigInt) 을 원시 타입 값이라고 한다.
- 한번 생성된 원시 값은 읽기 전용 값으로, 변경할 수 없다.
let age = 30;
let oldage = age;
age = 31;
// age === 31
// oldage === 30
- age 변수의 값을 31로 재할당하였음에도, oldage의 값이 바뀌지 않는 이유는 무엇일까? 원시 타입의 값은 변경할 수 없는 값이기 때문이다.
- 값을 변경할 수 없기 때문에 age = 31 이라는 새로운 값을 재할당할 때는, 새로운 메모리공간을 확보해 그 곳에 값을 저장한다.
- age변수는 새롭게 할당된 메모리에 31이라는 값을 가지고 있지만, oldage는 여전히 같은 메모리에 저장되어 있기 때문에 위와 같은 결과를 얻는다.
참조 타입 (객체)
- 원시 타입이 아닌 타입의 값(객체 리터럴, 배열, 함수, etc)을 참조 타입이라고 한다.
- 객체는 원시값과 비교해 제약이 없기 때문에 확보해야 할 메모리 크기를 사전에 정할 수 없다.
- 따라서 데이터는 대량의 데이터를 저장할 수 있는 힙에 저장되고, 힙에 저장된 메모리 주소가 콜스택에 값으로서 저장되는 것.
- 이 메모리에 저장된 주소 값을 참조 값이라고 하며, 콜스택의 변수 식별자는 이를 참조해 실제 데이터에 접근할 수 있는 것이다.
출처 : 모던 자바스크립트 Deep Dive
- 객체는 변경 가능한 값이므로, 메모리에 저장된 객체를 직접 수정할 수 있다. 이 때 객체를 할당한 변수를 재할당 하지 않았기 때문에, 참조 값은 변경되지 않는다.
const me = {
age : 24,
firstName : 'Egg'
};
// 프로퍼티 값 갱신
me.age = 25;
// 프로퍼티 동적 생성
me.lastName = 'Fried';
- 참조 타입을 복사해서 그 내용을 수정해도 원본 변수와 복사한 변수 모두 같은 주소를 참조하기 때문에, 원본 변수의 객체에도 영향을 미친다. (두 변수 모두 같은 객체를 가리키고 있는 것.)
- 이러한 참조 여부를 무시한 채 값을 변경하면 예상과 다른 결과가 나올 수 있으니 주의가 필요하다.
참고자료
![[JavaScript] 원시타입 vs 참조타입](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEiiF6%2FbtrAlhsjYlo%2FmniwXHRbqnIOMUZ6MG4Dp1%2Fimg.png)