data-type.md

프로그래밍에서 데이터 타입은 매우 중요한 요소입니다. 그런데, 왜일까요? 어차피 데이터는 컴퓨터 메모리에 2진수로 저장될 텐데요, 왜 타입을 구분해서 정의했을까요?

데이터 타입(Data Type)

값의 종류로서 메모리의 공간을 효율적으로 사용하기 위해 필요합니다.

분류

데이터 타입은 크게 원시(Primitive) 타입과 객체(또는 참조, Object/Reference) 타입으로 분류합니다.

1. Number, String, Boolean, undefined, null, Symbol은 원시 타입입니다. 그 외는 객체 타입입니다.
2. 원시 타입은 변경 불가능한 값(Immutable Value)입니다.
3. 참조 타입은 변경 가능한 값(Mutable Value)입니다.

잠깐, 내용이 길어질 수 밖에 없는 원시 값과 객체의 비교 항목입니다. 구분선으로 분리하고 갈까요?

---

---

변경이 불가능하다, 가능하다? 이상하지 않나요? 저희는 변수의 값을 자주 바꿨습니다. 아래처럼요.

// const는 상수를 의미하기에 재할당이 불가능합니다!
let x = 5;
x = 10;
console.log(x); // 10

분명 x의 값은 변경되었는데... 대체 뭐가 불가능이고 가능일까요?

우리는 먼저 변수의 의미에 대해 생각해봐야 합니다. 변수는 메모리 공간 자체이자 메모리 공간을 식별하기 위해 붙인 이름입니다. 값은 이름에 저장된 실체(데이터)로서 표현식이 평가되어 생성된 결과입니다.

즉 변경 불가능하다, 변경 가능하다라는 건 변수 자체가 아니라 값에 대한 내용인 것이죠.

글로만 보면 이해하기 힘들거에요. 그림과 함께 봅시다.

원시 타입(Primitiv Type) : 변경 불가능한 값(Immutable Value)

기존에 할당된 값을 직접 변경하는 것이 아니라 새로운 원시 값을 생성합니다.

여기 변수 score를 선언하고 할당한 코드가 있습니다.

let score = 80;
score = 100;
console.log(score); // 100;
let copy = score;

우리는 쉽게 추론할 수 있습니다. 맨 처음 변수 score가 선언됩니다. 동시에 최초 값 80이 할당되며 초기화 됩니다. 그 후 변수 score에 100을 재할당하죠. 우리는 이를 통해 값이 변경되었다고 이해합니다.

거기서 끝이 아니죠? 변수 copy를 선언하면서, score의 값으로 초기화합니다. 이 다음 단계로 변수 copy에 90을 재할당합니다. 비교하면 어떻게 될까요? 당연히 score = 100, copy = 90이겠죠?

이제 언급한 일련의 절차가 내부에서 어떻게 동작되는지 그림으로 볼까요?

변수 score의 값 할당과 재할당에 대한 메모리 주소

이처럼 원시 값은 재할당이 되면 메모리 주소가 변경이 됩니다. 즉, 값에 대한 변경이 기존 메모리 주소가 가진 데이터 자체를 변경시키는 게 아니라는 거죠.

원시 값을 복사할 때의 메모리 상태

이 그림은 변경이 불가능하다와는 조금 다른 의미의 예제이지만, 아래 설명할 변경이 가능한 값에 대한 내용이 연관되므로 한 번 보고만 갑시다. 새로운 변수에 이 값을 할당하면 어떤 일이 일어날까요? 값 자체를 복사해서, 새로운 메모리에 할당할 뿐입니다. 즉, 메모리 주소가 변경되어 각각 다른 메모리 주소를 가리키므로, 깊은 복사라고 합니다.

이를 값에 의한 전달(Pass by Value) 또는 값에 의한 호출(Call by Value) 이라고 합니다.

원시 값이 변경될 때의 논리

결국, 변수 copy는 변수 score의 값을 복사한 것일 뿐이며, 서로가 연관되지 않고 재할당을 할 때마다 메모리 주소가 변경되는 형태인 것이죠.

그럼 이제, 변경 가능한 값인 객체를 볼 차례입니다.

객체 타입(Object Type) : 변경 가능한 값(Mutable Value)

