[JS] 자바스크립트 변수와 typeof (feat. null 데이터 타입의 오류)

# 변수란

• 컴퓨터는 기본적으로 데이터를 메모리를 통해 저장하는데, 저장한 메모리에 label을 붙여 어떤 데이터 값인지 표기한다.
• 이때 라벨을 변수로 볼 수 있다. 즉, 특정 값을 ~한 값임을 할당하는 것이다.
• 변수는 수 많은 데이터를 처리하기 위해서는 효율적으로 데이터를 기억하고 저장하는 방식이 필요해 사용된다.
• 데이터를 효율적으로 기억하고, 적절한 시점에 꺼내 활용하기 위해 변수를 사용한다.

a) 변수의 선언 & 할당

First, 메모리의 보관함을 확보하고 변수의 선언

Second, 보관함에 데이터를 저장한다. 변수의 할당

Third, 선언과 할당을 동시에 할 수 있다.

 

let myNumber = 100 //보통 선언과 할당을 함께 진행함

[STEP1] 이름을 '선언(Declare)'해주기

• 위에서 'let myNumber' 부분에 해당

[STEP2] 선언한 변수에 값을 '할당(Assign)'해주기

• myNumber=100 이라는 부분에 해당

 

# 데이터 타입

a) 데이터 타입의 간단한 배경 🤔

• 데이터의 경우 텍스트, 숫자, 참/거짓 등 다양한 데이터의 종류가 존재한다.
• 한글 역시 명사에 따라 각기 다른 조사를(은/는)을 사용하는 것처럼 자바스크립트 역시 타입에 따라 그 역할이 다르다.
• 보통 언어에 따라 '이 값이 어떤 데이터 타입이다'라는 것을 선언하여 데이터 타입에 따른 메모리 용량을 조절하지만, 자바스크립트의 경우 변수를 선언할 때 데이터 타입을 명시해주지 않아도 Javasciprt 엔진이 알아서 변수에 할당된 값에 따라 타입을 지정한다.
• 이같은 자바스크립트의 속성에 의해 자바스크립트를 동적 타입의 언어라고 부른다. (이와 반대로 데이터 타입을 명시해줘야 하는 C, C++, Java의 경우 정적 타입의 언어라고 한다.)
• 이는 언어의 등장 시기에 따라 생긴 차이라고도 하는데, C언어 혹은 Java가 등장할 시기에는 메모리의 용량이 넉넉하지 않아 메모리를 더 철저하게 관리했다고 한다.

b) 데이터 타입 종류

• 자바스크립트의 데이터 타입에는 크게 원시형(Primitive Type)과 참조형이 있다.
• 원시형 데이터 타입에는 String / Number / Boolean(참거짓) /  Undefined /  Null이 존재한다.
• 참조형에는 객체가(Object)(function(함수), array(배열)도 객체로 포함됨) 존재한다.
  • String : 문자열 데이터
  • Number : 숫자 데이터
  • Boolean : 참/거짓 값 자체가 데이터인 값
  • Undefined : 선언은 됐지만 값이 할당되지 않은 경우
  • Null : 값이 없는 경우(빈 값)
  • Object : 함수와 속성이 함께 포함된 유형
  • Function : 특정 기능을 하는 코드들을 묶어놓은 유형
  • Array : 여러가지 데이터 타입의 데이터들을 한데 묶어놓은 유형

 

# typeof 연산자

• typeof 연산자를 사용하여 데이터 타입을 확인할 수 있다. 🧐

a) 사용방법 (굉장히 간단하다.)

typeof 값;

 

b) 모든 데이터 타입의 타입을 확인해보자(?)

 

결과 : 모든 데이터 타입은 맞게 나오는데 null 값이 object(객체)..?

 

분명 자바스크립트는 원시형과 참고형 두가지로 나뉘며 null은 원시형이라고 했으나 출력해보면 참고형으로 나온다.

찾아보니, 이는 자바스크립트 초기 버전의 버그라고 한다. 초기에 typeof를 구현할 때 다른 데이터 타입들(number, string 등등)을 정의하는 항목은 있었으나, null을 체크하는 항목은 누락되어 object 타입으로 나오게 된 것이다.

 

굳이 오류를 수정하지 않는 이유는 이미 수많은 사이트 내 코드가 기존의 typeof 형식대로 작성 돼 있기 때문에 고치는 것이 오히려 위험하다고 한다. 따라서 진정 null 값의 데이터 타입을 알고 싶다면 일치연산자를 통해 '변수 === null' 확인해보면 된다.

 

 

typeof 구현 코드(참고)

 JS_PUBLIC_API(JSType)
    JS_TypeOfValue(JSContext *cx, jsval v)
    {
        JSType type = JSTYPE_VOID;
        JSObject *obj;
        JSObjectOps *ops;
        JSClass *clasp;

        CHECK_REQUEST(cx);
        if (JSVAL_IS_VOID(v)) {  // (1)
            type = JSTYPE_VOID;
        } else if (JSVAL_IS_OBJECT(v)) {  // (2)
            obj = JSVAL_TO_OBJECT(v);
            if (obj &&
                (ops = obj->map->ops,
                 ops == &js_ObjectOps
                 ? (clasp = OBJ_GET_CLASS(cx, obj),
                    clasp->call || clasp == &js_FunctionClass) // (3,4)
                 : ops->call != 0)) {  // (3)
                type = JSTYPE_FUNCTION;
            } else {
                type = JSTYPE_OBJECT;
            }
        } else if (JSVAL_IS_NUMBER(v)) {
            type = JSTYPE_NUMBER;
        } else if (JSVAL_IS_STRING(v)) {
            type = JSTYPE_STRING;
        } else if (JSVAL_IS_BOOLEAN(v)) {
            type = JSTYPE_BOOLEAN;
        }
        return type;
    }

 

 

출처 : https://2ality.com/2013/10/typeof-null.html

출처: https://curryyou.tistory.com/183 

 

 

# 느낀점

null이 object라고..?!

 

이미 변수에 대해서는 알고 있어 가볍게 공부하고 있었는데, null 값이 object로 분류되는 오류에 대해서는 처음 알았다.

정보를 습득할 때 아~ 그냥 그렇구나 하고 넘어가면 딱 거기까지만 아는 게 되고, 얼마나 더 호기심을 갖고 파고드냐에 따라 얻는게 더 많아질 수 있다는 게 여실히 느껴진다. 앞으로도 '당연히' 공부하는 습관은 버리고 창의적으로 공부하는 습관을 들여야겠다.