원시 타입과 참조 타입

자바스크립트의 변수 타입에 대해 알아보자.

---

원시 타입 (Primitive Type)

자바스크립트의 원시타입으로는 number, bigint, string, boolean, null, undefined, symbol 총 7 개가 존재합니다.

이들의 공통점은 객체가 아니며, 따로 메서드(method)를 가지지 않습니다.

그렇다면 “string 타입”의 메서드는 무엇일까요?

자바스크립트의 런타임이 String 객체를 생성하기때문에 메서드를 갖습니다.

"tmp".concat();
// =>
const str = new String("tmp");

---

불변성 (Immutable)

원시 타입의 가장 큰 특징은 불변성입니다.

자바스크립트에서 원시 타입은 변수에 할당될 때, 메모리의 고정 크기로 원시 값을 저장하고 해당 값이 저장된 메모리 주소을 변수가 가리키는 형태입니다.

값이 절때 변하지않는 불변성을 갖고있기때문에 재할당 시 기존 값이 변하는것처럼 보이지만 메모리에 새로운 재할당한 값이 저장되고 변수가 가리키는 메모리 주소가 달라졌을 뿐입니다.

• 간단 예시

  let a = 100;
  a = 50;
  

  

---

참조 타입 (Reference Type)

자바스크립트에서 원시 타입을 제외한 나머지는 참조타입입니다.

Array, Function, Object가 대표적이며, 원시타입과 가장 큰 차이점은 변수의 크기가 동적으로 변한다는 것입니다.

이러한 특징 때문에 별도의 메모리 공간(Heap)에 저장되며, 변수에 저장되는 값은 힙(Heap) 메모리의 주소가 저장됩니다.

그림에서 볼 수 있듯이 원시타입의 값들은 값들이 직접적으로 저장되어 있지만, myArray (참조타입)는 Heap 메모리의 주소값이 저장되어 있다.

• 간단 예제

  let myArr = [];
  let copyArr = myArr;
  
  myArr.push("hello");
  
  console.log(copyArr); // ["hello"]
  

  

  참조 타입의 변수는 메모리 힙의 주소를 참조하기때문에 myArr 와 copyArr는 같은 메모리 힙의 주소를 갖습니다.

  이러한 특성을 고려하지 않은 채 중요한 정보를 담고있는 객체나 배열에 수정 및 복사를 가하게되면 원본 데이터가 예상치 못한 방향 으로 변경될 수 있습니다.

---

실행 컨텍스트

이번에는 Call Stack에 저장되는 실행 컨텍스트와 함께 살펴보겠습니다.

let a = 10;

let b = [1, 2, 3];

let c = {
  name: "카레유",
  job: "개발자",
};

let d = function test() {
  console.log("test");
};

• 원시 타입 데이터 - a

  Number는 원시 타입으로 10 이라는 값이 콜 스택의 메모리 영역에 저장됩니다.

  변수 a 에는 10이 저장된 콜 스택의 메모리 주소가 저장됩니다.

  변수 a 는 실행 컨텍스트의 렉시컬 환경 (Lexical Environment)에 저장됩니다.

  var로 선언했다면 변수 환경 Variable Environment에 저장됩니다.

• 참조 타입 데이터 - b, c, d

  배열, 객체, 함수 등은 참조 타입이므로 메모리 힙에 저장됩니다.

  참조타입 데이터가 저장된 메모리 힙의 주소값은 콜 스택의 메모리 영역에 각각 저장됩니다.

  메모리 힙의 주소 값이 저장된 콜 스택의 메모리 주소는 각각 변수 b, c, d에 저장된다.

  마찬가지로, 변수 식별자 b, c, d 이름 자체는 콜스택 상의 실행 컨텍스트의 렉시컬 환경 (Lexical Environment)에 저장된다.

---

동일한 구성의 데이터

• 원시 타입

  let a = 10;
  let b = 20;
  
  a = 20;
  

  

  변수 b에는 값이 20이 저장된 콜 스택의 메모리 주소가 저장됩니다.

  변수 a가 값 20으로 재할당되면, 값이 20인 메모리의 주소가 a에 저장됩니다.

  이 주소는 변수 b에 저장된 주소 값과 동일해집니다.

• 참조 타입

  const me = {
    name: "psmin",
    age: 30,
  };
  
  const you = {
    name: "psmin",
    age: 30,
  };
  

  

  참조타입 데이터는 동적으로 내부 요소가 변경될 수 있는 관계로 동일한 요소의 객체를 생성하더라도 메모리 힙에 각각 별도의 메모리 공간을 확보하여 저장됩니다.

  콜 스택이 가지고 있는 주소 값이 서로 다르기 때문에 me와 you는 서로 다른 객체로 인식하게 됩니다.