[JS] undefined와 null의 차이점

JavaScript를 배우면서 가장 헷갈리는 개념 중 하나가 바로 undefined와 null입니다.

둘 다 "없음"을 나타내지만, 사실 명확한 차이점이 있습니다.

📝 undefined란?

undefined는 변수가 선언되었지만 아직 값이 할당되지 않은 상태를 의미합니다.

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

let person = {
  age: 25
};
console.log(person.name); // undefined (존재하지 않는 속성)

function greet() {
  // return 문이 없음
}
console.log(greet()); // undefined

 

undefined가 발생하는 경우들

1. 변수 선언 후 값 할당 전
2. 객체의 존재하지 않는 속성에 접근
3. 함수에서 return 값이 없을 때
4. 배열의 빈 요소
5. 함수 매개변수에 인수를 전달하지 않았을 때

📝 null이란?

null은 개발자가 의도적으로 "값이 없음"을 나타내기 위해 할당하는 값입니다.

let data = null; // 의도적으로 빈 값을 할당
console.log(data); // null

// API 응답에서 데이터가 없을 때
let userProfile = {
  name: "김철수",
  avatar: null // 프로필 이미지가 없음을 명시적으로 표현
};

📝 주요 차이점 비교

구분	undefined	null
의미	값이 할당되지 않은 상태	의도적으로 빈 값을 할당
타입	undefined	object
발생 시점	JavaScript 엔진이 자동으로 할당	개발자가 명시적으로 할당
용도	초기화되지 않은 변수	빈 값을 의도적으로 표현

📝 타입 확인하기

console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (JavaScript의 버그)

// 정확한 null 확인 방법
console.log(null === null);           // true
console.log(Object.prototype.toString.call(null)); // "[object Null]"

주의: typeof null이 "object"를 반환하는 것은 JavaScript의 오래된 버그입니다!

📝 동등성 비교

// 느슨한 비교 (==)
console.log(undefined == null);   // true
console.log(undefined == false);  // false
console.log(null == false);       // false

// 엄격한 비교 (===)
console.log(undefined === null);  // false
console.log(undefined === undefined); // true
console.log(null === null);       // true

---

📝 실제 사용 예시

undefined 사용 사례

function getUserData(userId) {
  if (!userId) {
    return undefined; // 잘못된 입력
  }
  // 사용자 데이터 조회 로직
}

// 객체 속성 확인
if (user.email === undefined) {
  console.log("이메일 정보가 없습니다.");
}

null 사용 사례

let currentUser = null; // 현재 로그인한 사용자가 없음

// 초기화
let apiResponse = {
  data: null,
  error: null,
  loading: true
};

// 값 재설정
function logout() {
  currentUser = null; // 명시적으로 빈 값 할당
}

📝 Best Practices

1. 명확한 의도 표현

// 👍 Good
let userAvatar = null; // 아바타가 없음을 명시적으로 표현

// 👎 Bad
let userAvatar = undefined; // 초기화되지 않은 것처럼 보임

2. 안전한 체크 방법

// null과 undefined 모두 체크
if (value == null) {
  // value가 null 또는 undefined
}

// 더 명확한 체크
if (value === null || value === undefined) {
  // 명시적으로 둘 다 체크
}

// 최신 방법 (ES2020)
if (value ?? false) {
  // nullish coalescing operator 사용
}

3. 함수 매개변수 기본값

// 👍 Good
function greet(name = "익명") {
  console.log(`안녕하세요, ${name}님!`);
}

// 👎 Bad
function greet(name) {
  if (name === undefined) {
    name = "익명";
  }
  console.log(`안녕하세요, ${name}님!`);
}

---

📚 정리

• undefined: JavaScript가 자동으로 할당하는 "값이 없음"
• null: 개발자가 의도적으로 할당하는 "빈 값"
• 사용 구분: undefined는 초기화되지 않은 상태, null은 의도적인 빈 값 표현
• 타입 확인: typeof undefined는 "undefined", typeof null은 "object"
• 동등성: undefined == null은 true, undefined === null은 false