Logo

자바스크립트의 자료형과 typeof 연산자

자료형(data type)에 대한 이해가 중요한 타입스크립트(Typescript)가 대중화되면서 나타나는 흥미로운 현상이 있습니다. 바로 기존에 자바스크립트(JavaScript)에서 비교적 등한시되던 자료형에 대해서 많은 개발자들이 다시 관심을 갖게 되었다는 것인데요.

이번 포스팅에서는 typeof 연산자를 통해서 알아낼 수 있는 자바스크립트의 대표적인 자료형에 대해서 알아보겠습니다.

typeof 연산자

우선 본 포스팅 전체에 걸쳐 빈번하게 사용하게 될 자바스크립트의 typeof 연산자에 대해서 짚고 넘어갈까요?

기본적으로 typeof 연산자는 바로 뒤에 표현식(expression)을 넘기면 자료형을 돌려주는데요.

typeof 1; // 'number'
typeof "abc"; // 'string'
typeof true; // 'boolean'
typeof { a: 1, b: 2 }; // 'object'

뿐만 아니라 변수나 함수를 상대로도 typeof 연산자를 사용할 수 있습니다.

const num = 1;
typeof num; // 'number'

function add(x, y) {
  return x + y;
}
typeof add; // 'function'

typeof 연산자를 사용할 때 흔히 저지르는 실수가 typeof 연산자로 부터 얻은 결과를 그 자료형의 클래스와 비교하는 것인데요. typeof 연산자는 결과 자료형을 클래스가 아닌 문자열로 돌려주기 때문에 이러한 버그가 발생하지 않도록 각별히 조심하셔야 합니다.

typeof 1 === Number; // false
typeof 1 === "number"; // true

🍯 꿀팁: 다음과 같이 typeof 연산자를 두 번 연속으로 사용해보시면 typeof 연산자의 결과가 항상 문자열이라는 것을 까먹지 않으실 거에요. 😉

typeof typeof 1; // 'string'
typeof typeof "abc"; // 'string'
typeof typeof true; // 'string'

자바스크립트를 공부하시는 많은 분들이 typeof 연산자와 instanceof 연산자를 혼동하시는데요. instanceof 연산자에 대해서는 별도의 포스팅에서 자세히 다루고 있으니 참고 바랍니다.

Undefined 자료형

첫 번째로 살펴볼 자료형은 자바스크립트에서 참 독특한 역할을 하고 있는 Undefined 인데요. 자바스크립트에서 Undefined 자료형에 속하는 값은 딱 하나 undefined 밖에 없기 때문에 이 값 자체에 대해서 이해하는 것이 중요합니다.

자바스크립트에서 undefined의도치 않게 누락된 값을 나타내기 위해서 주로 사용되는데요. 보통 개발자가 값을 설정하지 않았을 때 프로그래밍 언어 차원에서 자연스럽게 알아서 설정되는 경우가 많습니다.

대표적인 예로, 변수를 선언할 때 초기화를 하지 않으면 undefined가 할당이 되고요.

let x;
x; // undefined
typeof x; // 'undefined'

함수를 호출할 때도 매개 변수를 넘기지 않으면 undefined가 할당되지요.

function foo(x, y) {
  return { x, y };
}

foo(1); // { x: 1, y: undefined }

Null 자료형

Null은 많은 분들이 Undefined와 헛갈려하시는 자료형인데요. 자바스크립트에서 nullNull 자료형에 속하는 유일한 값입니다.

자바스크립트에서 nullundefined와 반대로 의도적으로 누락한 값을 나타내기 위해서 주로 사용되는데요. 그래서 개발자가 명시적으로 변수에 null로 할당하는 경우를 자주 볼 수 있죠.

let x = null;
x; // null
typeof x; // 'object'

그런데 null이 진짜 골 때리는 부분은 typeof 연산자의 결과가 null이 아니라 object가 나온다는 것입니다. 🤯

이것은 사실 굉장히 오래된 자바스크립트의 버그인데요. 명백한 버그 임에도 불구하고 이것에 의존하고 있는 레거시(legacy) 코드가 워낙 많아서 알고도 고칠 수 없다고 합니다. 😂

따라서 프로그래밍을 하시다가 소위, 널 체크를 하실 때는 typeof 연산자를 사용하기 보다는 그냥 값 자체가 null 인지 아닌지를 직접 확인하는 것이 안전하겠습니다.

null과 관련된 이 웃픈 역사에 대해서는 여기에서 자세히 다루고 있으니 궁금하신 분들은 참고바랍니다.

Boolean 자료형

자바스크립트에서 논리 자료형인 Booleantruefalse 이렇게 두 개의 값으로 이루어진 자료형인데요. 보통 if 분기문이나 while 반복문에서 중요한 역할을 하는 자료형이지요.

typeof true; // 'boolean'
typeof false; // 'boolean'

Number 자료형

Number 자료형은 숫자를 나타내는데요. 특이하게도 자바스크립트에서는 다른 여타의 프로그래밍 언어와 달리 숫자형을 정수형과 실수형처럼 좀 더 세부적으로 구분하지 않고 그냥 Number 자료형으로 퉁칩니다.

typeof 1; // 'number'
typeof 1.23; // 'number'

Number 자료형에는 다음과 같이 몇 가지 특수한 숫자도 있는데요. 보통 어떤 계산을 할 때 결과를 숫자로 표현할 수 없는 예외적인 경우에 주로 접하게 됩니다.