객체는 참조 값에 접근하는 형태로, 기존에 할당된 이 참조 값을 직접 변경할 수 있습니다.

자바스크립트에서의 객체는 프로퍼티(Property)의 개수가 한정적이지 않으며, 동적으로 추가/삭제될 수 있습니다. 또한 프로퍼티의 값도 제약이 없습니다.

그렇기에 원시 값과 같이 메모리 공간의 크기를 명확히 정의할 수 없으며, 이 복합적인 자료구조인 객체는 원시 값과 다른 방식으로 동작하도록 설계 되었습니다.

자, 이제 예제를 볼까요? 여기 객체를 선언하고, 내부 프로퍼티를 할당한 코드가 있습니다.

const score = {
  math: '100',
};
const copy = score;
copy.history = '80';
score.sociology = '99';

원시 값을 할당한 변수는 원시 값 자체를 값으로 갖습니다. 그러나 객체의 경우, 할당한 변수가 기억하는 메모리 주소인 참조 값(Reference Value)에 접근할 수 있습니다. 참조 값은 객체가 저장된 메모리 공간의 주소입니다.

그렇기에 객체는 재할당 없이 객체를 직접 변경할 수 있으며 동적으로 프로퍼티의 값을 갱신할 수 있는 것이죠. 이제 그림으로 객체의 선언과 할당, 프로퍼티 갱신에 대한 내부 동작을 볼까요?

변수 score에 객체 선언 후 변수 copy에 할당

선언과 초기화를 거친 변수 score는 객체 { math: '100' }을 가리키고(참조하고) 있습니다. 이를 변수 copy에 할당하면 값 자체를 할당하는 것이 아닌, score가 가리키는 객체의 주소를 할당하게 됩니다. 마치 복사한 것 같은 효과가 일어납니다.

이를 참조에 의한 전달(Pass by Referecne) 또는 참조에 의한 호출(Call by Reference) 이라고 부릅니다.

객체를 변경했을 때의 메모리 형태

객체는 변경 가능한 값으로, 메모리에 저장된 객체를 수정할 수 있습니다. 이유는? 위에서 언급한대로 메모리 주소를 가리키고 있기 때문이죠. 이때 객체를 저장한 변수에 재할당을 하지 않으므로 변수가 참조하는 주소(값)은 변하지 않고 남아있게 됩니다.

객체 선언, 할당, 동적 할당과 그 결과

이렇게 설계된 이유는 결국 객체를 생성하고 관리하는 방식은 매우 비용이 많이 들기 때문입니다. 원시 값처럼 제어한다면, 메모리가 낭비되고 성능이 악화되죠. 프로그래밍은 당연히 효율적이어야 하며, 이를 개선하기 위해 변경이 가능한 값으로 설계가 되고, 메모리의 주소를 참조하는 형태가 된 것입니다.

물론, 위의 그림처럼 문제점이 존재합니다. 어째서 변수 score와 변수 copy에 각각 동적으로 할당한 프로퍼티 history, sociology가 존재할까요? 이는 구조적인 단점으로, 여러 식별자가 하나의 객체를 공유하기 때문입니다. 메모리 주소가 변경되지 않고 동일한 주소를 바라보므로 얕은 복사 라고 하며, 이러한 문제점을 해결하기 위해서는 객체 내부의 모든 객체까지 복사하는 깊은 복사를 거쳐야 합니다.

정리 : 원시 값과 객체

사실 이렇게 구분하여도, 값에 의한 전달과 참조에 의한 전달은 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사하여 전달하는 면에서 동일합니다. 이렇게 보면 결국 자바스크립트에서는 값에 의한 전달만 존재한다고 할 수 있죠. 가끔 공유에 의한 전달이라고도 합니다만, 어느 쪽이든 상관 없습니다.

하지만 저희는 원시 값과 객체를 구분하기 위해 값에 의한 전달과 참조에 의한 전달로 구별합니다.

여기서 기억해야 할 것은, 다른 프로그래밍 언어는 포인터(Pointer)의 존재로 인해 전달 방식이 명확히 구분되며, 자바스크립트가 말하는 전달의 의미와는 완벽하게 일치하지 않음을 기억해주세요.

---

---

