원시타입과 참조타입

이재홍·2024년 7월 2일

JavaScript

목록 보기

12/13

원시타입과 참조타입

원시타입과 참조타입은 JS에서 데이터 저장 및 처리 방식의 기본적인 두 가지 유형이다.
각각의 장단점과 사용예시를 통해 더 효율적으로 JS 프로그래밍을 할 수 있다.

원시타입(Primitive Types)

숫자 연산, 문자열 처리, 불리언 값 체크 등 단순한 데이터 저장과 처리에 사용

let age = 25; // number
let name = "Alice"; // string
let isStudent = true; // boolean

종류 : number, string, boolean, undefined, null, symbol, bigint

특징

불변성(Immutable): 원시타입의 값은 변경할 수 없다. 값을 변경하면 새로운 값을 할당하는 것일 뿐.
값 자체 저장: 변수에 값 자체가 저장된다.
메모리: 상대적으로 메모리를 적게 사용한다.

장점

메모리 효율성: 값 자체를 저장하므로 메모리 사용이 적고, 불변성으로 인해 복사가 간단.
성능: 값 자체를 직접 참조하기 때문에 접근 속도가 빠름
간단함: 데이터 구조가 단순하여 사용하기 쉬움

단점

제한된 기능: 불변성이 있어서 값을 변경할 수 없다 (?)
고정된 크기: 저장할 수 있는 데이터의 크기가 고정되어 있다.

불변성이 뭔데?

원시 타입은 불변성을 갖고있다.
자바스크립트에서 원시 타입은 변수에 할당될 때, 메모리의 고정 크기로 원시 값을 저장하고 해당 저장된 값을 변수가 직접적으로 가리키는 형태. 또한 값이 절대 변하지 않는 불변성을 갖고 있기 때문에 재할당시 기존 값이 변하는 것처럼 보일지 몰라도 사실 새로운 메모리에 재할당한 값이 저장되고 변수가 가리키는 메모리가 달라진 것 뿐이다!

let a = 100;
a = 50;

a란 변수에 100 할당 후, 50으로 재할당한 예시.
처음 할당할때 Number 타입의 100이란 값이 생성, 식별자 a는 메모리에 생성된 100의 메모리 주소를 가리킴.
메모리에 생성된 100이란 값이 50으로 수정되는 것이 아닌 새로운 Number 타입의 50이란 값을 새로운 메모리에 생성하고, a가 가리키던 메모리가 바뀌는 형태인 것!

let a = 100;
let b = a;
a = 50;

console.log(b); // 100

새로운 변수 b에 a를 할당하게 되면 변수 b의 공간에는 a의 값을 통째로 복사하여 변수의 메모리에 담게 됨.
변수 a가 50으로 재할당 되더라도 b는 영향을 받지 않는다.

참조 타입(Reference Types)

사용자 정보 저장, 배열을 통한 리스트 관리, 함수 정의 등 복잡한 데이터 구조와 관련된 작업에 사용된다.

let user = { name: "Alice", age: 25 }; // 객체
let numbers = [1, 2, 3, 4, 5]; // 배열
function greet() {
  console.log("Hello!");
} // 함수

종류: Object,Array,Function,Date,RegExp,Map,Set

특징

변경 가능성(Mutable): 참조 타입의 값은 변경할 수 있다.
참조 저장: 변수에 값이 저장된 위치(참조)가 저장
복잡합 데이터 구조: 다양한 데이터 구조를 저장할 . 수있음

장점

변경 가능성: 값을 자유롭게 변경할 수 있어 복잡한 데이터 조작이 가능
유연성: 객체, 배열 등 다양한 데이터 구조를 저장하고 처리할 수 있다.
메서드와 속성: 객체는 메서드와 속성을 가질 수 있어 데이터와 관련된 동작을 정의할 . 수있다.

단점

메모리 사용: 참조를 통해 접근하므로 원시 타입보다 메모리를 더 사용
복잡성: 데이터 구조가 복잡하여 관리가 어렵고, 참조로 인해 예기치 않은 부작용이 발생
성능: 값 자체를 저장하는 원시타입보다 접근 속도가 느릴 수 있다.

변경가능성? Mutable?

참조타입의 원시타입과 가장 큰 차이점은 변수의 크기가 동적으로 변한다는 것.
이러한 특징 때문에 객체의 데이터 자체는 별도의 메모리 공간(Heap)에 저장되고, 변수에 할당 시 데이터에 대한 주소(Heap 메모리 주소)가 저장되기 때문에 JS 엔진이 변수가 가지고 있는 메모리 주소를 이용해서 값에 접근하게 된다!

그림을 보면 원시타입 값들(newVar, MyNumber, myString) 값들은 직접적으로 저장되어 있는 모습.
myArray 같은 참조타입은 Heap 메모리의 주소값이 저장되어 있다.

let myArr = [];
let copyArr = myArr;

myArr.push("hello");

console.log(copyArr); // ["hello"]

위 코드와 그림을 보면,
참조타입의 변수는 실제 데이터가 저장된 주소를 참조(reference)하기에 참조타입이라고 불리는 것.
변수의 복사나 수정 시 참조 여부를 고려하자.
만일 이러한 특성을 고려하지 않는다면 원본 데이터가 예상치 못한 방향으로 변경될 수 있다.

비교

특성	원시 타입	참조 타입
저장 방식	값 자체를 저장	값의 참조를 저장
변경 가능성	불변(immutable)	변경 가능(mutable)
메모리 사용	적음	많음
성능	빠름	느릴 수 있음
복잡성	단순	복잡
사용 예시	단순 데이터(숫자, 문자열 등)	복잡한 데이터 구조(객체, 배열 등)