Frontend Development
JavaScript의 undefined와 null: 그 차이점과 사용법
Kun Woo Kim
2025. 5. 27. 22:19
반응형
들어가며
JavaScript를 처음 배우는 개발자들이 가장 혼란스러워하는 개념 중 하나가 undefined와 null의 차이점입니다. 둘 다 "값이 없다"는 의미를 나타내지만, 그 용도와 동작 방식에는 중요한 차이가 있습니다. 이번 글에서는 이 두 개념의 차이점과 실제 사용 사례를 자세히 살펴보겠습니다.
undefined와 null의 기본 개념
undefined
undefined는 JavaScript에서 변수가 선언되었지만 값이 할당되지 않았을 때 자동으로 할당되는 값입니다.
let a;
console.log(a); // undefined
let b = undefined;
console.log(b); // undefinednull
null은 개발자가 의도적으로 "값이 없음"을 나타내기 위해 할당하는 값입니다.
let user = null;
console.log(user); // null주요 차이점
1. 할당 방식
- undefined: JavaScript 엔진이 자동으로 할당
- null: 개발자가 명시적으로 할당
2. 타입
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"3. 비교 연산
// 느슨한 비교 (==)
console.log(undefined == null); // true
// 엄격한 비교 (===)
console.log(undefined === null); // false실제 사용 사례
undefined의 일반적인 발생 상황
변수 선언만 하고 초기화하지 않은 경우
let name; console.log(name); // undefined존재하지 않는 객체 프로퍼티 접근
const user = {}; console.log(user.name); // undefined함수의 반환값이 없는 경우
function doNothing() {} console.log(doNothing()); // undefined
null의 일반적인 사용 사례
의도적인 값 초기화
let user = null; // 사용자 정보가 아직 로드되지 않음객체 참조 해제
let largeObject = { /* 대용량 데이터 */ }; // 더 이상 필요하지 않은 경우 largeObject = null;
메모리 관리 관점에서의 차이
null과 메모리 관리
- 객체를 참조하는 변수에
null을 할당하면 가비지 컬렉션의 대상이 됨 - 대용량 데이터를 다룰 때 메모리 관리를 위해 사용
let heavyData = { /* 대용량 데이터 */ };
// 데이터 사용 완료 후
heavyData = null; // 가비지 컬렉션 대상이 됨undefined와 메모리 관리
undefined는 단순히 "값이 없음"을 나타내는 상태- 메모리 해제와 직접적인 관련 없음
- 가비지 컬렉션을 유도하지 않음
모범 사례와 주의사항
권장하는 사용법
null 사용
- 의도적으로 값이 없음을 나타낼 때
- 객체 참조를 해제할 때
- API 응답에서 값이 없음을 명시할 때
undefined 사용
- 변수나 프로퍼티가 아직 초기화되지 않았을 때
- 선택적 매개변수가 전달되지 않았을 때
주의사항
- 명시적 undefined 할당 피하기
// 권장하지 않는 방법 let value = undefined;
// 권장하는 방법
let value;
2. **null 체크 시 주의**
```javascript
// 안전한 null 체크
if (value === null) {
// null 처리
}
// 안전한 undefined 체크
if (typeof value === 'undefined') {
// undefined 처리
}결론
undefined와 null은 각각의 고유한 용도가 있으며, 상황에 맞게 적절히 사용하는 것이 중요합니다. undefined는 JavaScript 엔진이 자동으로 할당하는 값으로, 변수의 초기 상태를 나타내는 데 사용됩니다. 반면 null은 개발자가 의도적으로 "값이 없음"을 표현할 때 사용하며, 메모리 관리에도 활용됩니다.
이 두 개념을 올바르게 이해하고 사용하면 더 안정적이고 예측 가능한 코드를 작성할 수 있습니다.
참고 자료
반응형