자바스크립트에서 null과 undefined의 차이점 완벽 정리

자바스크립트에서 null과 undefined는 모두 원시(primitive) 값입니다. 두 값은 비슷해 보이지만 의미와 용도가 분명히 다르기 때문에, 그 차이를 정확히 이해하는 것이 중요합니다.

원시 값과 비원시(참조) 값의 차이에 대해서는 별도의 글에서 더 자세히 다룰 예정이니 참고해 보세요.

undefined란 무엇인가?

undefined는 변수가 선언되었지만 아직 값이 할당되지 않은 상태를 나타냅니다. 즉, 자바스크립트 엔진이 "이 변수에는 아무런 값도 없다"고 알려주는 기본값이라고 할 수 있습니다.

예를 들어 다음 변수를 콘솔에 출력해 보겠습니다.

let dogBreed
console.log(dogBreed)
// undefined

dogBreed 변수는 선언만 되고 값이 할당되지 않았기 때문에 undefined가 출력됩니다.

null이란 무엇인가?

null은 개발자가 의도적으로 "값이 비어 있음"을 표현하기 위해 할당하는 값입니다. 코드에서 의도치 않은 undefined 변수가 남아 있는 것을 방지하고 싶을 때, 해당 변수에 null을 할당해 두었다가 나중에 실제 값을 넣어 주는 방식으로 활용할 수 있습니다.

let dogBreed = null
console.log(dogBreed)
// null

추가로 알아두면 좋은 정보

흥미로운 점은 null의 타입을 확인하면 객체(object)로 평가된다는 것입니다.

console.log(typeof dogBreed)
// object

이것은 사실 자바스크립트 초기 구현 과정에서 생긴 역사적인 버그로, 하위 호환성을 유지하기 위해 지금까지 그대로 남아 있습니다. 반면 undefined의 타입을 확인하면 문자열 그대로 'undefined'가 반환됩니다.

let emptyValue
console.log(typeof emptyValue)
// undefined

또한 동등 연산자(==)로 비교하면 null == undefined는 true를 반환하지만, 일치 연산자(===)로 비교하면 타입이 다르기 때문에 false가 반환됩니다. 두 값의 미묘한 차이를 구분할 때 이 점을 꼭 기억해 두세요.