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

역사

• 과거엔 데이터 저장소(메모리)의 용량이 제한되어 변수 하나에 하나의 원시 자료형 밖에 담을 수 밖에 없었다
• 띄어쓰기, 탭, 쉼표 등으로 데이터를 구분하여 배열과 비슷한 형태로 자료 구조를 구현(comma-separated values)했으나 보통 사이즈가 제한되어 번거로움
• 데이터의 크기가 동적으로 변하는 특별한 데이터 보관함의 필요성 대두

 

 

원시 타입(primitive type)

• 고정된 저장 공간을 차지하는 데이터로 하나의 정보를 가지고 있음
• 객체가 아니면서 method를 가지지 않는 6가지의 타입 number, string, boolean, undefined, symbol, (null)
• 변수에는 데이터의 크기와는 관계 없이 하나의 데이터만 담을 수 있으며 값 자체에 대한 변경이 불가능(immutable)하지만 변수에 다른 데이터를 할당할 수 있음

"hello world"
"안녕하세요 세상"
//"hello world"와 "안녕하세요 세상"은 변경할 수 없는 고정된 값

let word = "hello world"
word = "안녕하세요 세상"
//word라는 변수에 재할당을 하여 변수에 담긴 내용을 변경하는 것은 가능

const despair = "절망"
despair = "희망" //에러 발생
//const 키워드로 선언하면, 재할당 불가능

let despair = 30; //30은 변경할 수 없는 고정된 값
function changeAge(age) { //age에 despair의 값인 30이 전달
  age = 20; //age(30)에 20이 할당
}

changeAge(despair) //despair의 값(30)을 인자로 전달하여 실행
console.log(despair) //30 => 초기에 할당된 값 그대로 유지

 

 

참조 (주소) 타입 (reference type)

• heap이라는 특별한 저장 공간을 사용하고 이 저장 공간은 유동적으로 늘어나며, 여러 개의 데이터를 가지고 있음
• 대표적인 참조 자료형 (원시 자료형이 아닌 모든 것): 배열, 객체, 함수
• 데이터가 위치한 곳(메모리 상 주소)을 가리키는 주소가 변수에 저장되는 방식으로 변수의 주소를 참조하게 됨

let myArray = [1, 2, 3, 6];
let yourArray = myArray; //myArray의 주소가 복사
yourArray[3] = 4; //같은 주소를 공유하기에 myArray[3]도 4로 바뀜
yourArray = undefined; 
//yourArray에 원시 자료형 undefined가 할당되었기 때문에, myArray에 접근할 수 없어짐
console.log(myArray) //myArray는 바뀐 그대로 [1, 2, 3, 4]

console.log([1,2,3] === [1,2,3]); //false
console.log({ name: 'despair' } === { name: 'despair' }); //false
//===은 주소값이 같은지를 확인하는데 값이 같아도 저장된 주소가 다르기 때문

 

 

원시타입과 참조타입의 차이

원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담김

let despair = 30;
let nightmarish = despair; //변수 despair의 데이터값이 복사
nightmarish = 5; //변수 despair와 nightmarish는 별개의 변수이므로 despair엔 영향이 가지않음
console.log(despair) //30

• 변수가 원시타입 데이터를 복사하면 데이터값이 복사되므로 기존 데이터에 영향이 가지 않음

 

참조 자료형이 할당될 때는 보관함의 주소(reference)가 담기기 때문에 기존에 고정된 크기의 보관함이 아니라 동적으로 크기가 변하는 특별한 보관함을 사용할 수 있음

let despair = { age: 30 };
let nightmarish = despair; //변수 despair의 데이터가 위치한 주소가 복사
nightmarish.age = 5; //변수 despair와 nightmarish는 같은 주소를 참조하기에 despair.age 값도 변경
console.log(despair.age) //5

• 변수가 참조타입 데이터를 복사하면 주소가 복사되므로 복사한 데이터에서 원소 변경시 주소 안에 있는 데이터가 변경되어 기존 데이터에 영향이 감

 

Reference

자바스크립트의 타입

null