[JAVA SCRIPT] undefined와 null의 차이 : 자바스크립트의 두 가지 '없음'에 대한 철학적 고찰

undefined와 null의 차이

자바스크립트를 처음 접하는 개발자들이 가장 혼란스러워하는 부분 중 하나가 바로 '값이 없음'을 나타내는 두 가지 상태, undefined와 null입니다. 타 언어에서는 대개 하나의 'null' 키워드로 해결되는 문제가 왜 자바스크립트에서는 이분화되어 있을까요? 이 글에서는 두 값의 기술적 차이를 넘어, 코드의 의도(Intent)를 어떻게 구분해야 하는지 심층적으로 다룹니다.

1. 개념의 정의: 선언과 할당의 경계

기본적으로 두 값 모두 '값이 존재하지 않음'을 나타내지만, 그 발생 원인과 의미는 완전히 다릅니다.

• undefined: 변수는 선언되었지만 아직 값이 할당되지 않은 상태를 의미합니다. 즉, 자바스크립트 엔진이 자동으로 초기화하는 값입니다.
• null: 변수에 '값이 없음'을 명시적으로 할당한 상태입니다. 개발자가 의도적으로 해당 변수가 비어있음을 선언할 때 사용합니다.

2. undefined vs null 기술적 비교 분석

두 값의 차이를 데이터 타입, 비교 연산자, 산술 연산의 관점에서 정리했습니다.

구분	undefined	null
의미	값이 할당되지 않음 (System-level)	값이 의도적으로 비어있음 (Program-level)
typeof 결과	"undefined"	"object" (JS의 오래된 설계 오류)
변수 상태	선언은 되었으나 초기화 전	객체 연결을 해제하거나 비워둘 때 사용
숫자 변환 (Number)	NaN	0
JSON 직렬화	생략됨 (Key 자체가 사라짐)	null 값으로 유지됨

3. 동등 비교(==)와 일치 비교(===)의 함정

자바스크립트의 느슨한 비교는 때때로 예상치 못한 결과를 초래합니다.

console.log(undefined == null);  // true (두 값 모두 빈 값으로 간주)
console.log(undefined === null); // false (데이터 타입이 다름)
        

실무에서는 데이터의 엄격한 구분을 위해 반드시 일치 연산자(===)를 사용하는 습관이 중요합니다.

4. 실전 Sample Example: 언제 무엇을 쓸 것인가?

사용자 정보 로드 시나리오

데이터가 존재하지 않는 상태를 표현할 때 null을 할당함으로써 명확한 의미를 전달할 수 있습니다.

// 1. 초기값 설정
let userProfile = null; // 아직 프로필 정보를 불러오지 않았음을 명시

function fetchUser(id) {
    if (!id) return; // id가 없으면 undefined 반환 (암묵적)
    
    // 데이터 로직...
    if (dataNotFound) {
        return null; // 검색 결과가 '없음'을 명시적으로 반환
    }
}

userProfile = fetchUser(101);

if (userProfile === null) {
    console.log("해당 사용자가 존재하지 않습니다.");
} else if (userProfile === undefined) {
    console.log("데이터 요청이 잘못되었습니다.");
}
        

5. typeof null === 'object'의 역사적 배경

자바스크립트의 typeof null이 "object"를 반환하는 것은 언어 설계 초기의 실수로 알려져 있습니다. 자바스크립트는 값을 32비트 단위로 저장했는데, 객체는 타입 태그가 000이었습니다. 그런데 null 역시 모든 비트가 0(Null Pointer)이었기 때문에 객체로 오인된 것입니다. 이는 현재 수정할 경우 기존 웹 사이트들에 심각한 하위 호환성 문제를 일으키므로 '수정 불가능한 특징'으로 남게 되었습니다.

6. 결론: 깨끗한 코드를 위한 제언

효율적인 디버깅과 가독성을 위해 다음 원칙을 권장합니다.

• 변수를 초기화할 때 '비어있음'을 나타내고 싶다면 null을 사용하세요.
• 변수가 정의되지 않았음을 나타내는 undefined는 시스템에 맡기고 개발자가 직접 할당하는 것은 지양하세요.
• 함수 인자에서 값이 넘어오지 않았을 때의 처리는 Default Parameter를 활용해 undefined 상황을 방어하세요.

---

참조 및 출처:

• 자바스크립트 완벽 가이드 (David Flanagan 저)
• ECMA-262, 14th edition Specification
• MDN Web Docs: Global Objects - undefined / null