여기까지 원시 값과 객체에 대한 설명이었습니다. 다시 돌아가서, 데이터 타입이 가지는 특징을 살펴봅니다. 숫자 1과 문자열 '1'은 비슷해 보이지만 다릅니다. 용도(연산, 화면에 출력 등) 뿐만 아니라 각 타입별 확보할 메모리 공간의 크기와 2진수 값도 다르고 심지어 해석조차 틀립니다.

필요성

만약 같다면 어떻게 될까요? 타입은 의미가 없어지고 연산, 출력 등 프로그래밍 언어로써의 기능을 성실히 수행할 수 있을까요?

개발자가 불러오려는 값이 생각과 다르게 제어된다면 기초적인 애플레케이션을 작성할 수도 없을 것입니다. 예를 들어 1 + 3 연산을 진행했는데 13이 될 수도 있고, 4가 될 수도 있습니다. 이런 기초적인 연산조차 혼동이 올 수 있어요.

우선, 자바스크립트 엔진은 데이터 타입, 즉 값의 종류에 따라 정해진 메모리 공간을 확보합니다. 그 말은 변수에 할당되는 데이터 타입에 따라 메모리 공간이 상이하다는 것입니다.

왜 데이터 타입별로 메모리 공간이 다르게 할당될까요? 언급했듯, 컴퓨터의 메모리에는 모든 데이터가 2진수로 저장됩니다. 아래를 볼까요?

// 실제 메모리에 저장되는 값 : 0100 0001
// 숫자형으로는 65, 문자열로는 'A'
let a = 'A';

// 아래의 결과는?
console.log(a);
let b = a + 15;
// 아래의 결과는?
console.log(b);

문자열 'A'는 char형으로 0100 0001 비트(메모리에 저장되는 2진수는 비트를 나열한 것과 같아요!)입니다. 이는 숫자로 해석하면 65입니다. 그렇다면 console.log(b)의 결과는 80일까요?

• 예상치 못한 A15라는 값이 나오게 됩니다. 이는 자바스크립트의 동적 타입 언어적 특성 때문인데요, 이 부분은 넘어가도록 하겠습니다(후술합니다).

자바스크립트 엔진은 메모리에서 값을 읽어올 때 데이터 타입을 추론(Type Inference)하여 표현합니다. 즉, 숫자 65가 아니라 문자열 'A'로 이해하는 것입니다. 여기서 데이터 타입의 필요성을 생각해볼 수 있습니다.

1. 메모리 공간의 크기를 결정 : 데이터 타입에 따라 값을 저장할 때 필요한 공간이 달라진다.
2. 2진수를 해석하는 방법을 결정 : 데이터 타입에 따라 메모리에서 읽어온 값을 해석하는 방법이 달라진다.

동적 타입과 정적 타입?

생소한 단어가 나왔습니다. 그 전에, 한 번 생각해봅시다. 자바스크립트에서 변수를 선언할 때, 우리는 타입을 정해줄까요?

C, Java 등은 int a = 0 형태로 변수를 선언합니다. 즉 초기화-할당을 할 변수의 타입을 지정해주는 형태죠. 그런데 JavaScript, Python은 어떤가요? 타입을 지정하지 않습니다.

우리는 C와 Java처럼 변수에 할당할 수 있는 타입을 지정해야만 하는 언어를 정적 타입 언어(static/strong type) 라고 묶어 지칭하며, 이를 명시적 타입 선언(explicit type declaration)이라고 합니다.

반대로 JavaScript와 Python처럼 변수를 선언할 때 타입을 선언하지 않는 언어를 동적 타입 언어(dynamic/weak type) 라고 묶어 지칭하며, 이를 암시적 타입 선언(implicit type declaration)이라고 부릅니다.

그럼 특징을 살펴볼까요?

• 정적 타입 언어

  • 변수의 타입을 변경할 수 없어 선언한 타입에 맞는 값만 할당할 수 있습니다.

    // 자바
    int a = 0;
    a = 'A';  // Compile Error

  • 대부분의 정적 타입 언어는 컴파일 언어(Compile Language)로써 컴파일 시점에 타입을 체크합니다.
    • 타입 체크(Type Check) : 선언한 데이터 타입에 맞는 값을 할당했는지 검사
  • 위의 절차로 타입의 일관성을 강제하여 안정적인 코드를 구현하고, 런타임(실행)에 발생하는 에러를 줄입니다.

