undefined와 null의 차이를 설명해 보세요.

👩🏻‍💻 undefined와 null의 차이를 설명해 보세요.

코딩을 하다보면 불분명한 값으로 추정되는 undefined와 null이 등장합니다. 그런데 이 둘의 의미는 각각 무엇이며, 각각 어떨 때 출력되는 것일까요? 차이점을 명확하게 설명해 주세요.

 

💁🏻‍♀️ 요약하자면 ,

undefined는 변수를 선언하고 값을 할당하지 않은 상태이며, null은 변수를 선언하고 빈 값을 할당한 상태 입니다.

 

JavaScript에서 undefined와 null 둘 모두 개별적으로 아무 것도 나타내지 않는다는 공통점이 있으나,  undefined는 암시적이고, null은 명시적이라는 것이 가장 큰 차이점입니다. undefined는 아무것도 모르는 경우를 암시적으로 나타내고, null은 "값 없음"을 명시적으로 딱 나타내는 값이라고 보면 됩니다.

 

undefined : "몰라~ 😗"

1. 원시값(Primitive Type)으로, 아무것도 모르는 경우를 암시적으로 나타냅니다.

// 정의되지 않고 초기화된 적도 없는 x
x; // ReferenceError: foo is not defined

2. 선언 후 값을 할당하지 않은 변수 혹은 값이 주어지지 않은 인수에 자동으로 할당됩니다. 

var x; // 변수 x에 값을 할당하지 않고 선언한다면
console.log ('value of x is', x) // value of x is undefined

var x = 1; // 만약 변수 x에 1을 할당하며 선언한다면
console.log ('value of x is', x); // value of x is 1

3. undefined의 타입은 "undefined"로 평가됩니다.

typeof undefined // 'undefined'

4. 함수가 값을 return하지 않았을 때도 undefined를 반환합니다.

 

null : "없어! ✋🏻"

1.원시값(Primitive Type)으로, 어떤 값이 비어있음을 명시적으로 표현합니다. 

// 존재하지만 값이나 자료형이 존재하지 않는 x
var x = null; 
x; // null

2. Boolean 연산에서는 false로 취급합니다. 

!null // true: false의 반대

3. null의 타입은 "객체"로 평가됩니다.

typeof null // 'object'

 

그 외 추가 설명

1. 숫자가 아닌 값을 찾는 함수인 isNaN()을 사용해보겠습니다. 참고로 이 함수는 숫자가 아니면(Not a Number) True를, 숫자이면 False를 반환합니다. isNaN('456') 과 같은 문자형 숫자도 숫자로 인식되어 false를 반환합니다. 어쨌든 숫자문맥에서는 null은 0으로 undefined는 NaN으로 반환된다고 합니다. 

isNaN (1) // false: 숫자다

isNaN(1 + null)      // false: 숫자다
isNaN(1 + undefined) // true: 숫자가 아니다

2. null과 undefined를 엄격한 비교연산자(일치연산자: ===)로 비교하면 false, 느슨한 비교연산자(동등연산자: ==)로 비교하면 true가 나옵니다.

null === undefined   // false
null == undefined   // true

null === null        // true
null == null         // true

 

 

📎 내용 참조

- MDN : undefined

- MDN : null

- Blog: undefined와 null의 차이점을 설명하세요