📌 06장 데이터 타입

---

자바스크립트(ES6)는 다음과 같이 7개의 데이터 타입을 제공한다. 7개의 데이터타입은 원시타입과 객체타입으로 분류할 수 있다.
ES11에서는 새로운 원시값 BigInt가 추가되어 데이터 타입이 총 8개가 되었다고 한다.

6.1 숫자타입

자바스크립트에서는 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터타입이 별도로 존재하지 않는다.

정수, 실수, 2진수, 8진수, 16진수의 리터럴은 모두 메모리에 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다.

  // 모두 숫자 타입이다.
  var integer = 10; // 정수
  var double = 10.12; // 실수
  var negative = -20; // 음의 정수

숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.

• Infinity : 양의 무한대
• -Infinity : 음의 무한대
• NaN(not a number) : 산술연산 불가

🧐 배정밀도 64비트 부동소수점 형식의 2진수란?
출처 : https://vanillaani.tistory.com/6

자바스크립트에서 0.1 + 0.2의 결괏값은?

답은 0.3이 아닌 0.30000000000000004이다.
그 이유는 자바스크립트 숫자 타입의 값이 IEEE 754의 부동소수점 표현 형식 중 배정밀도 64비트 부동소수점 형식을 따르기 때문이다.

C나 자바의 경우, 정수와 실수를 구분해서 int, long, float, double 등과 같은 타입으로 정수와 실수를 구분해서 사용하지만, 자바스크립트의 경우 모든 수를 실수로 처리하기 때문에 하나의 숫자 타입만 존재한다.

옛날에는 컴퓨터의 성능이 좋지 않았기 때문에 이렇게 숫자의 타입의 크기를 지정해서 메모리를 효율적으로 사용하기 위해 타입이 분류되었다. 하지만 점점 컴퓨터의 성능이 좋아지면서 타입에 대해 덜 신경 쓰게 되었다.

배정밀도 64비트 부동소수점 부호부분

자바스크립트의 숫자 표현은 배정밀도 64비트 부동소수점 형식을 따른다고 했다. 여기서 부동소수점의 부동은 뜰부(浮)에 움직일동(動)이다. 즉 떠돌이 소수점(floating point)이란 뜻이다.

부동소수점 표현은 크게 세 부분으로 구성되는데 부호 부분, 지수 부분, 가수 부분이 있다.
0.1(십진법)을 배정밀도 64비트 부동소수점 형식으로 표현하는 방법은 아래와 같다.

부호부분

부호부분은 양수이면 0, 음수이면 1이 된다. 0.1은 양수이므로 부호부분은 0이 된다.

지수부분

0.1(10)을 2진법으로 바꾸면 0.00011001100...(2)으로 순환 소수가 나온다.

소수점의 자리를 1.xxx...가 되도록 왼쪽 또는 오른쪽으로 옮긴다. 0.00011001100...(2)에서는 오른쪽으로 4칸 이동해야 1이 나오기 때문에 식으로 표현하면 1.1001100...(2)×2^-4와 같다. 만약 1100.000110011000...(2)이라면 왼쪽으로 3칸 이동하고 표현식은 1.10000011001100...(2)×2^3이 된다.

지수부분을 구하려면 2^-4(1/2⁴)의 지수인 -4에다가 Bias를 더하고 2진법으로 변환해야 한다.

Bias란 지수 편향을 말하는데, 이를 더하는 이유는 양수는 2진법으로 표현할 수 있지만, 음수는 표현할 수 없기 때문이다. 예를 들어 지수부분을 저장할 때 지수값이 1인 경우 2진법으로 변환해 00000000001로 저장할 수 있지만, -1인 경우 저장할 방법이 없다. 따라서 Bias를 더한 다음 2진법으로 변환하는 것이다.
Bias를 구하는 식은 2^(지수부분의 총 비트수 - 1) - 1이다. 64비트의 지수부분은 11bit이므로 2^(11 - 1) - 1 = 1023으로 Bias는 1023이 된다. 그래서 0~1023에 해당하면 음수가, 1024~2047에 해당하면 양수가 저장되는 것이다.

이어서 계산하면 -4 + 1023 = 1019이다. 이 값을 2진법으로 변환하면 1111111011인데, 지수부분은 총 11bit이므로 앞에 0을 붙여서 01111111011이 들어가게 된다.

가수부분

가수부분은 소수점을 옮긴 1.1001100...에서 소수점의 오른쪽 부분이다. 소수점 왼쪽 부분은 무조건 1이기 때문에 따로 저장하지 않으며 이를 hidden bit라 한다. 여기서 오른쪽 부분은 계속 순환되므로 52비트에 넣으면 52번째 이후 값은 반올림을 해야한다. 원래 51, 52, 53번째 값은 011인데 53번째에서 반올림 했으므로 51, 52번째 값은 10이 된다. 만약 소수점의 오른쪽 부분이 52개보다 작다면 0으로 채워 넣는다.

