0, null, NaN, undefined 한 번에 정리, 비유로 알아보자. 자바스크립트 기초

자바스크립트에서 자주 혼동되는 값인 0, null, undefined, NaN의 차이점과 의미, 비교 방법, 처리 팁까지 개념 중심으로 정리한 콘텐츠입니다.

0, null, NaN, undefined 정리

0은 진짜 숫자입니다. null은 내가 의도적으로 비워 둔다고 표시한 값입니다. undefined는 아직 값이 정해지지 않았다는 상태입니다. NaN은 숫자 연산이 잘못되어 “숫자가 아니다”라는 의미를 담은 특별한 숫자입니다.

쉬운 비유로 설명

0

• 과일 상자 안에 과일이 없는 상태. 과일 상자 정상, 숫자도 숫자입니다.

null

• 과일 상자가 없는 상태 “지금은 비워둠”이라고 의도 표시를 해 둔 상태입니다.

undefined

• 과일 상자 자체를 찾지 않은 상황, 지정 오류임

NaN

• 치킨 상자가 올라와 있음

0은 왜 자꾸 ‘거짓’처럼 취급될까

0은 숫자이지만 불리언으로 강제 변환하면 false가 됩니다. 그래서 if (0) { ... }는 실행되지 않습니다. 이 동작 때문에 “0이면 값이 없다”로 착각하기 쉽습니다. 하지만 0은 분명한 데이터입니다. 길이 비교처럼 숫자 의미가 중요한 곳에서는 arr.length === 0처럼 정확한 조건을 쓰면 문제가 없습니다. 기본값을 줄 때도 count ?? 0처럼 null 병합 연산자를 쓰면 “0을 값 없음으로 오해하는 사고”를 피할 수 있습니다. 반대로 count || 0은 count가 0일 때도 0으로 바꿔버려 의도를 망칠 수 있으니 주의합니다.

null은 “빈칸”을 내가 일부러 넣는 것

null은 “지금은 비워 두자”라고 내가 결정할 때 넣는 값입니다. 예를 들어 사용자 주소 필드에 이전에는 값이 있었지만 현재는 지웠다는 사실을 표현하고 싶다면 null이 알맞습니다. 이때 비교는 value === null처럼 엄격 비교로 확인합니다. 이렇게 하면 null과 undefined를 확실히 구분할 수 있고, API 응답에서도 “서버가 의도적으로 비웠는지, 그냥 안 보냈는지”를 분리해 처리할 수 있습니다.

undefined는 “아직 정하지 않았다”가 자동으로 생기는 것

변수를 선언만 하고 값을 대입하지 않으면 자동으로 undefined가 됩니다. 객체에서 없는 속성에 접근할 때도 undefined가 나옵니다. 의도적으로 비우려면 null을 쓰고, 아직 결정되지 않은 상태거나 누락된 값이면 undefined가 자연스럽습니다. 접근 시에는 옵셔널 체이닝을 쓰면 안전합니다. 예를 들어 user.profile?.zipCode는 profile이 없으면 그냥 undefined를 돌려주고, 런타임 에러를 내지 않습니다. 기본값이 필요하면 user.profile?.zipCode ?? '미입력'처럼 이어서 쓰면 됩니다.

NaN은 “숫자 연산이 망가졌다”는 신호

NaN은 “Not a Number”의 줄임말이지만 타입은 "number"입니다. 문자열을 숫자로 바꾸다 실패하거나, 잘못된 계산이 섞이면 나타납니다. 특이하게도 NaN === NaN은 false라서 자기 자신과도 같지 않습니다. 이 때문에 확인은 Number.isNaN(x)로 해야 합니다. isNaN(x)는 내부에서 숫자 변환을 한 번 거쳐 판단하므로 문자열처럼 애매한 값에서 오판할 수 있습니다. 가능하면 Number.isNaN을 기본으로 사용하고, 입력 변환은 Number(value)나 parseInt(value, 10)처럼 의도를 드러내며 따로 처리합니다.

마무리하며

이 글은 자바스크립트에서 사용되는 0, null, undefined, NaN의 차이를 실생활 비유와 함께 설명하고, 각각의 특성과 사용 시 주의할 점을 구체적으로 알려주는 개발자 콘텐츠입니다.

FAQ