[JS][자료형] 자료형 기본

 

Javascript에서 자료형이란 변수에 저장할 수 있는 값의 종류를 의미합니다.

크게 원시 자료형(Primitive)과 참조 자료형(Reference) 두가지로 나눌 수 있습니다.

원시 자료형

원시 자료형은 값 자체가 변하지 않는 불변의 데이터입니다. 주요 원시 자료형은 다음과 같습니다

Number : 숫자 타입 ( 42, 3.14, 0 , … )

String : 문자 타입 ( “가나다라”, “ABC”, … )

Boolean : 논리 타입 ( true, false )

Null : 값 없음 (null)

Symbol : 고유하고 변경 불가능한 값

BigInt : 매우 큰 정수

참조 자료형

참조 자료형은 객체를 가리키며, 데이터 자체가 메모리 상의 다른 위치에 저장됩니다. 주요 참조 자료형은 다음과 같습니다.

 

Object: 여러 데이터를 하나의 단위로 묶어 관리할 수 있는 복합 자료형입니다.

let person = { name: "Alice", age: 30 };

 

Array: 순서가 있는 리스트 형태의 객체로, 여러 데이터를 하나의 변수에 저장할 수 있습니다.

let numbers = [1, 2, 3, 4, 5];

 

Function: JavaScript에서는 함수도 객체이므로, 참조 자료형에 속합니다.

function greet() {
  console.log("Hello!");
}

저장 방식의 차이

이 두가지 자료형의 주요 차이점으로는 변수에 저장되는 값의 형태가 다르다는 특징이 있습니다.

원시 자료형에는 실제 “값”이 저장됩니다. 예를 들어, let a = 10;에서 숫자 10 자체가 변수 a에 저장됩니다.

참조 자료형에는 값을 저장하고 있는 곳의 “주소”가 저장되고 실제 값 자체는 heap영역에 저장됩니다.

예를 들어, let obj = { value: 10 };에서 변수 obj에는 객체의 메모리 위치가 저장됩니다.

아래 두 코드는 저장 방식 차이의 이해를 돕기 위한 코드입니다.

// 원시 자료형
function test() {
  let a = 0;
  let b = a;
  let c = b;

  a = 1;

  console.log(a); // 1
  console.log(b); // 0
  console.log(c); // 0
}

// 참조 자료형
function test() {
  let a = { value: 0 };
  let b = a;
  let c = b;

  a.value = 1;

  console.log(a); // { value: 1 }
  console.log(b); // { value: 1 }
  console.log(c); // { value: 1 }
}

원시 자료형과 참조 자료형의 결과가 다르다는 것을 볼 수가 있습니다.

원시 자료형의 경우 a 변수의 값만 변경해줬고, a의 결과만 변경이 되었습니다.

 

이와 다르게 참조 자료형의 경우에는 a의 value값만 변경해줬는데, b와 c의 value값까지 모두 변경이 되었습니다.

이러한 현상은 a에 실제로 객체가 저장된 것이 아닌 “값이 저장된 주소”를 저장했기 때문입니다.

 

이 주소를 b,c에도 동일하게 전달했기 때문에 세 변수 a,b,c는 모두 하나의 객체를 바라보고 있습니다.

이로인하여 a의 값을 변경한 것 같지만 사실은 a가 가지고 있는 주소값을 따라가서 실제 저장되어 있는 객체의 값을 변경했고

같은 객체를 바라보고 있는 b와 c를 콘솔에 출력했을 때 마찬가지로 값이 바뀌어져 있는 것입니다.

 

쉽게 생각해보면 a와 b와 c는 가족이어서 같은 주소를 갖고 있습니다.

어느날 집에 냉장고가 고장이나 냉장고를 버렸다면 그 집에는 더 이상 냉장고가 없게됩니다.

이 때 a,b,c에게 각각 집에 냉장고가 있는지 없는지 물었을 때 모두 없다고 대답할 것 입니다.

 

위와 같은 차이로 인하여 변수에 기존 참조 자료형의 변수를 할당 한다면 주의가 필요합니다.

신규로 선언한 변수의 내부 값을 변경하게 된다면 기존 변수의 값도 변경이 될 수 있습니다.

때문에 같은 참조가 아닌 “값”만 할당받아 오고 싶다면 “깊은 복사”에 대해서 고려해야 합니다.

(스프레드 연산자, lodash 등..)