2022년 9월 14일

자료형

자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속합니다.

자바스크립트에는 여덟 가지 기본 자료형이 있습니다. 이번 챕터에선 이 자료형 모두를 개괄적으로 다루도록 하겠습니다. 각 자료형에 대한 세부 사항들은 이어지는 챕터에서 다룰 예정입니다.

자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있습니다. 따라서 변수는 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있습니다.

// no error
let message = "hello";
message = 123456;

이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 ‘동적 타입(dynamically typed)’ 언어라고 부릅니다.

숫자형

let n = 123;
n = 12.345;

숫자형(number type) 은 정수 및 부동소수점 숫자(floating point number)를 나타냅니다.

숫자형과 관련된 연산은 다양한데, 곱셈 *, 나눗셈 /, 덧셈 +, 뺄셈 - 등이 대표적입니다.

숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 '특수 숫자 값(special numeric value)'이 포함됩니다.

  • Infinity는 어떤 숫자보다 더 큰 특수 값, 무한대(∞)를 나타냅니다.

    어느 숫자든 0으로 나누면 무한대를 얻을 수 있습니다.

    alert( 1 / 0 ); // 무한대

    Infinity를 직접 참조할 수도 있습니다.

    alert( Infinity ); // 무한대
  • NaN은 계산 중에 에러가 발생했다는 것을 나타내주는 값입니다. 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중에 에러가 발생하는데, 이때 NaN이 반환됩니다.

    alert( "숫자가 아님" / 2 ); // NaN, 문자열을 숫자로 나누면 오류가 발생합니다.

    NaN은 여간해선 바뀌지 않습니다. NaN에 어떤 추가 연산을 해도 결국 NaN이 반환됩니다.

    alert( "숫자가 아님" / 2 + 5 ); // NaN

    연산 과정 어디에선가 NaN이 반환되었다면, 이는 모든 결과에 영향을 미칩니다.

수학 연산은 안전합니다.

자바스크립트에서 행해지는 수학 연산은 '안전’하다고 볼 수 있습니다. 0으로 나눈다거나 숫자가 아닌 문자열을 숫자로 취급하는 등의 이례적인 연산이 자바스크립트에선 가능합니다.

말이 안 되는 수학 연산을 하더라도 스크립트는 치명적인 에러를 내뿜으며 죽지 않습니다. NaN을 반환하며 연산이 종료될 뿐입니다.

현실에선 특수 숫자 값을 숫자로 취급하진 않습니다. 하지만 자바스크립트에선 특수 숫자 값을 숫자형으로 분류합니다.

숫자를 다루는 방법에 대해선 숫자형 챕터에서 자세히 알아보도록 하겠습니다.

BigInt

내부 표현 방식 때문에 자바스크립트에선 (253-1)(9007199254740991) 보다 큰 값 혹은 -(253-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없습니다.

사실 대부분의 상황에서 이런 제약사항은 문제가 되지 않습니다. 그렇지만 암호 관련 작업같이 아주 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업을 해야 할 때는 이런 큰 숫자가 필요합니다.

BigInt형은 표준으로 채택된 지 얼마 안 된 자료형으로, 길이에 상관없이 정수를 나타낼 수 있습니다.

BigInt형 값은 정수 리터럴 끝에 n을 붙이면 만들 수 있습니다.

// 끝에 'n'이 붙으면 BigInt형 자료입니다.
const bigInt = 1234567890123456789012345678901234567890n;

BigInt형 숫자는 자주 쓰이지 않기 때문에 여기서 자세히 다루지 않고 별도의 챕터, BigInt에서 설명드리겠습니다. 아주 큰 숫자를 사용해야 하는 경우라면 해당 챕터를 참고해 주시기 바랍니다.

호환성 이슈

이 글이 작성된 시점엔 Firefox, Chrome, Edge, Safari에서만 BigInt를 지원합니다. IE에선 지원하지 않습니다.

문자형

자바스크립트에선 문자열(string)을 따옴표로 묶습니다.

let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;

따옴표는 세 종류가 있습니다.

  1. 큰따옴표: "Hello"
  2. 작은따옴표: 'Hello'
  3. 역 따옴표(백틱, backtick): `Hello`

큰따옴표와 작은따옴표는 ‘기본적인’ 따옴표로, 자바스크립트에서는 이 둘에 차이를 두지 않습니다.

역 따옴표로 변수나 표현식을 감싼 후 ${…}안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습니다.

let name = "John";

// 변수를 문자열 중간에 삽입
alert( `Hello, ${name}!` ); // Hello, John!

// 표현식을 문자열 중간에 삽입
alert( `the result is ${1 + 2}` ); // the result is 3

${…} 안에는