JavaScript의 undefined와 null: 그 차이점과 사용법

들어가며

JavaScript를 처음 배우는 개발자들이 가장 혼란스러워하는 개념 중 하나가 undefined와 null의 차이점입니다. 둘 다 "값이 없다"는 의미를 나타내지만, 그 용도와 동작 방식에는 중요한 차이가 있습니다. 이번 글에서는 이 두 개념의 차이점과 실제 사용 사례를 자세히 살펴보겠습니다.

undefined와 null의 기본 개념

undefined

undefined는 JavaScript에서 변수가 선언되었지만 값이 할당되지 않았을 때 자동으로 할당되는 값입니다.

let a;
console.log(a); // undefined

let b = undefined;
console.log(b); // undefined

null

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의 일반적인 발생 상황

1. 변수 선언만 하고 초기화하지 않은 경우

let name;
console.log(name); // undefined

2. 존재하지 않는 객체 프로퍼티 접근

const user = {};
console.log(user.name); // undefined

3. 함수의 반환값이 없는 경우

function doNothing() {}
console.log(doNothing()); // undefined

null의 일반적인 사용 사례

1. 의도적인 값 초기화

let user = null; // 사용자 정보가 아직 로드되지 않음

2. 객체 참조 해제

let largeObject = { /* 대용량 데이터 */ };
// 더 이상 필요하지 않은 경우
largeObject = null;

메모리 관리 관점에서의 차이

null과 메모리 관리

• 객체를 참조하는 변수에 null을 할당하면 가비지 컬렉션의 대상이 됨
• 대용량 데이터를 다룰 때 메모리 관리를 위해 사용

let heavyData = { /* 대용량 데이터 */ };
// 데이터 사용 완료 후
heavyData = null; // 가비지 컬렉션 대상이 됨

undefined와 메모리 관리

• undefined는 단순히 "값이 없음"을 나타내는 상태
• 메모리 해제와 직접적인 관련 없음
• 가비지 컬렉션을 유도하지 않음

모범 사례와 주의사항

권장하는 사용법

1. null 사용

   • 의도적으로 값이 없음을 나타낼 때
   • 객체 참조를 해제할 때
   • API 응답에서 값이 없음을 명시할 때

2. undefined 사용

   • 변수나 프로퍼티가 아직 초기화되지 않았을 때
   • 선택적 매개변수가 전달되지 않았을 때

주의사항

1. 명시적 undefined 할당 피하기

// 권장하지 않는 방법
let value = undefined;

// 권장하는 방법
let value;

2. null 체크 시 주의

// 안전한 null 체크
if (value === null) {
    // null 처리
}

// 안전한 undefined 체크
if (typeof value === 'undefined') {
    // undefined 처리
}

결론

undefined와 null은 각각의 고유한 용도가 있으며, 상황에 맞게 적절히 사용하는 것이 중요합니다. undefined는 JavaScript 엔진이 자동으로 할당하는 값으로, 변수의 초기 상태를 나타내는 데 사용됩니다. 반면 null은 개발자가 의도적으로 "값이 없음"을 표현할 때 사용하며, 메모리 관리에도 활용됩니다.

이 두 개념을 올바르게 이해하고 사용하면 더 안정적이고 예측 가능한 코드를 작성할 수 있습니다.

참고 자료

• MDN Web Docs - undefined
• MDN Web Docs - null
• JavaScript.info - null과 undefined