undefined와 null 의 차이점

Woody·2025년 8월 14일

JavaScript 매일메일

매일메일

목록 보기

8/13

오늘의 질문

undefined와 null 의 차이점에 대해서 설명해주세요

내답변

서버단에서 내려주는 null 은 값이 없음을 뜻하지만 undefined는 어떤 문제로 찾을수 없음에 가깝다

두개의 오류 방지를 위해 타입을 명확히 하거나, 옵셔널 체이닝으로 방어하는 방법이 있다

실제답변

두개 모두 '값이 없다' 의 의미이지만 쓰임새와 의미에 차이점이 존재한다.

undefined는 자바스크립트에서 자동으로 할당되는 값이다.
변수는 선언했지만 값을 할당하지 않을때, 자동으로 할당하게 된다

반면에 null 은 개발자가 의도적으로 할당하는 값이다. 특정 변수가 값이 없음을 명확히 하기 위해 넣어주는 것이다.

느슨한비교인 '==' 에서는 null 과 undefined 가 같게 처리되지만, 엄격한 비교 '===' 에서는 다르게 취급된다

메모리 관련

null 은 개발자가 명시적으로 메모리를 해제하고자 할 때 사용하는 방법이다. 객체를 참조하던 변수를 null 로 설정하면, 해당 변수는 더 이상 그 객체를 가리키지 않으므로 참조가 끊어진다. 이렇게 참조가 끊기면 JavaScript 의 GC 에서 메모리 제거를 실행한다. 이를 통해 정리 대상으로 유도가 가능할 것이다.

undefined는 자바스크립트 엔진이 자동으로 할당하는 값으로, 메모리 해제외는 관련이 없다.

느낀점 + 추가정보

두개의 차이를 어렴풋이 알고는 있었지만 명확히 알게되었다. 메모리에 관련된것도 기억해두면 좋을 것 같다.

추가적으로 NaN 은 Not a Number 의 약자로 숫자가 아닌 값을 의미한다. 숫자 타입이지만, 숫자가 아닌 것에 대한 값의 표현인데 예를들어 '100' 은 Number 지만, '100AB' 는 숫자 변환시 오류가 발생할 것이다. 이에 Number 변환은 했지만, 잘못된 값임을 의미한다

1. 타입 체크시 주의사항

// typeof의 특이한 동작
typeof undefined // "undefined"
typeof null      // "object" (JavaScript의 오래된 버그)

// 올바른 null 체크 방법
if (value === null) { }
if (value == null) { } // undefined도 함께 체크

2. 함수 매개변수와 기본값

// undefined는 기본값을 트리거하지만, null은 그렇지 않음
function greet(name = 'Guest') {
  console.log(`Hello, ${name}`);
}

greet(undefined); // "Hello, Guest"
greet(null);      // "Hello, null"

3. 옵셔널 체이닝과 Nullish 병합 연산자

// 옵셔널 체이닝 (?.)
const value = obj?.property?.nested;

// Nullish 병합 연산자 (??)
const result = value ?? 'default'; // null/undefined일 때만 default
const result2 = value || 'default'; // falsy 값(0, '', false 등) 모두 default

4. Typescript 에서의 활용

// 명시적 타입 정의
type User = {
  name: string;
  email?: string;        // undefined 가능
  deletedAt: Date | null; // null 명시적 사용
};

// 타입 가드
function isNotNullish<T>(value: T | null | undefined): value is T {
  return value !== null && value !== undefined;
}

// 사용 예시
const users: (User | null)[] = [user1, null, user2];
const validUsers = users.filter(isNotNullish); // User[] 타입