[JavaScript] 원시타입 vs 참조타입

 

데이터 타입

• 자바스크립트에서 데이터 타입은 변경 불가능한(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';

• 참조 타입을 복사해서 그 내용을 수정해도 원본 변수와 복사한 변수 모두 같은 주소를 참조하기 때문에, 원본 변수의 객체에도 영향을 미친다. (두 변수 모두 같은 객체를 가리키고 있는 것.) 

 

• 이러한 참조 여부를 무시한 채 값을 변경하면 예상과 다른 결과가 나올 수 있으니 주의가 필요하다.

 

참고자료

• The Complete JavaScript Course 2022
• JavaScript의 타입과 자료구조 MDN
• [Java Script] 원시타입과 참조타입
• [javascript] 콜스택/메모리힙 구조, 데이터 저장/참조 원리
• [javascript] 원시타입(primitive type) VS 참조타입(reference type)(feat. stack과 heap 영역)
• 모던 자바스크립트 Deep Dive : 자바스크립트의 기본 개념과 동작 원리