undefined vs null

손준호·2023년 9월 12일

ES6

목록 보기

4/5

필자는 한밭대학교 무선통신소프트웨어 연구실에서 Web/app Front-End 를 공부하고 있으며, 현재는 교수님과 연구원님의 지도를 받으며 React 세미나를 진행하고 있다.

배경

리액트 개념정리 · 클론코딩

위 강의로 세미나를 진행하다가 React의 조건부 렌더링에 대한 얘기가 나왔다.

Avatar 컴포넌트를 만드는데, 새로운 사람이면 isNew Props를 사용해 New 라는 글자를 렌더링 하는 내용이었다.

React에서는 조건부 렌더링을 구현할 수 있는 여러가지 방법이 있는데, 강의에서는 위 코드의 7번 라인처럼 && 연산자를 사용해 Javascript 의 단축평가를 이용해 원하는 내용을 렌더링하고 있다.

그리고 8번 라인처럼 ? 삼항 연산자를 이용해 isNew 가 참이면 New를 렌더링하고, 아니라면 undefined를 렌더링하여 사용자에게는 아무것도 보여주지 않을 수 있다.

이전에 NBA 프로젝트를 진행할 때 모달 창을 구현하면서 이처럼 어떤 boolean 변수의 값에 따라 삼항연산자로 조건부 렌더링을 해본적이 있는데, 그때 gpt 에게 물어봤을 때는 조건부 렌더링을 null로 했었다.

그런데 여기서 8번라인처럼 undefined 구현하니 마찬가지로 원하는 동작이 실행됐다.

따라수 연구원님께 여쭤봤고, undefined와 null의 차이를 분석하는 과제가 부여되어 본 글을 작성하게 되었다.

undefined & null

먼저 undefined 와 null은 모두 Javascript의 Data Type 이다.

JS에는 아래의 7가지 타입이 있다.

number
string
boolean
undefined
null
object
Symbol

7가지 타입에서 number, string, boolean, undefined, null, Symbol 은 원시 값이다.

Modren JavaScript Deep Dive 6장 데이터 타입에서는 undefined 타입과 null 타입을 각각 아래처럼 기술하고 있다.

undefined : var 키워드로 선언된 변수에 암묵적으로 할당되는 값
null : 값이 없다는 것을 의도적으로 명시할 때 사용하는 값

undefined와 null은 값인 동시에 자바스크립트의 데이터 타입 이다.

즉 각 데이터 타입에 맞는 값이 있으며, 각 타입에는 undfiend와 null 두 가지 값 밖에 없다.

undefined

undefined란 직역하면 “정의되지 않은” 이다.

이 undefined 는 var 키워드와 호이스팅과 밀접한 관련이 있어 보인다.

undefined는 변수를 선언한 이후, 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다.


console.log(foo);
var foo;

위 코드에서는 출력으로 undefined 가 나온다.

var 키워드로 선언한 변수는 호이스팅 된다.

그렇다고 const 와 let 으로 선언한 변수가 호이스팅이 안된다는 의미는 아니다.

이는 스코프와 실행 컨텍스트를 자세히 알아야 하는 내용이므로 본 글에서는 생략한다.

어쨌든 var 로 선언한 변수는 소스코드 실행 전에 제일 위로 끌어올려 (hoisting) 져서 실행된다.

즉 선언되고, 이 변수가 가리키는 메모리에는 undefined 라는 값을 JS 엔진이 할당하는 것이다.

이렇게 undefined는 개발자가 의도적으로 값을 할당하는데 쓰이는 키워드가 아니다.

변수를 참조했을 때 undefined가 반환된다는 건, 초기화되지 않은 변수 라는걸 직관적으로 알 수 있다.

즉 undefined는 엔진이 할당하는것이지, 개발자가 할당하는게 아니다!

null

null 또한 JS의 타입이며, 이 또한 값은 null이 유일하다.

JS는 대소문자를 구분하므로, NULL, Null 등과 다르다.

프로그래밍 언어에서 null은 변수에 값이 없다는 걸 의도적으로 명시할 때 사용한다.

변수에 null을 할당한다는 말은 그 변수가 참조하던 값을 더 이상 참조하지 않겠다는 의미이다. 이 말은 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것이다.

따라서 JS엔진은 아무도 참조하지 않는 메모리 공간에 대해 가비지 콜렉션을 수행한다.

즉, 어떤 변수에 null을 할당하는 것은 JS 엔진에게 “ 나 이 변수 안쓸거야! 메모리 해제해 줘!” 라고 말하는것과 다름 없다.

함수가 유효한 값을 반환하지 못하면 null을 반환하기도 한다.

차이점

undefined와 null의 두드러지는 차이점은 몇가지가 있지만,

가장 큰 차이는 개발자가 의도적으로 없음을 표현했는가? 아닌가? 인 것 같다.

처음 질문이었던 조건부 렌더링에서 undefined를 써야하나요? null을 써야 하나요? 라는 질문에 대한 답이 어느정도 된 것 같다.

위 예제에서는 isNew 가 거짓이라면 명시적으로 아무것도 안보여주려고 하는 것이다.

즉 undefind 보다는 null을 사용하는게 맞는 것 같다.

의문점

어떤 글에서 undefined와 null을 ===로 null과 undefined의 타입과 값을 비교해보면 false가 나온다는 글을 봤다.

그래서 null과 undefined를 typeof로 체크해봤다.

console.log(typeof null);
console.log(typeof undefined);

→ ??? null이 object다?

나의 바이블 Modern Javascript Deep Dive 에서는 null은 원시 타입의 값이며, null 타입이라고 하는데,,,,,,

갑자기 객체라고?

[JS] 자바스크립트 null은 객체? 기본 타입! (typeof null)

위 글을 참고하면, null은 객체가 아니고 기본 타입이라고 한다.

그럼 typeof 로 null을 찍으면 왜 object가 나오느냐??

답은 간단하다.

자바스크립트 초기 버전의 버그

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;
    }