Type in JavaScript

작성자: 이현우
작성 의도: 같이 JavaScript 기초를 살펴봐요! 특히 정적타입 개발을 하다가 자바스크립트를 접하시는 분들은 이 글을 보면 정말 도움이 되실겁니다.

개요

자바나 코틀린을 사용하는 "정적 타입" 언어를 활용하는 개발자들이 자바스크립트를 말할 때 흔히 "타입 개념이 없는" 언어라고 한다. 하지만 자바스크립트 책을 조금 훑다 보면 자바스크립트의 내장타입을 설명하는 부분이 나온다. 그렇다면 우리가 흔히 사용하는 "타입"이라는 개념과 저들이 사용하는 "타입"의 개념은 어떻게 다를까?

타입은 변수가 아닌 값에 부여된다

흔히 자바나 코틀린에서는 변수에 타입을 부여한다.

val name: String = "Nunu Lee"
val onePlusOneIs: Int = 2

하지만 자바스크립트에서는 위와 같은 방식으로 타입을 부여하지 않는다.

let anyThingInHere = 2
anyThingInHere = 'Nunu' // Possible

이런 특성을 보고 정적 타입 개발자들은 "자바스크립트에는 타입이 없는 언어다"와 같은 착각을 불어일으키기 십상이다. 하지만 자바스크립트에서 타입은 변수에 부여되지 않고 값 그 자체에 부여된다. 즉 변수의 타입은 값의 타입에 위임을 받는 것이라고 볼 수 있다.

var a = 42;
typeof a; // "number"

a = false;
typeof a // "boolean

undefined is "it is not defined"?

자바스크립트의 내장 타입 중에는 undefined라는 타입이 있다. 이 타입은 어떤 타입일까? 아래의 문제를 보고 추론을 해보자.

var a;

a;
b;

자 위 순서대로 크롬 콘솔에 찍으면 어떤 결과가 나올까? a, b는 각각 값, 변수가 정의되어 있지 않는 상황이다. 위의 undefined 타입의 말 그대로를 본다면 a, b 둘 다 undefined 타입이 나와야 할 것 같은데 결과는 아래와 같다.

놀랍게도 a는 undefiend가 뜨지만 b는 ReferenceError가 뜨는 걸 볼 수 있다. 그렇다면 우리는 undefined를 어떻게 해석해야할까?

undefined는 접근 가능한 스코프에 변수는 있지만 값이 할당되지 않은 상태이다. 즉, 값을 초기화 시키지 않은 변수는 undefined라고 볼 수 있다. 하지만 아예 변수조차 선언이 되지 않은 경우에는 ReferenceError가 발생하는데, 이 경우에 undeinfed가 가지고 있는 말의 의미와 배치가 되는 감이 있어서 헷갈릴 수 있다고 생각하지만 자바스크립트 엔진이 이렇게 값을 처리하므로 그냥 위와 같이 생각을 하는 것이 좋다.

여기서 또 반전인 점은 만약에 typeof 연산자를 활용해서 값의 타입을 보면 어떻게 될까?

var a;
typeof a;
typeof b;

정말 기가 막힌 결과가 나온다. 이 경우에는 b를 undefined로 처리를 하는데, 덕분에 개발자로 하여금 헷갈릴 수 있는 여지가 많아진 것 같아 아쉽다. 하지만 어쩌겠는가, 이미 이렇게 언어가 설계된 것은. 이런 현상이 있다는 것을 알고 예방을 하면 될 것 같다.

추가) null과 typeof

익히 들어서 알 수도 있겠지만 자바스크립트에서 null의 타입은 object이다. 이는 typeof를 통해 알 수 있다.

그렇다면 해당 변수가 null인지 아닌지를 어떻게 판단할 수 있을까? 자바스크립트에서는 boolean으로 강제변환을 할 때 false로 변환될 수 있는 값이 있는데 이는 아래와 같다.

• undefined
• null
• false
• +0, -0, NaN
• ""

위의 결과만 본다면, object 타입에서는 null만 falsy한 값인것을 알 수 있다. 그래서 아래와 같이 조건문을 짜서 해당 변수의 값이 null인지를 알 수 있다.

var a = null;
(!a && typeof a === "object"); //true