프론트엔드 짧은 간단 지식 정리 - 원시타입과 참조타입

1. 원시 타입(Primitive)

string, number, boolean, undefined, symbol

• 원시 자료형은 할당할 때, 식별자(변수)에 값 자체가 담긴다.
  • 좀 더 정확히 말하면 할당한 값은 메모리 주소에 할당되고, 식별자(변수)는 이 값을 가리킨다.
  • 값의 변경이 일어나면, 기존 메모리 주소 내에서 값이 변경되지 않는다.
  • 왜냐하면 원시 타입은 불변성(immutable) 의 특징을 가지고 있기 때문이다.

let viewsCount1: number = 999;
let viewsCount2: number = viewsCount1;
viewsCount1 = 1000;

console.log("viewsCount1 is ", viewsCount1); // 1000
console.log("viewsCount2 is ", viewsCount2); // 999

• 위의 예제에 대한 설명은 아래와 같다.
  • Line 1~2: viewsCount1와 viewsCount2는 할당문에 의해 같은 값을 가리킨다.
  • Line 3: viewsCount1 변수에 새로운 할당이 일어나면서 1000이라는 값이 메모리 주소에 새로 할당된다. 그렇게 결과적으로 viewsCount1, viewsCount2는 다른 값을 가지게 된다.

2. 참조 타입(Reference)

Array, Object, function

• 참조 타입의 원시 타입과 가장 큰 차이점은 할당의 주체가 값이 아닌 주소라는 점이다.
  • 참조 타입은 별도의 동적인 데이터 보관함의 특징을 가지는 메모리 영역인 Heap에 저장된다.
  • 콜스택에 생성된 식별자(변수)는 Heap에 생성된 Array, Object, function의 메모리주소를 참조한다.
  • 정리하면, 참조 타입은 원시 타입과 다르게 할당된 값을 복사해서 가지고 있는 게 아니라, 할당된 값이 있는 주소를 참조하여 바라보고 있는 것이다.

let array1 = [1, 2, 3];
let array2 = array1;
array1[1] = 5;

console.log(array1, array2); // [1,5,3]

• 위의 예제에 대한 설명은 아래와 같다.
  • Line1: number Type의 데이터들을 가지는 배열의 영역이 Heap에 생성되고, 콜스택에는 배열 식별자인 array1이 생성된다.
  • Line2: array1, array2는 할당문에 의해 같은 배열을 참조하여 가리킨다.
  • Line3: array1 배열의 Index(1) 위치에서 값의 교체가 일어난다. 동적으로 크기가 변하는 데이터를 보관하기 위한 Heap 메모리에는 배열 영역이 있기 때문에, Heap 영역에서 Index의 값이 교체된다.
  • Line4: 두 식별자는 여전히 동일한 주소를 참조하고 있기 때문에 출력 결과가 서로 동일하다.