자바스크립트에서 undefined와 null의 차이점 이해하기
자바스크립트에서는 undefined와 null이 모두 "값이 없음"을 나타내지만, 그 사용 의도와 상황은 서로 다릅니다.
이를 명확히 이해하면 코드 작성 시 의도를 더 분명하게 전달할 수 있으며, 디버깅 과정에서도 혼란을 줄일 수 있습니다.
이번 글에서는 undefined와 null의 개념, 주요 차이점, 그리고 적절한 사용 사례를 심도 있게 살펴보겠습니다.
undefined란
undefined는 자바스크립트에서 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다.
이는 자바스크립트 엔진이 자동으로 부여하는 기본값으로, 프로그래머가 의도적으로 사용하는 경우는 드뭅니다.
주요 특징
- 자동 초기화 값: 변수를 선언했으나 값을 할당하지 않으면 자동으로 undefined가 할당됩니다.
- 함수 반환값: 함수에서 명시적으로 값을 반환하지 않으면 자동으로 undefined를 반환합니다.
- 존재하지 않는 프로퍼티 접근: 객체의 존재하지 않는 프로퍼티를 참조하려고 하면 undefined가 반환됩니다.
- 타입: typeof undefined는 'undefined'를 반환합니다.
예시
// 선언만 하고 값 할당하지 않은 변수
let uninitialized;
console.log(uninitialized); // undefined
// 반환값이 없는 함수
function noReturnValue() {}
console.log(noReturnValue()); // undefined
// 존재하지 않는 프로퍼티 접근
let obj = {};
console.log(obj.nonExistentProp); // undefined
null이란
null은 의도적으로 값이 없음을 표현하기 위해 개발자가 직접 할당하는 값입니다.
이는 객체가 비어 있거나 사용되지 않음을 나타낼 때 주로 사용됩니다.
주요 특징
- 개발자가 의도적으로 할당: 특정 변수나 프로퍼티에 "비어 있음"을 나타내고자 할 때 사용합니다.
- 객체와 관련된 의미: 비어 있거나 초기화되지 않은 객체를 나타내는 데 자주 사용됩니다.
- 타입 버그: typeof null이 'object'를 반환하는 것은 자바스크립트 초창기부터 존재한 설계상의 오류입니다.
- 타입: null은 자바스크립트에서 원시 타입(Primitive Type)으로 분류됩니다.
예시
// 객체가 비어 있음을 명시적으로 나타냄
let emptyObject = null;
console.log(emptyObject); // null
// 초기 상태를 의도적으로 null로 설정
let data = null;
console.log(data); // null
undefined와 null의 주요 차이점
두 개념은 종종 혼동되지만, 그 의미와 사용 목적은 분명히 다릅니다. 아래 표는 주요 차이점을 정리한 내용입니다:
구분 undefined null
| 구분 | undefined | null |
| 할당 방식 | 자동으로 할당 | 개발자가 명시적으로 할당 |
| 타입 | 'undefined' | 'object' (타입 오류) |
| 용도 | 변수에 값이 없음을 나타냄 | 객체 또는 데이터의 "비어 있음"을 표현 |
| 비교 연산 | 느슨한 비교(==)에서 null과 동일 | 느슨한 비교(==)에서 undefined와 동일 |
요약 및 결론
undefined와 null은 자바스크립트에서 "값이 없음"을 나타내는 데 사용되지만, 그 의미와 목적은 다릅니다.
undefined는 시스템에서 자동으로 부여되는 값이며, 개발자가 이를 의도적으로 사용하는 경우는 드뭅니다.
반면, null은 값이 없음을 명시적으로 나타내기 위해 개발자가 사용하는 값입니다.