[JS] js를 쓴다면 꼭 알아야 할 원시타입과 참조타입

도현·2024년 11월 14일

JS-DeepDIve

목록 보기
2/4
post-thumbnail

원시타입

자바스크립트엔 크게 두 가지 타입으로 갈리는데, 원시타입과 객체타입(참조타입)으로 갈린다.
원시타입엔 string, number, bigint, boolean, undefined, symbol, null이 있고
원시타입은 변수를 선언하고 데이터 복사가 일어날 때 데이터를 직접 가르킨다.

때문에 우리가 변수를 재할당할 때 변수의 데이터가 바뀌는 것 처럼 보일 수 있지만 사실은 새로운 메모리 영역이 생성되고 가리키던 메모리가 바뀌는 것이다.

예를 들면, let a = 1을 선언하면 메모리에 생성된 1의 주소를 가리킨다.
그리고 a = 10으로 재할당을 하면 1이였던 값이 10으로 바뀌는 것이 아닌, 메모리에 10이 생성되고 a는 새롭게 10의 주소를 가리키는 것이다.

이를 고려하여

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

이 코드를 보면,
새로운 변수 b에 a를 통째로 복사해서 넣었기 때문에 나중에 a가 재할당 되더라도 b의 값은 바뀌지 않는다.

참조타입

반면에 참조타입엔 객체(object), 배열(array), 함수(function)등이 있는데
원시타입과의 차이점은 변수의 크기가 동적으로 변하기 때문에 참조타입드의 데이터는 별도의 메모리공간(heap)에 저장되며, 변수 할당 시 데이터에 대한 주소(heap 메모리의 주소값)가 저장되기 때문에 자바스크립트 엔진이
변수가 가지고 있는 메모리 주소를 이용해서 변수의 값에 접근한다.

위와같이 메모리엔 힙 메모리의 주소가 저장되어 있다.

let myArr = [];
let copyArr = myArr;

myArr.push("hello");

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

때문에 이렇게 원시타입으로 할당 했으면 재할당이 되겠지만 배열과 같은 참조타입으로 재할당 하면 myArr가 가리키던 힙 메모리의 주소를 그대로 참조하는 것이다.

이렇게 데이터를 참조하기 때문에 참조타입이라고 불린다. 만약 이러한 참조타입의 특성을 고려하지 않으면 데이터 플로우가 예상하지 못한 방향으로 흘러갈 수 있기 때문에 주의해야 한다.

profile
FE-Engineer

0개의 댓글