Javascript undefined/undeclared/null and NaN 🧟

헷갈릴수 있는 undefined/undeclared/null 과 NaN에 대하여 정리하려고 합니다.

 

undefined (아무런 값도 할당되지 않았다)

변수가 선언이 된 이후에 undefined로 초기화된 상황입니다.

스코프에 변수가 선언이 되었으나 아직 아무런 값도 할당되지 않았다는 것을 의미합니다.

변수는 선언 -> 초기화 -> 할당의 순서를 가지게 됩니다.

var의 경우 호이스팅이 일어나게 될때 선언이 끌어올려지고 undefined로 초기화가 이루어 집니다.

var test;

console.log(test) // undefined
console.log(typeof test) // undefined

 

---

undeclared (선언조차 되지 않았다)

console.log(name) // Uncaught ReferenceError: name is not defined
                  // at <anonymous>:1:13
    
    
 console.log(typeof name) // undefined
 console.log(typeof undeclared) // undefined

사용하려는 변수가 선언조차 되지 않은 경우에는 undeclared 값을 가지게 되고 참조시에 에러가 발생하게 됩니다.

undeclared의 type은 undefined인 것을 확인할 수 있습니다.

 

---

null (빈 값을 할당)

var test = null
console.log(test) // null
console.log(typeof null) // object

null 값은 사용자가 null 값을 변수에 할당한 경우입니다.

null의 type은 object 입니다. null이 아니여서 이것에 주의하여야 합니다.

 

undefined는 초기화만 된것, null은 빈값을 할당한 경우 입니다.

 

---

NaN

 

컴퓨터에서 숫자로 나타낼 수 없을때 나타나는 표시 입니다.

0/0 // NaN

위의 예시가 대표적인 예시입니다.

 

그러면 이러한 NaN을 어떻게 미리 검출하고 early return 시켜주어야 할까요?

const result = 0/0

console.log(isNaN(result)) // true
console.log(Number.isNaN(result)) // true

 

근데 이때 주의할 것이 있습니다. 

window 객체에 존재하는 isNaN을 사용할 경우 형변환 까지 친절하게 해주어 예상하지 않은 동작이 이루어질 수 있습니다.

그러나 Number.isNaN을 쓰게 되면 숫자형 타입일때만 검사를 할 수 있습니다.

const test = "test"

console.log(typeof test) // string
console.log(isNaN(test)) // true
console.log(Number.isNaN(test)) // false

---

 

출처 : https://sudo-heedongdev.tistory.com/6

[자바스크립트] undefined vs undeclared vs null의 차이점