본문 바로가기
안녕하세요 :) FE 개발자 윤지홍입니다.
저는 리액트를 주로 사용해요.
UX/UI디자인에도 관심이 있어요.
Javascript React NextJs NodeJs Flutter HTML CSS PHP
👋
Javascript 원시타입과 참조타입
jiiii-hong | Javascript | 2022년 08월 23일

Javascript 원시타입과 참조타입

Javascript 원시타입과 참조타입

jiiii-hong Javascript 2022년 08월 23일

들어가기

javascript 변수 타입에는 원시타입과, 참조타입으로 나누어져 있는데 이 원시타입과 참조타입에 대해 알아보자.

원시 타입이란?

원시타입의 종류에는 string, number, bigint, boolean, undefined, symbol이 있다.

이 타입의 데이터들은 불변성을 가지고 있다. 즉 읽기 전용으로 값을 변경할 수 없고 변수에 할당될 때 메모리의 크기가 고정되어 절대 변하지 않는 특징을 가지고 있다. 그리고 변수 선언 시 변수에 실제 값을 저장한다.

이러한 특징 때문에 변수의 값을 변경하더라도 기존 값이 변경되는게 아닌 새로운 메모리에 값이 생성되고 해당 값이 변수에 저장된다.

위 이미지 처럼 변수 c에 a를 할당했을 경우 변수 c는 a와 연결되는게 아닌 a의 실제 값인 10이 변수 c에 저장된다.

또한 원시 타입의 데이터는 변경이 불가능하기 때문에 c의 값을 30으로 변경할경우 완전히 새로운 값을 생성해 변수에 값을 저장한다.

그럼 참조 타입은?

참조타입은 원시 타입을 제외한 나머지들이 모두 참조 타입이다..!

참조 타입의 데이터들의 경우 메모리의 크기가 고정되어 있지 않고 변할 수 있기 때문에 Memory Heap에서 따로 관리한다. 또한 변수 할당 시 원시 타입과 다르게 실제 값을 저장하지 않고 Heap에 생성된 메모리 주소 값을 저장한다. (아래 이미지 참고)

 

이제 아래 코드를 보자.

let a = [1, 2, 3, 4];
let b = a;

console.log(a); // [1, 2, 3, 4]
console.log(b); // [1, 2, 3, 4]

a[0] = 0;

console.log(a); // [0, 2, 3, 4]
console.log(b); // [0, 2, 3, 4]

변수 b는에 변수 a를 할당 하고 콘솔을 확인해보면 a와 b는 당연히 같은 값을 출력한다. 이때 a[0] 값을 변경하게 되면 변수 a와 변수 b는 같은 주소를 바라보고 있기 때문에 다시 콘솔을 확인해보면 a와 b는 같은 값을 출력한다.