IEEE 754란?

IEEE 754는 IEEE(Institute of Electrical and Electronics Engineers) 즉 전기 전자 기술자 협회에서 개발한 것으로 컴퓨터에서 부동소수점을 표현하는 방법을 정의한 것으로 가장 널리 쓰이는 표준이다.
IEEE 754 부동소수점을 표현하는 형식의 종류에는 2진법 부동소수점 형식과 10진법 부동소수점 형식이 있다.
※ binary = 2진법, bit = binary(2진법의) digit(숫자)의 약자, decimal = 10진법

결론

자바스크립트는 숫자를 배정밀도 64비트 부동소수점 형식을 따라 표현한다. 이것은 십진수인 소수를 이진수로 변환하고 소수점을 1이 나올 때까지 오른쪽 또는 왼쪽으로 옮긴 다음, 소수점 오른쪽에 해당하는 수를 가수부분에 넣게 되는데 이 수가 표현 자리수보다 넘어서게 되면 나머지 부분에서 반올림 처리를 하므로 근사값이 저장되면서 부정확하게 된다.
따라서 0.1 + 0.2의 결괏값이 0.30000000000000004가 나오게 되는 것이다.

소수점의 계산을 올바르게 하는 방법

numObj.toFixed([digits])
toFixed()는 Number객체에 주어진 digits 만큼의 소수점 이하 자리수를 정확하게 갖는 문자열 표현으로 반환한다.
소수점 이하가 길면 숫자를 반올림하고, 짧아서 부족할 경우 뒤를 0으로 채운다.
digits의 옵션은 0 이상 20 이하의 값을 사용할 수 있고, 구현체에 따라 더 넓은 범위의 값을 지원할 수도 있다. 값을 지정하지 않으면 0을 사용한다.
Math.round(x)
입력값을 반올림한 값과 가장 가까운 정수를 반환한다.
이것을 응용해 0.3을 만들 수 있다.

6.2 문자열 타입

문자열 타입은 작은 따옴표, 큰 따옴표, 백틱을 사용해 텍스트 데이터를 나타내는 데 사용한다.

  // 문자열 타입
  var string;
  string = '문자열';  // 작은 따옴표
  string = "문자열";  // 큰 따옴표
  string = `문자열`;  // 백틱(ES6)

C는 문자열 타입을 제공하지 않고 문자의 배열로 문자열을 표현하고, 자바는 문자열을 객체로 표현한다. 그러나 자바스크립트의 문자열은 원시 타입이며, 변경 불가능한 값이다.

6.3 템플릿 리터럴

ES6 부터 도입된 템플릿 리터럴은 백틱(``)을 사용해 표현하는것이다.

6.3.1 멀티라인 문자열

    var string = `Hello
    world`;
    // 출력결과
    // Hello
    // world

일반 문자열 내에서는 줄바꿈이 허용되지 않기 때문에 백슬래시()를 사용하는 이스케이프 시퀀스를 사용해야 했다. 하지만 일반 문자열과 달리 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며, 모든 공백도 있는그대로 적용된다.

6.3.2 표현식 삽입

문자열은 문자열 연산자 + 를 사용해 연결할 수 있다.

    var first = 'Bo-kyoung'
    var last = 'Hwang'

    // ES5 : 문자열 연결
    console.log('My name is' + first + last + '.');

템플릿 리터럴 내에서는 아래와 같이 표현식 삽입을 통해 간단히 문자열을 삽입할 수 있다.

    var first = 'Bo-kyoung'
    var last = 'Hwang'
    
    // ES6 : 표현식 삽입
    console.log(`My name is ${first} ${last}.`);

6.4 불리언 타입

부울리언 타입의 값은 true와 false 뿐이다.

  var foo = true;
  console.log(foo);

  foo = false
  console.log(foo);

6.5 undefined 타입

undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값이다. 변수를 참조 했을때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적이 없는, 즉 초기화 되지 않은 변수라는것을 간파할 수 있다.

🧐 선언과 정의

다른 프로그래밍 언어에선는 선언과 정의를 엄격하게 구분해서 사용하는 경우가 있다. 예를 들어 C에서는 실제로 메모리 주소를 할당 하는가로 선언과 정의를 엄격하게 구분한다.
단순히 컴파일러에게 식별자의 존재만 알리는 것은 선언이고, 실제로 컴파일러가 변수를 생성해서 식별자와 메모리 주소가 연결되면 정의로 구분한다.
자바스크립트의 경우 변수를 선언하면 암묵적으로 정의가 이루어지기 때문에 선언과 정의의 구분이 모호하다.
ECMAScript 사양에서 변수는 선언한다 라고 표현하고 함수는 정의한다 라고 표현한다.

