[JS] JavaScript의 데이터 타입 분류 : 원시 타입과 참조 타입

 

 

ES6 기준 JavaScript에는 총 7개의 타입이 존재하며 원시 타입과 참조 타입으로 분류할 수 있습니다.

어디에 써먹나요?

타입의 속성에 대해 제대로 이해하지 않은 상태에서 알고리즘을 풀었을 때 뜻하지 않은 오류를 만난 적이 있습니다. 변수의 타입을 정확하게 이해한다면 예상치 못한 오류를 방지하고 의도한 방향에 맞게 사용할 때 도움이 될 것입니다.

분류 기준

원시 타입과 참조 타입으로 분류하는 기준은 무엇일까요? 바로 변수의 성격과 데이터의 저장 방식에 있습니다.

원시 타입 (Primitive Types)

• 불변성: 원시 값은 불변하며, 값을 변경하려면 새로운 값을 할당해야 합니다.
• 값이 직접 저장됨: 원시 타입의 데이터는 변수에 실제 값이 직접 저장됩니다.
• 복사가 값 자체에 의해 이루어짐: 변수 간의 할당이 값 자체를 복사하여 이루어집니다.
• 원시 타입 종류: Undefined, Null, Boolean, Number, String, Symbol

참조 타입 (Reference Types)

• 가변성: 참조 타입의 객체는 가변하며, 속성을 추가, 삭제, 수정할 수 있습니다.
• 값이 저장된 주소를 참조함: 참조 타입의 데이터는 값이 저장된 메모리 주소를 변수에 저장하고, 실제 값은 해당 주소에 저장됩니다.
• 복사가 주소에 의해 이루어짐: 변수 간의 할당이 저장된 주소를 복사하여 이루어집니다.
• 참조 타입 종류: Object (Object, Array 등)

요약하자면 원시 타입은 값을 변경할 수 없고 변수에 저장할 때 실제 값을 직접 저장하는 반면, 참조 타입은 값을 변경할 수 있으며 값이 저장된 메모리 주소를 참조합니다.

예시를 통해 두 타입의 차이를 더 쉽게 알아보겠습니다.

원시 타입과 참조 타입 : 불변성 vs 가변성

JavaScript에서 const를 사용해 변수를 정의할 경우 변수를 재할당할 수 없습니다. 만약 const로 선언한 변수에 원시 타입과 참조 타입을 각각 할당할 경우 어떤 차이가 있을까요?

원시 타입: 불변성

const num = 1;

// num에 2를 재할당하기 (Type Error)
num = 2;  // TypeError: Assignment to constant variable.
num += 1; // TypeError: Assignment to constant variable.

const를 사용해 정의한 변수는 재할당 할 수 없기 때문에 다른 값을 할당하면 에러가 발생합니다. 따라서 num의 값은 어떤 경우에도 항상 1로 고정됩니다.

참조 타입: 가변성

const arr = [];

// arr에 [1]을 재할당하기 (TypeError)
arr = [1];  // TypeError: Assignment to constant variable.

// arr에 1을 추가하기
arr.push(1);
console.log(arr) // [1]

참조 타입을 할당했을 경우에도 마찬가지로 재할당이 불가능합니다. 하지만 참조 타입은 가변성을 가지기 때문에 재할당 하지 않고 할당된 값 자체를 변경하는 것은 가능합니다.

 

따라서 arr에 원소를 추가하고 싶다면 값이 추가된 배열을 재할당하는 것이 아니라, 이미 할당된 배열에 원소를 추가하는 방식으로 구현할 수 있습니다.

원시 타입과 참조 타입 : 값을 저장 vs 주소를 참조

원시 타입: 값을 저장

let numA = 1;

let numB = numA;
numB++;

console.log(numA === numB); // false
console.log(numA);          // 1
console.log(numB);          // 2

numB에 numA를 할당할 때는 numA의 값인 1을 복사해 저장합니다. 따라서 numB의 값을 변경(정확하게는 재할당)하더라도 numA는 변하지 않습니다.

참조 타입: 주소를 참조

let arrA = [1, 2];

let arrB = arrA;
arrB.push(3);

console.log(arrA === arrB); // true
console.log(arrA);          // [1, 2, 3]
console.log(arrB);          // [1, 2, 3]

arrB에 arrA를 할당할 때는 arrA의 값([1, 2])이 아닌 arrA의 메모리 주소를 저장합니다. 원본의 값을 복사하는 것이 아니라 메모리 주소를 저장한 후 해당 주소에 있는 값을 읽어오는 방식입니다.

 

따라서 arrB.push(3)로 arrB의 값을 변경하면 arrA의 값도 함께 변하게 됩니다.