핵심 요약
undefined는 "시스템이 값을 아직 안 넣음"(선언만 하고 미할당, 없는 속성, 반환값 없는 함수), null은 "개발자가 의도적으로 비어 있음을 표시"한 값이다. 구분해서 쓰면 "값이 없다"의 원인이 코드로 드러난다.
1. undefined가 나오는 경우
let x; // undefined (미할당)
const o = {}; o.name // undefined (없는 속성)
function f() {} f() // undefined (반환값 없음)
[1,2][5] // undefined (범위 밖 인덱스)
function g(a) { return a } g() // undefined (인자 안 넘김)2. null은 직접 넣는 값
let user = null // "아직 로그인 안 함"을 명시
config.timeout = null // "기본값 사용" 의도
// DOM 조회 실패는 null
document.querySelector('.x') // 없으면 null3. 헷갈리는 동작들
| 표현 | 결과 |
|---|---|
typeof undefined | "undefined" |
typeof null | "object" (유명한 버그) |
null == undefined | true |
null === undefined | false |
JSON.stringify({a:undefined}) | "{}" (키 사라짐) |
JSON.stringify({a:null}) | '{"a":null}' |
4. 안전하게 다루기 — ?. 와 ??
// 옵셔널 체이닝 — 중간이 null/undefined면 undefined 반환
user?.profile?.name
// null 병합 — null/undefined일 때만 기본값
const name = user?.name ?? "손님"
// 주의: || 는 0·""·false도 기본값으로 대체해버림
const cnt = value ?? 0 // 0을 살리려면 || 대신 ??5. 실무 지침
- "값 없음"을 표현할 땐 팀 규칙을 정해 하나로 통일(보통 null 선호, DB·JSON 호환)
- TypeScript는
strictNullChecks로 null/undefined 누락을 컴파일 단계에서 잡는다 - 기본값엔
||대신??를 우선 고려(0·빈문자열을 살려야 할 때)
자주 묻는 질문
null과 undefined 중 뭘 써야 하나요?
"의도적으로 비었다"를 표현할 땐 null을 권장합니다(JSON·DB와 호환이 좋음). undefined는 시스템이 자연스럽게 만드는 값이라 직접 대입하기보다 "아직 없음" 상태로 두는 편입니다. 무엇을 쓰든 팀에서 하나로 통일하는 게 중요합니다.
typeof null이 왜 "object"인가요?
JavaScript 초기 구현의 버그인데 하위 호환 때문에 고치지 못하고 남았습니다. null 여부는 typeof가 아니라 x === null로 직접 비교해야 정확합니다.
?? 와 || 는 뭐가 다른가요?
||는 falsy 값(0·""·false·null·undefined) 전부를 기본값으로 대체합니다. ??는 오직 null·undefined일 때만 대체하죠. 카운트 0이나 빈 문자열을 유효한 값으로 살려야 한다면 반드시 ??를 쓰세요.
댓글 0