JavaScript - undefined 타입 & null 타입 차이점

null

null 값은 오로지 null 값만 포함하는 별도의 자료형을 만듭니다.

let name = null;

자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다릅니다. 다른 언어에선 null을 '존재하지 않는 객체에 대한 참조’나 '널 포인터(null pointer)'를 나타낼 때 사용합니다.

하지만 자바스크립트에선 null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용합니다.

undefined

undefined 값도 null 값처럼 자신만의 자료형을 형성합니다.

undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다.

변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됩니다.

let name;

alert(name); // 'undefined'가 출력됩니다.


// undefined가 나오는 경우 예시
// 존재하지 않는 객체의 프로퍼티를 읽을려고 할 때
let obj = {};
console.log(obj.a); // undefined 

// 존재하지 않는 배열에 엘리먼트를 읽을려고 할 때
let arr = [1, 2, 3];
console.log(arr[10]); // undefined

 

변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 사용하세요. undefined는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨둡시다.

 

결론적으로 null과 undefined의 의미는 둘다 값의 존재 유무를 표현하는 타입입니다. 자바스크립트에서는 세밀한 부분의 의미는 달라도 문맥적 의미로는 같은 의미를 가진 가진 타입을 2개로 분리해서 정의하다보니 프로그래머 입장에서는 애매모호함을 만들어내 불편을 만들어주는 요소 중 하나입니다.

 

let value = null; // null 대입
console.log(value); // null
console.log(typeof value); // object
 
let value2; // 아무 것도 대입하지 않음
console.log(value2); // undefined
console.log(typeof value2); // undefined
 
value == value2; // true
value === value2; // false

null과 undefined를 동등 연산자인 ==로 비교해보면 자료형 비교까지 이루어지지 않기 때문에 true를 반환하는 것을 볼 수 있습니다. 하지만 자료형까지 엄격하게 검사하는 일치 연산자인 ===를 써보면 null과 undefined의 자료형이 다르기 때문에 false가 반환되는 것을 볼 수 있습니다.

검사 연사자에 따라 비교 결과가 다를 수 있다는 점을 유의합시다.