[JS] undefined와 null

soleil_lucy·2025년 11월 30일

undefined와 null의 차이는 알고 있었지만, 항상 다른 분들이 정리한 글을 통해서만 이해했습니다. 이번 기회에 공식 문서를 직접 찾아보고 나만의 언어로 정리해두고 싶어 이 글을 작성합니다.

undefined 정의

4.4.13 undefined value

primitive value used when a variable has not been assigned a value

변수에 값이 할당되지 않았을 때, 사용되는 primitive 값

예시

// 변수에 값을 할당하지 않을 경우
let number;
console.log(number); // undefined

// =====

// API 응답에서 선택적 필드
const userProfile = {
  name: "김철수",
  email: "kim@example.com",
  // phone 필드 없음 (선택 사항)
};

console.log(userProfile.phone); // undefined
const displayPhone = userProfile.phone ?? "전화번호 미등록";

null 정의

4.4.15 null value

primitive value that represents the intentional absence of any object value

어떤 값의 의도적인 부재를 나타내는 primitive 값

명세서에는 'object value'라고 표현되어 있지만, 실제로는 모든 타입의 값에 사용 가능합니다.

예시

// React에서 로그인 전 사용자 상태
// null로 사용자 상태 초기화
const [currentUser, setCurrentUser] = useState(null);

useEffect(() => {
  if (currentUser === null) {
    router.push("/login"); // 로그인 페이지로 이동
  }
}, [currentUser]);

undefined와 null의 차이

둘 다 값이 없음을 나타내지만, 할당 주체가 다릅니다.

undefined: 변수를 선언만 하고 값을 할당하지 않았을 때, JavaScript가 자동으로 넣어주는 값
null: 개발자가 "이 변수는 의도적으로 비어있다"고 명시하고 싶을 때 직접 할당하는 값

즉, undefined는 자동, null은 의도적입니다.

예시

async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      return null; // 의도적으로 "사용자 없음"을 표현
    }
    return await response.json();
  } catch (error) {
    return null;
  }
}

const user = await fetchUser(123);

// null 체크: 명시적으로 "사용자를 찾지 못함"
if (user === null) {
  showErrorMessage("사용자를 불러올 수 없습니다");
}

// undefined 체크: user 객체에 nickname 필드가 없음
if (user?.nickname === undefined) {
  showErrorMessage("닉네임이 설정되지 않았습니다");
}