undefined 와 null 의 차이

기본적으로 둘의 차이는
undefined는 자바스크립트 엔진이 명시적으로 부여하는 경우가 있고, 사용자가 직접 할당하는 경우도 있다.
null은 사용자가 직접 할당해야만 사용된다.

자바스크립트 엔진은 사용자가 응당 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로는 그렇게 하지 않았을 때 undefined를 반환한다.
아래는 그 세가지 경우.

1. 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
2. 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때
3. return 문이 없거나 호출되지 않는 함수의 실행 결과

변수는 변경가능한 데이터가 담길 수 있는 공간 / 식별자는 그 변수의 이름

let a = [];
a.length = 3;
a  //[ empty, empty, empty ] 

위처럼 빈 배열의 요소는 undefined.가 아니라 empty '비어있는 값' 이다.
빈 값은 forEach나 map, filter, reduce 처럼 배열 요소를 순환하는 메서드에서 순회하지 않는다.
(undefined는 순회한다. 단, undefined를 일부러 할당했을 경우에)

배열도 '객체(object) 이므로 존재하지 않는(빈 값) 프로퍼티에 대해선 순회하지 못하는 것이다.

값으로써 어딘가에 할당 된 undefined는 실존 데이터다.
자바스크립트 엔진이 할 수 없이 반환(할당X)하는 undefined는 문자그대로 값이 없음(empty)을 의미한다.

이제 혼란스러울 수 있다. 할당된 undefined는 실제 데이터지만 JS엔진이 반환하는 undefined는 값이 없음을 의미한다.

이 혼란을 피하기 위해 undefined와 null 둘을 구분하고 한가지만 사용하면 된다.

undefined는 직접 할당하지 않아야 하고, 값이 없음을 표현해야 할 때는 null을 할당해서 사용자가 할당한 값임을 구분할 수 있어야 한다.

추가로 주의해야하는 점은 typeof null === 'object' 라는 것이다. (자바스크립트 자체 버그)
따라서 어떤 변수의 값이 null 인지 여부를 판단하기 위해서는 typeof 대신 다른 방식으로 접근해야 한다.

let n = nulll;

n == undefined; //true
n == null; //true

n === undefined; //false
n === null; //true

위처럼 동등연산자(==)로 비교할 경우 undefined와 null이 같다고 판단하지만
일치 연산자(===)로 비교하면 정확히 판별할 수 있다.