JavaScript null과 undefined 차이

javascript · 7월 21일 · 13 min read

JavaScript에는 값이 없음을 나타내는 null과 undefined가 있다.
둘 다 falsy이고 nullish 값으로 취급되지만 생기는 경로와 직렬화 결과는 다르다.
값을 설계하는 입장에서는 두 값을 섞어 쓰기보다 한 가지 규칙을 정해 일관되게 다루는 편이 좋다.

null과 undefined의 의미

undefined는 JavaScript의 원시값이며 전역 객체의 속성이기도 하다.
아직 값이 할당되지 않았거나 요청한 값이 존재하지 않을 때 주로 나타난다.

null은 식별자가 아닌 리터럴 키워드다.
객체 값이 의도적으로 없음을 표현할 때 주로 사용한다.

이 의미 차이는 유용한 관례이지만 JavaScript가 모든 API에 강제하는 규칙은 아니다.
외부 API를 사용할 때는 그 API의 반환 규칙을 먼저 확인해야 한다.

값이 생기는 경로

초기화하지 않은 변수, 없는 속성, 명시적인 반환값이 없는 함수는 undefined를 만든다.
반면 내장 API가 결과 없음을 null로 반환하는 경우도 있다.

let result

const user = {}

function noReturnValue() {}

console.log(result) // undefined
console.log(user.name) // undefined
console.log(noReturnValue()) // undefined
console.log('sky'.match(/[aeiou]/g)) // null

const omitted = {}
const assigned = { name: undefined }

console.log(omitted.name) // undefined
console.log(assigned.name) // undefined
console.log('name' in omitted) // false
console.log('name' in assigned) // true

속성이 없는 것과 undefined를 직접 넣은 것도 읽을 때는 같은 값을 낸다.
그러나 속성의 존재 여부는 in 연산자로 구분할 수 있다.

판별과 nullish 처리

typeof undefined는 'undefined'지만 typeof null은 역사적인 이유로 'object'를 반환한다.
두 값은 일치 연산자로 비교하면 다른 값이다.

console.log(typeof undefined) // 'undefined'
console.log(typeof null) // 'object'
console.log(null === undefined) // false
console.log(null == undefined) // true

value == null은 null과 undefined를 둘 다 확인하는 특별한 패턴이다.
일반적인 비교 연산자 선택은 JavaScript ==와 === 차이에서 더 자세히 다룬다.

기본값을 넣을 때는 ||보다 ??가 의도를 잘 드러낼 수 있다.
??는 null과 undefined에서만 오른쪽 값을 사용하므로 0, false, 빈 문자열을 보존한다.

console.log(0 ?? 10) // 0
console.log('' ?? 'anonymous') // ''
console.log(null ?? 'default') // 'default'
console.log(undefined ?? 'default') // 'default'

JSON 직렬화 차이

null은 JSON이 표현할 수 있는 값이므로 그대로 남는다.
undefined는 객체 속성에서는 생략되고 배열 요소에서는 null로 바뀐다.
JSON.stringify(undefined) 자체는 JSON 문자열이 아닌 undefined를 반환한다.

console.log(JSON.stringify({ a: null, b: undefined }))
// {"a":null}

console.log(JSON.stringify([null, undefined]))
// [null,null]

console.log(JSON.stringify(undefined))
// undefined