6.6 null 타입

프로그래밍 언어에서 null 은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다.

6.7 심벌 타입

심벌은 ES6에서 추가된 7번째 타입으로, 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름이 충돌한 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.

심벌 이외의 원시 값은 리터럴을 통해 생성하지만 심벌은 Symbol 함수를 호출해 생성한다. 이 때 생성된 심벌 값은 외부에 노출되지 않으며, 다른값과 절대 중복되지 않는 유일무이한 값이다.

  // 심벌값 생성
  var key = Symbol('key');
  console.log(typeof key); // symbol

  // 객체 생성
  var obj = {};

  // 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용한다.
  obj[key] = 'value';
  console.log(obj[key]); // value

6.8 객체 타입

자바스크립트는 객체 기반의 언어이며 이는 자바스크립트를 이루고 있는 모든 것이 객체라는 의미이다. 지금까지 살펴본 6가지 데이터 타입 이외의 값은 모두 객체 타입이다.

6.9 데이터 타입의 필요성

6.9.1 데이터 타입에 의한 메모리 공간의 확보와 참조

값은 메모리에 저장하고 참조할 수 있어야 한다. 메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정해야 한다. 다시 말해, 몇 바이트의 메모리 공간을 사용해야 낭비와 손실 없이 값을 저장할 수 있는지 알아야 한다.

자바스크립트 엔진은 데이터 타입, 즉 값의 종류에 따라 정해진 크기의 메모리 공간을 확보한다. 즉, 변수에 할당되는 값의 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 결정된다.

값을 참조하는 경우에는 식별자를 통해 값이 저장되어 있는 메모리 공간의 선두 메모리셀 주소를 찾아가게 된다. 이 때 값을 참조하려면 한번에 읽어들여야 할 메모리 공간의 크기를 알아야하는데 자바스크립트 엔진은 변수의 데이터 타입을 인식한 후 데이터 타입에 따른 바이트크기만큼 메모리 공간을 읽어들인다.

6.9.2 데이터 타입에 의한 값의 해석

읽어들인 2진수를 문자열로 읽어올지, 숫자로 읽어올지, 어떠한 데이터타입으로 읽어올지는 변수의 데이터 타입을 통해 알수 있다.

위에서 언급한 데이터 타입이 필요한 이유를 정리해보면 다음과 같다.

• 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
• 값을 참조할때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
• 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

6.10 동적 타이핑

6.10.1 동적 타입 언어와 정적 타입 언어

C나 자바는 정적 타입 언어로 변수를 선언할 때 변수에 할당할 수 잇는 값의종류, 즉 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 선언이라고 한다.

정적 타입 언어는 변수의 타입을 변경할 수 없으며, 변수에 선언한 타입에 맞는 값만 할당할 수 있다. 정접 타입언어는 컴파일 시점에 타입체크를 수행한다. 만약 타입 체크를 통과하지 못했다면 에러를 발생시키고 프로그램의 실행 자체를 막는다 이를 통해 타입의 일관성을 강제함으로써 더욱 안정적인 코드 구현을 통해 런타임에 발생하는 에러를 줄인다.

자바스크립트는 정적 타입 언어와 다르게 변수를 선언할 때 타입을 선언하지 않는다. var, let, const 키워드로 변수를 선언한 뒤, typeof 연산자를 사용해 데이터 타입을 조사할 수 있다.

즉, 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입추론)된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 동적 타이핑이라고 한다.

6.10.2 동적 타입 언어와 변수

동적 타입 언어에서 변수를 사용할 때 주의할 사항은 다음과 같다.

• 변수는 꼭 필요한 경우에 한해 제한적으로 사용한다. 변수의 개수가 많을수록 오류발생확률이 높아지므로 무분별한 남발은 금물이다.
• 변수의 유효범위(스코프)는 최대한 좁게 만들어 변수의부작용을 억제해야 한다.
• 전역 변수는 최대한 사용하지 않도록 한다. 어디서든지 참조/변경 가능한 전역 변수는 의도치 않게 값이 변경될 가능성이 높고 다른 코드에 영향을 줄 가능성도 높다
• 변수보다는 상수를 사용해 값의 변경을 억제한다.
• 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍한다. 변수 이름뿐 아니라 모든 식별자는 존재 이유를 파악할 수 있는 적절한 이름으로 지어야 한다.