undefined & null

자바스크립트에서 ‘값이 없음’을 나타내는 두 가지 방식인 undefined와 null의 차이점을 자세히 알아보자.

1. 기본 개념 이해 📌

1.1 undefined란?

• 변수는 선언되었지만 아직 값이 할당되지 않은 상태
• 시스템이 자동으로 부여하는 값

1.2 null이란?

• 개발자가 의도적으로 ‘비어있음’을 명시한 상태
• 명시적으로 할당해야 하는 값

2. 타입과 동작 방식 비교 🔄

2.1 undefined의 특징

let varb;
typeof varb        // 'undefined'
undefined + 123    // NaN (숫자로 변환 불가)
!undefined        // true

2.2 null의 특징

let varb = null;
typeof null        // 'object' (JavaScript의 유명한 버그!)
null + 123         // 123 (null은 0으로 취급)
!null             // true
!!null            // false

3. 비교 연산에서의 동작 👀

// 동등 비교
null === false      // false
!null === true      // true
undefined == null   // true (느슨한 비교)
undefined === null  // false (엄격한 비교)
!undefined === !null // true
// !undefined === !null
// -> true === true

4. 주요 차이점 정리 💡

• 타입 관점
  • undefined: undefined 타입
  • null: object 타입 (언어적 오류)
• 숫자 변환시

  • undefined → NaN

  • null → 0

    Number(undefined)  // NaN
    Number(null)       // 0

• 발생 상황
  • undefined: 시스템이 자동 할당
  • null : 개발자가 명시적 할당

정리✨

• 코드의 일관성과 가독성을 위해 팀 내에서 하나의 방식만 사용하는 것을 추천
• undefined = 정의 되지 않은 것
• null = 없다는걸 명시적으로 표현
• 숫자 변환 : undefined = NaN, null = 0
• 타입 : undefined = undefined type , null = object type