[JavaScript] The Modern JavaScript Tutorial - (2-5) Data types

Dynamically typed language

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

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

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

 

숫자형

let n = 123;
n = 3.141592;

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

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

 

Infinity

Infinity는 어떤 숫자보다 큰 특수값, 무한대(∞)를 나타낸다. 어떤 숫자든 0으로 나누면 무한대를 얻을 수 있다.

alert(1 / 0);

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

alert(Infinity);

 

NaN

NaN은 계산 중에 에러가 발생했다는 것을 나타내는 값이다. 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중 에러가 발생하는데, 이때 NaN이 반환된다.

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

 

BigInt

자바스크립트에선 (2^53)보다 큰 값과 -(2^53-1)보다 작은 정수는 숫자형을 사용해 나타낼 수 없다. 그러나 암호 관련 작업 등 아주 큰 숫자가 필요하거나, 높은 정밀도로 작업해야 할 때는 필요할 수 있다.

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

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

 

 

문자형

자바스크립트에서는 문자열(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

큰따옴표나 작은따옴표를 사용하면 표현식을 넣을 수 없음에 주의한다.

alert('the result is ${1 + 2}');    // the result is ${1 + 2}
alert("the result is ${1 + 2}");    // the result is ${1 + 2}

C언어와 Java 등의 char와 같은 글자형)은 존재하지 않는다.

 

 

불린형

불린형(논리 타입)은 긍정의 true와 부정의 false만 존재하는 자료형이다.

비교 결과를 저장할 때도 사용된다.

let nameFieldChecked = true;
let ageFieldChecked = false;

let isGreater = 4 > 1;
alert(isGreater);   // true

 

 

'null' 값

null 값은 지금까지 나온 자료형 중, 어느 자료형에도 속하지 않는 값이다. null 값은 오직 null 값만 포함하는 별도의 자료형이다.

let age = null;

자바스크립트의 null은 다른 언어의 null과는 성격이 다르다. '존재하지 않는 객체에 대한 참조'나 '널 포인터(null pointer)'를 나타날 때 사용하지 않는다.

'존재하지 않는(nothing) 값', '알 수 없는(unknown) 값'을 나타내는 데 사용한다.

상단의 let age = null;은 나이(age)를 알 수 없거나, 그 값이 비어 있음을 보여 준다.

 

 

'undefined' 값

undefined 값도 null 값처럼 고유한 자료형이다. undefined는 '값이 할당되지 않은 상태'를 나타낼 때 사용한다.

만약 변수를 선언해 놓고 값을 할당하지 않았다면, 해당 변수에 undefined가 자동으로 할당된다.

let undef;
alert(undef);   // 'undefined'

개발자가 변수에 직접 undefined를 할당하는 것도 가능하긴 하다. 단, 권장하지 않는다.

변수가 '비어 있거나', '알 수 없는' 상태라는 걸 나타내려면 null을 사용하자.

// 값을 undefined로 변경한다. => 권장하지 않음!
let undef2 = 100;
undef2 = undefined;
alert(undef2);  // 'undefined'

 

 

객체와 심볼

객체(object)형은 특수한 자료형이다.

객체형을 제외한 다른 자료형들은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라고 부른다. 반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있다.

이런 특징 때문에 자바스크립트에서는 특별한 자료형이다. 자세한 내용은 추후 객체 파트에서 다룬다.

심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용된다. 이 역시 추후 알아보자.

 

 

typeof 연산자

typeof 연산자는 자료형을 반환한다. 자료형에 따라 처리 방식을 바꾸거나, 변수의 자료형을 빠르게 알아낼 때 유용한 연산자이다.

두 가지 문법을 지원한다.

1. 연산자: typeof x
2. 함수: typeof(x)

typeof undefined    // "undefined"
typeof 0            // "number"
typeof 10n          // "bigint"
typeof true         // "boolean"
typeof "foo"        // "string"
typeof Symbol("id") // "symbol"
typeof Math         // "object" (1)
typeof null         // "object" (2)
typeof alert        // "function" (3)

1. Math는 수학 연산을 제공하는 내장 객체이기 때문에 "object"가 출력된다. 이 Math에 대해서는 숫자형 챕터에서 학습하게 된다.
2. typeof null의 결과는 "object"이다. null은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 남겨둔 상황이다. 주의하도록 하자.
3. typeof는 피연산자가 함수면 "function"을 반환한다. '함수'형이라는 건 따로 존재하지 않고, 함수는 객체형에 속한다. 이 역시 아주 오래전에 만들어져서 하위 호환성을 위해 남겨져 있다. (실무에서는 해당 특징이 매우 유용하게 사용되기도 한다.)

 

 

과제

스크립트 결과 예측하기

let name = "Ilya";

alert(`hello ${1}`);        // hello 1
alert(`hello ${"name"}`);   // hello "name"
alert(`hello ${name}`);     // hello Ilya

 

 

해당 포스트는 'The Modern JavaScript Tutorial' 문서를 읽으며 개인 백업용으로 메모하였습니다.

javascript.info/

The Modern JavaScript Tutorial