JavaScript에서 null과 정의되지 않은 것의 차이점

JavaScript 개발 중에 다음과 같은 질문을 받았습니다. null과 정의되지 않음의 차이점은 무엇입니까? 특히 undefound의 구현 원칙이 포함되어 있기 때문에 한동안 답변하기 어렵습니다.

우리 모두 알고 있듯이: null == 정의되지 않음

그러나: null !== 정의되지 않음

그럼 둘의 차이점은 무엇인가요?

null

객체이지만 비어 있습니다. 객체이기 때문에 typeof null 은 'object' 를 반환합니다.

null은 JavaScript 예약 키워드입니다.

null은 수치 연산에 참여할 때 자동으로 0으로 변환됩니다. 따라서 다음 표현식은 계산 후 올바른 값을 얻습니다.

표현식: 123 + null　결과 값: 123

표현식: 123 * null　결과 값: 0

undefine

undefine은 전역 개체(window)의 특수 속성으로 해당 값은 undefine입니다. 그러나 typeof undefound 는 'undefine' 을 반환합니다.

undefine은 특별한 의미를 가지고 있지만 사실 속성이고, 전역객체(창)의 속성입니다. 다음 코드를 살펴보세요.

alert('undefined' in window);   //输出：true
var anObj = {};
alert('undefined' in anObj);    //输出：false

보시다시피 undefine은 window 객체의 속성이지만 anObj 객체의 속성은 아닙니다.

참고: 정의되지 않음은 특별한 의미를 갖는 속성이지만 JavaScript에서는 예약어가 아닙니다.

undefound가 수치 계산에 참여하는 경우 결과는 NaN이어야 합니다.

그런데 NaN은 전역 개체(창)의 또 다른 특수 속성이며 Infinity도 마찬가지입니다. 이러한 특수 속성은 JavaScript의 예약 키워드가 아닙니다.

정의되지 않은 성능 개선

프로그램에서 정의되지 않은 값을 사용할 때 실제로는 윈도우 객체의 정의되지 않은 속성을 사용하게 됩니다.

마찬가지로 변수를 정의했지만 초기값을 할당하지 않은 경우, 예를 들면 다음과 같습니다.

var aValue;

이때 JavaScript는 초기값은 다음과 같습니다. window.undefine 속성에 대한 참조로 설정됩니다.

따라서 변수나 값을 정의되지 않음과 비교할 때 실제로는 창 개체의 정의되지 않은 속성과 비교됩니다. 이 비교 프로세스 동안 JavaScript는 창 개체의 'undefine'이라는 속성을 검색한 다음 두 피연산자의 참조 포인터를 비교하여 동일한지 확인합니다.

윈도우 객체는 속성값이 많기 때문에 undefine과 비교할 때마다 윈도우 객체의 undefound 속성을 검색하는데 시간이 걸립니다. 이는 정의되지 않은 항목과 자주 비교해야 하는 함수에서 성능 문제가 될 수 있습니다. 따라서 이 경우에는 정의되지 않은 로컬 변수를 직접 정의하여 정의되지 않은 비교 속도를 높일 수 있습니다. 예를 들면 다음과 같습니다.

function anyFunc()
    {
        var undefined;          //自定义局部undefined变量
         
        if(x == undefined)      //作用域上的引用比较
         
         
        while(y != undefined)   //作用域上的引用比较
         
    };

그중 정의되지 않은 지역 변수를 정의할 때 초기 값은 window.undefine 속성 값에 대한 참조가 됩니다. 새로 정의된 지역 변수가 정의되지 않은 함수 범위에 존재합니다. 이후 비교 작업에서는 자바스크립트 코드를 작성하는 방식에는 변화가 없지만 비교 속도는 매우 빠르다. 범위 내의 변수 개수는 창 개체의 속성보다 훨씬 적기 때문에 변수 검색 속도가 크게 향상됩니다.

이것이 바로 많은 프런트엔드 JS 프레임워크가 종종 정의되지 않은 로컬 변수 자체를 정의하는 이유입니다.