JS_javascript 스킬을 기반으로 undefined와 null의 차이 분석

그래서 곰곰이 생각한 끝에 이 글을 쓰게 되었고 여러분께 도움을 요청하게 되었습니다.
우리 모두 알고 있듯이:
null == 정의되지 않음
그러나:
null !== undefine
그럼 둘의 차이점은 무엇인가요?
null
객체이지만 비어 있습니다. 객체이기 때문에 typeof null 은 'object' 를 반환합니다.
null은 JavaScript 예약 키워드입니다.
null이 수치 연산에 참여하면 해당 값이 자동으로 0으로 변환됩니다. 따라서 다음 표현식은 계산 후 올바른 값을 얻습니다.
Expression: 123 null 결과 값: 123
Expression: 123 * null 결과 값: 0
undefine
undefine은 전역 객체(window)의 특수 속성으로 해당 값은 undefine입니다. 그러나 typeof undefound 는 'undefine' 을 반환합니다.
정의되지 않음은 특별한 의미를 가지고 있지만 실제로는 속성이며 전역 개체(창)의 속성입니다. 아래 코드를 보세요.

코드 복사 코드는 다음과 같습니다.

alert( 창에서 '정의되지 않음'); //출력: true
var anObj = {};
alert(anObj에서 '정의되지 않음'); //출력: false

가능합니다. 본 바와 같이 정의되지 않은 것은 window 객체의 속성이지만 anObj 객체의 속성은 아닙니다.
참고: 정의되지 않음은 특별한 의미를 갖는 속성이지만 JavaScript에서는 예약어가 아닙니다.
정의되지 않음이 수치 계산에 참여하는 경우 결과는 NaN이어야 합니다.
그런데 NaN은 전역 개체(창)의 또 다른 특수 속성이며 Infinity도 마찬가지입니다. 이러한 특수 속성 중 어느 것도 JavaScript용으로 예약된 키워드가 아닙니다!
정의되지 않은 성능 개선
프로그램에서 정의되지 않은 값을 사용할 때 실제로는 윈도우 객체의 정의되지 않은 속성을 사용하게 됩니다.
마찬가지로 변수를 정의했지만 초기 값을 할당하지 않은 경우, 예를 들면 다음과 같습니다.

var aValue;
이때 JavaScript는 초기 값을 창에 설정합니다. 사전 컴파일이라고 합니다.
따라서 변수나 값을 정의되지 않은 것과 비교할 때 실제로는 창 개체의 정의되지 않은 속성과 비교됩니다. 이 비교 과정에서 JavaScript는 window 개체의 'undefine'이라는 속성을 검색한 다음 두 피연산자의 참조 포인터가 동일한지 비교합니다.
윈도우 객체는 속성값이 많기 때문에 undefine과 비교할 때마다 윈도우 객체의 undefound 속성을 검색하는데 시간이 걸립니다. 이는 정의되지 않은 항목과 자주 비교해야 하는 함수에서 성능 문제가 될 수 있습니다. 따라서 이 경우에는 정의되지 않은 로컬 변수를 직접 정의하여 정의되지 않은 비교 속도를 높일 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다.

function anyFunc()
{
var undefine; //사용자 정의된 로컬 정의되지 않은 변수
if(x == undefine) //스코프 참조 비교
while(y != undefine) //스코프 참조 비교
} ;

여기서 정의되지 않은 지역 변수를 정의할 때 초기 값은 window.undefine 속성 값에 대한 참조가 됩니다. 새로 정의된 지역 변수가 정의되지 않은 함수 범위에 존재합니다. 이후 비교 작업에서는 자바스크립트 코드를 작성하는 방식에는 변화가 없지만 비교 속도는 매우 빠르다. 범위 내의 변수 개수는 창 개체의 속성보다 훨씬 적기 때문에 변수 검색 속도가 크게 향상됩니다.
이것이 바로 많은 프런트엔드 JS 프레임워크가 종종 정의되지 않은 로컬 변수 자체를 정의하는 이유입니다!
이 기사가 도움이 되기를 바랍니다.