[JavaScript] null과 undefined, NaN의 차이점

자바스크립트를 처음 마주했을 때 가장 헷갈렸던 3가지에 대해 정리하고자 한다.

자바스크립트에는 다음과 같은 3가지가 존재한다.

바로 null,undefined,NaN이다.

 

---

 

가장 먼저 헷갈렸던 부분은 바로 null 과 undefined의 차이였다.

둘 모두 javascript의 타입이며 원시 값이라고 할 수 있다.

🌟자바스크립트의 원시 값은 변경할 수 없는 값을 의미한다.

 

그렇다면 둘은 동일한 것일까?

정답만 놓고 보자면 둘은 엄연히 다른 것이라고 볼 수 있다.

우리가 한 변수를 선언할 때는 다음과 같은 형태를 사용하고는 한다.

 

let value = [실제로 넣을 값];

이렇게 될 경우 변수를 선언함과 동시에 타입을 결정 지을 수 있다.

하드 코딩을 할 경우에는 변수에 string 값을 집어넣을 경우 value는 string type이 된다.

그렇다면 null과 undefined는 어디서 사용되는 걸까?

 

우리가 크롬 개발자 도구를 통하여(꼭 크롬이 아니어도 괜찮다.)

console에서 어떤 변수를 선언했다고 생각해보자.

상기와 같이 값을 특정하는 경우가 아닌, 이런 코드를 작성했다.

이 변수에 값을 할당하지 않고 선언만 한 경우 다음과 같은 값이 뜨는 것을 확인할 수 있다.

이를 통해 변수 setting에는 undefined이라는 타입이 할당됐다는 것을 알 수 있다.

undefined 는 MDN 문서에 따르면 다음과 같이 정의되어 있다.

**undefined**는 원시값으로, 선언한 후 값을 할당하지 않은 변수 혹은 값이 주어지지 않은 인수에 자동으로 할당됩니다.

즉 값이 할당되지 않은 초기의 경우 자동으로 할당되는 것이라고 볼 수 있다.

그렇다면 null 과의 차이점은 무엇일까?

 

null은 다음과 같이 사용할 수 있다.

 

상기 코드를 확인하면 setting이라는 변수에 Name이라는 string값을 할당했다.

그리고 해당 setting 변수를 비울 필요가 있을 때 null을 사용하게 된다.

 

이때, 이런 의문이 들 수 있을 것 같다.

변수를 비울 필요가 있다면 undefined를 사용할 수 있지 않은가?

 

통상적으로 개발자가 undefined로 값을 초기화 하는 것은 선호되지 않고 사용되지도 않는다.

의도적으로 개발자가 값을 정리하고 싶을 경우 null을 사용하게 된다.

또한 null과 undefined를 동일하게 생각하는 사람이 있을 수 있다.

(왜냐하면 null == undefined는 true이기 때문이다.)

 

그러나 놀랍게도 null과 undefined는 다른 type을 지니고 있다.

null의 typeof를 살펴보면 object라는 사실을 알 수 있다.

그리고 undefined는 말 그대로 undefined를 의미한다.

이렇듯 두 원시 값은 다른 의미를 가지고 있다는 사실을 알 수 있다.

 

그렇다면 마지막 NaN는 무엇일까?

NaN이 원시 값이냐고 묻는다면 그것은 아니다.

해당 NaN는 object의 속성 중 하나로 Not A Number을 의미한다.

개발자가 NaN을 마주하는 여러 코드가 존재하지만,

대표적인 것 중 하나는 바로 문자열을 포함한 덧셈이 아닌 계산식이라고 할 수 있다.

 

우리는 지금부터 계산기를 개발하고자 한다.

그런데 사용자로부터 값을 입력받는 <input> 태그가 존재하고

<button> 태그로 버튼을 만들어 javascript를 통한 연산을 진행한다.

이럴 때 input 태그에 입력 받는 값을 변수에 저장하여

그대로 기존 숫자(혹은 default가 0 이라고 가정한다.)에 곱하다.

결과 값은 과연 어떻게 될까?

 

javascript는 의외로 똑똑하기 때문에 “3” * 2 같은 문자열 * 숫자를 했을 경우 다음과 같은 결과값을 낸다.

그리고 마찬가지로 이는 기본적인 나누기 역시 숫자로 변환하여 계산해준다.

문제는 string 값에 숫자 형태가 아닌 값이 들어갈 경우 다음과 같은 문제가 나타난다.

말 그대로 숫자가 아니라는 뜻이다.

 

---

 

결론적으로 말하자면 다음과 같다고 볼 수 있다.

 

🔥 1. null과 undefined는 원시 값이며 타입이다.

🔥 2. undefined는 초기 값이 할당되지 않았을 경우 시스템에서 자동으로 할당하며,

null은 개발자가 의도적으로 값을 초기화하고 싶을 때 사용한다.

🔥 3. typeof() 를 사용시 null은 object로 표시되고 undefined는 undefined로 표시된다.

🔥 4. NaN은 원시 값이 아닌 전역 object의 속성 중 하나로 전역 스코프의 변수이다.

🔥 5. NaN을 마주하는 대표적인 사례 중 하나는 숫자와 문자열(”3”과 같은 숫자의 형태가 아닌 문자열) 을 곱하거나,

0을 0으로 나눌 때 이다.

 

 

 

💜

 

해당 게시글은 MDN 공식 문서를 참고하여 만들어졌습니다.

틀린 부분이 있다면 댓글 주시면 수정하겠습니다.

감사합니다 😊