• 동적 타입 언어

  • 미리 선언한 데이터 타입의 값이 아니라, 어떤 타입이라도 자유롭게 할당할 수 있습니다.

    // 자바스크립트
    let a = 0;
    a = 'A';  // Not Problem

    # 파이썬
    a = 0
    a = 'A'

  • 위의 절차로, 선언이 아닌 할당에 의해 타입이 결정(타입 추론)되며 타입의 변환에 매우 자유롭습니다.
  • 단, 타입의 일관성을 강제하지 않으므로 코드 구현과 런타임 간 에러가 발생할 수 있습니다.
    • 이런 여러 문제점을 해결하고자 자바스크립트 진영에서는 타입스크립트(TypeScript)라는 새로운 언어(자바스크립트 기반)가 탄생했습니다.
  • 이와 별개로, 자바스크립트는 개발자의 의도와 상관 없이 엔진에 의해 암묵적으로 타입이 자동 변환 되기도 합니다. 아래는 위에서 언급했던 코드입니다.

    let a = 'A';
    let b = a + 15;
    console.log(b);

    • 엔진은 a와 연산하는 15를 문자열로 변환하여 문자열 덧셈을 시행합니다. 이처럼 문자열 타입 변수라고 예측했으나 실은 숫자 타입이었다 는 문제가 발생합니다.
  • 즉 동적 타입 언어는 유연성(flexibility)은 높지만 신뢰성(reliability)은 떨어집니다.

이대로 끝내기에는 조금 아쉬우니, 타입별로 간략하게 짚고 넘어가보죠.

데이터 타입 : Number

자바스크립트는 int, long, float, double 등 다양한 숫자 타입이 존재하지 않습니다.

ECMAScript 사양에서는 숫자 타입의 값을 배정밀도 64비트 부동소수점 형식을 따라 실수로 처리합니다.

• 예제 코드

  // 모두 숫자 타입
  const int = 1;
  const db = 1.12;
  const ng = -1;
  
  // 표기법은 다르지만 모두 같은 값
  const binary = 0b01000001;  // 2진수
  const octal = 0o101;        // 8진수
  const hex = 0x41;           // 16진수
  
  console.log(binary);        // 65
  console.log(octal);         // 65
  console.log(hex);           // 65
  
  // 숫자 타입은 모두 실수로 처리
  console.log(1 === 1.0);     // true
  
  // 특별한 숫자 값도 존재
  const INF = Infinity;       // 양의 무한대
  console.log(-INF);          // 음의 무한대
  console.log(INF * 'a')      // NaN(not a number, 연산 불가)

데이터 타입 : String

0개 이상 16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분의 문자를 표현할 수 있습니다.

작은 따옴표('), 큰 따옴표("), 백틱(`)을 통해 표기할 수 있습니다.

• 백틱을 통해 템플릿 리터럴을 사용할 수 있으며, 자유롭게 JavaScript의 변수를 가져다 사용할 수 있습니다.

이스케이프 시퀀스(escape sequence)를 알아두면 다양한 표현을 할 수 있지만, 다루지 않습니다. 자세한 내용은 여기를 참조하세요.

• 이 중 언급하고 넘어가야 하는 부분은 CR(carriage Return, \r)과 LF(Line Feed, \n)입니다.
• CRLF는 Window 체계의 개행 방식입니다.
• LF는 Unix 체계의 개행 방식입니다.
• 자바스크립트는 두 개행방식을 지원하지만, LF를 권장합니다.

데이터 타입 : Boolean

논리적 참과 거짓을 나타냅니다.

데이터 타입 : undefined

개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값입니다.

undefined 값은 유일합니다.

데이터 타입 : null

변수에 null을 할당함은 이전에 참조하던 값을 더 이상 참조하지 않는다는, 값에 대한 참조를 명시적으로 제거하는 의미입니다.

null 값은 유일합니다.

데이터 타입 : Symbol

ES6에서 추가됐으며 변경 불가능한 원시 타입의 값으로 중복되지 않는 유일무이한 값입니다.

데이터 타입 : Object

차후 깊게 다룹니다. 여기서는 자바스크립트가 객체 기반의 언어 이며 자바스크립트의 거의 모든 것이 객체 라고 알아두세요.

---