해당 내용은 '코어 자바스크립트' 서적을 참고하여 작성되었으며, 초보 개발자에게 유익한 책을 지필해주신 지은이 정재남 님께 감사의 말씀을 드립니다.

데이터 타입

종류

(출처 : 소년코딩의 자바스크립트 강좌)

• 위 그림에서 직관적으로 볼 수 있다시피 두 가지 종류로 나누어져 있다.

  • 기본형(primitive type)
  • 참조형(reference type)

  : 두 종류의 가장 큰 차이점은 할당이나 연산시 전달되는 방식이다.

기본형 vs 참조형

먼저 기본형 타입은 값이 담긴 주소를 전달한다.
다음 참조형 타입은 값이 담긴 주소 들의 묶음이 담긴 주소를 전달한다.

다시 설명하자면...
기본형 타입은 데이터 값이 가리키는 주소로 가면 특정 내용(숫자, 문자 등) 이 있지만,
참조형 타입은 데이터 값이 가리키는 주소로 가면 주소 묶음 이 있는 것이다.

배경지식

• 용어 정리

  • 비트 vs 바이트
    모든 데이터는 0 or 1 로 변환되어 메모리에 저장된다. 이 메모리 단위를 '비트'라고 한다.
    여기서 메모리 공간을 좀더 효율적으로 사용하기 위해 '비트'를 묶어서 만든 새로운 메모리 단위를 '바이트'라고 한다.
    (1byte = 8bit)

  • 변수 vs 식별자
    '변수'는 어떤 데이터에 대하여 선언하고 할당할 때 활용되는 공간을 의미하며,
    '식별자'는 데이터의 값마다 부여되는 이름, 변수명을 의미한다.

변수의 선언과 할당

변수의 선언과 할당에 대해서는 서적에서 예제와 그림이 나와있으며 이를 참고하여 학습하면 훨씬 쉽게 이해할 수 있다. 그리고 '변수영역'과 '데이터영역'이라는 용어는 필자가 직접 만든 개념이라고 한다.

let variable = 1;
// 위 코드에서 변수 'variable' 와 데이터 '1' 값은 따로 변수영역, 데이터영역 메모리에 저장되고, 주소 또한 별도로 지정된다.

variable = variable + 2;
/* 다음 코드에서 기존 값에 "+2" 연산이 적용되어 데이터 '3'이 만들어지는데
이때 데이터 '3' 또한 데이터영역에서 별도의 메모리 주소로 저장된다.*/

불변값 vs 가변값

• 변수에 할당되는 데이터에 대해서 불변값과 가변값으로 나눌 수 있는데
  기본형 이 불변값이라 할 수 있고, 참조형 이 가변값이라 할 수 있다.

let primitive = 1;
primitive = 2;
/* 위에서 할당하는 'primitive' 변수의 값(1, 2)은 각각 다른 주소를 지닌 데이터를 받는다.
이는 정확히 말하자면 해당 변수가 가리키는 주소가 변한 것이다.
그렇기에 각각의 데이터가 지닌 주소 자체는 변함이 없다(불변값).*/

let reference = {
  var1 = 1,
  var2 = 2,
};

reference.var1 = 3;
/*다음 코드에서 변수 'reference' 안의 var1 의 값이 '1' 에서 '3'으로 바뀌었다.
앞서 보았던 기본형과는 달리 참조형에서는 가리키는 주소가 바뀌지 않았는데, 데이터가 변한것이다(가변값).
정확히 말하자면 'reference'의 값(주소) 는 변하지 않았지만, 
변수 영역에 저장된 'var1'의 값(주소) 이 변한 것이다.*/

흔히 기본형과 참조형의 차이를 말할 때에
기본형은 값을 복사하지만, 참조형은 주소를 복사한다고 말한다.
이는 기본형이 불변값의 성질을 갖고 있기 때문이다.
다시 말하자면 기본형도 주소를 복사하지만 참조형과 달리 한단계만 거치기 때문에
즉, 기본형의 값(주소)이 또다른 값(주소)으로 이어지지 않기 때문에
값을 그대로 복사한 것과 같이 이해할 수 있다.

변수 복사

• 위에서 설명한 참조형의 가변값 성질을 다시 확인할 수 있다.

let obj1 = {
  a: 123,
  b: [1, 2, 3],
};

// 첫 번째 상황(변수 복사)
let obj2 = obj1;


// 두 번째 상황(똑같은 값을 할당)
let obj2 = {
  a: 123,
  b: [1, 2, 3],
};

// 상황에 따라 아래 결과가 다르다.
obj2.a = 345;

console.log(obj1);
console.log(obj2);
// 첫 번째 상황에서는 obj1, obj2 둘다 'a' 값이 변한다.
// 두 번째 상황에서는 obj2 변수에서만 'a' 값이 변한다.

• 참조형은 주소를 복사하기 때문에 그 주소에 해당하는 데이터 값이 바뀌면 모든 변수에 적용된다(첫 번째 상황 설명).
• 그리고 식별자의 이름이 같다고 해서 메모리 주소가 동일한 것은 아니기 때문에 각각 할당을 해줬을 때에는 위와 같이 데이터 변환이 전역으로 적용되지 않는다(두 번째 상황 설명).