typeof NaN; // 'number'
typeof Infinity; // 'number'
typeof Number.MAX_SAFE_INTEGER; // 'number'

참고로 Number 자료형은 부동소수점(floating-point) 연산을 하기 때문에 다음과 같이 어처구니 없는 실수 계산 결과가 나올 수 있어요.

1.1 + 2.2; // 3.3000000000000003

이러한 미세한 연산의 오류는 숫자 계산에서 한치의 오차도 용납되지 않는 금융권 시스템이나 재무/회계 관련 소프트웨어에서는 치명적인 버그로 이어질 수 있어서 주의가 필요하겠습니다.

BigInt 자료형

자바스크립트에 비교적 최근에 추가된 자료형인 BigIntNumber 자료형으로 정밀하게 표현하기에는 너무 큰 숫자를 다룰 때 사용됩니다.

typeof 1n; // 'bigint'
typeof BigInt("1"); // 'bigint'

개인적으로 BigInt 자료형이 실제 자바스크립트 프로젝트에서 활발하게 사용되는 경우는 아직 못 접해봤는데요. 본 포스팅에서는 그냥 자바스크립트에 이런 자료형도 있다라는 것만 기억하시고 나중에 실제로 쓰셔야할 때 추가로 학습하시면 좋을 것 같습니다.

String 자료형

String 자료형은 문자열을 나타내는데요. 특이하게도 자바스크립트에서는 다른 여타의 프로그래밍 언어와 달리 문자(character)와 문자열(string)을 구분하지 않고 그냥 String 자료형으로 퉁칩니다.

typeof "a"; // 'string'
typeof "abc"; // 'string'

Symbol 자료형

Symbol 자료형 역시 자바스크립트에 추가된 지가 그렇게까지 오래되지는 않았는데요. 보통 어떤 객체의 특정 속성에 대한 접근을 통제하기 위해서 많이 사용됩니다.

typeof Symbol(); // 'symbol'
typeof Symbol("foo"); // 'symbol'

Symbol 자료형은 일반 애플리케이션을 개발할 때 보다는 라이브러리를 개발할 때 유용하게 사용될 수 있는데요. Symbol 자료형 자체에 대해서는 다뤄야 할 부분도 많고 본 포스팅의 범위에 벗어나므로 추후 기회가 되면 별도의 포스팅에서 다루도록 하겠습니다.

Object 자료형

과장을 좀 보태서 자바스크립트에서 모든 것은 객체라고 해도 될 정도로 Object 자료형은 자바스크립트에서 매우 넓은 영역을 아우르고 있는데요.

비단 이렇게 우리가 쉽게 생각할 수 있는 객체 뿐만 아니라,

typeof {}; // 'object'
typeof { a: 1, b: 2 }; // 'object'

정규식, 날짜와 같은 자바스크립트에 내장된 클래스의 인스턴스도 Object 자료형에 속합니다.

typeof /([A-Z])\w+/g; // 'object'
typeof new Date(); // 'object'

마찬가지 이치로 우리가 직접 작성한 클래스의 인스턴스도 Object 자료형이겠죠?

class User {}
typeof new User(); // 'object'

한가지 간과하기 쉬운 부분은 심지어 배열도 자바스크립트에서는 Object 자료형으로 취급된다는 것입니다.

typeof []; // 'object
typeof [1, 2]; // 'object'
typeof ["a", "b", "c"]; // 'object'

Function 자료형

함수형 프로그래밍의 패러다임을 지원하는 자바스크립트에서는 함수도 마치 일반 값처럼 다룰 수 있는데요. Function 자료형은 자바스크립트에서 이러한 함수를 나타냅니다.

function add(x, y) {
  return x + y;
}
typeof add; // 'function'
typeof function (x, y) {
  return x + y;
}; // 'function'

클래스의 생성자도 일종의 함수이기 때문에 typeof 연산자의 결과로 function이 나옵니다.

class User {}
typeof User; // 'function'

참고로 화살표(arrow) 함수를 상대로 typeof 연산자를 사용할 때는 괄호로 한 번 감싸주지 않으면 문법 오류가 발생하므로 주의가 필요합니다.

typeof (x, y) => x + y; // ❌ Uncaught SyntaxError: Malformed arrow function parameter list
typeof ((x, y) => x + y); // 'function'

마치면서

이상으로 자바스크립트에서 자료형을 알아낼 수 있는 연산자인 typeof를 어떻게 사용하는지 실습을 통해서 살펴보았습니다. 참고로 지금까지 다룬 9가지 자료형 중에서 Undefined, Null, Boolean, Number, String, Symbol은 값을 바꿀 수 없는 원시(primitive) 자료형이라는 점도 함께 기억해두시면 좋을 것 같습니다.

자바스크립트 개발 경력이 꽤 기신 분들도 막상 자료형에 대해서 질문을 받으면 제대로 답변을 하지 못하는 경우를 의외로 종종 보게 됩니다. 아마도 자바스크립트가 동적 타이핑(dynamic typing) 언어인데다가 다른 언어 대비 타이핑 정도가 느슨하기 때문이지 아닐까 싶은데요. 하지만 최근에는 타입스크립트로 진행되는 프로젝트가 많은 만큼 이제 이것은 점점 핑계로 들리지 않을까요?