Null 과 Undefined 와 NaN

이번 글에서는 Null과 Undefined와 NaN에 대해서 공부해 보았다.

자바스크립트가 인기를 받고 많은 발전을 하고 있지만 다른 언어에 비해 빨리 만들어진 탓에

위험한 요소가 많다고 들었다. 그렇기 때문에 이번 예제가 잘 알고 잘 사용해야 하는 부분 중 하나라고 생각한다.

undefined와 null은 자바스크립트의 타입들 중 하나씩 자리 잡고 있다.

 

   Undefined와 Null 의 공통점은 

• 둘 다 각각의 타입명(undefined, null)의 값이 유일하다.
• undefined 타입의 값은 undefined가 유일한다.
• null 타입의 값은 null이 유일하다.

  Undefined란?

• undefined는 원시 자료형 undefined로 분류된다.
• undefined는 ‘아무 값도 할당받지 않은 상태’를 의미한다.
• var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다.
• 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태(*대부분 비어 있지 않고 쓰레기 값이 들어 있다.)로 내버려 두지 않고 자바스크립트 엔진이 undefined로 초기화한다.
• 따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다.
• 변수를 참조했을 때 undefined가 반환된다면 선언 이후 값이 할당되지 않은 즉, 초기화되지 않은 변수라는 것을 알 수 있다.

• undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값이다.

   null은?

• null은 원시 자료형 null로 분류된다.
• 자바스크립트는 대소문자를 구분하므로 null은 Null, NULL 등과는 다르다.
• null은 ‘비어있는, 존재하지 않는 값'(값의 부재)을 의미한다.
• 프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재)할 때 사용한다.
• 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이다.

null은 특별한 점이 있는데 (특별한 점이라기보단 위험한)

typeof 연산자는 피연산자의 타입을 문자열로 반환한다. 7가지 문자열 "string",  "number",

"boolean",  "undefined", "symbol", "object", "function" 중 하나를 반환한다.

"null"을 반환하는 경우는 없으며, 함수의 경우 function을 반환한다.

사진과 같이 null의 typeof를 연산 시 object 객체 타입을 반환해 주는 것을 볼 수 있다.

이 부분은 자바스크립트의 버그라고 한다! 기존의 코드에 영향을 줄 수 있기 때문에 아직까지 수정되지 못하고 있다고 한다.

따라서 값이 null 타입인지 확인할 때는 typeof 연산자를 사용하지 말고 일치 연산자(===)를 사용해야 한다.

 

NaN이란?

NaN은 자바스크립트에서 Not a Number 의 줄임말로 잘못된 수학 계산, 또는 잘못된 숫자를 의미한다.

문자열을 숫자로 연산했거나 숫자를 문자열로 연산했거나 등 연산할 수 없는 것에 연산을 시도했을 시에 

나타나는 형태라고 볼 수 있다.

NaN

 

먼저 NaN에 대해 자세히 알아보기 전에 자바스크립트에서의 명시적 타입 변환 과 암묵적 타입 변환에 대해 알아봐야 한다.

개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 한다.

명시적 타입 변환

개발자의 의도와 상과 없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다.

이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다.

암묵적 타입 변환

자바스크립트에서는 이와 같이 연산 시에 문자열을 숫자로 숫자를 문자열로 변환을 자바스크립트가 할 수도,

개발자에 의도에 의해 할 수도 있는 것이다.

숫자타입으로 변환시 NaN

사진에서 사용한 연산자는 모두 산술 연산자다. 산술 연산자의 역할은 숫자 값을 만드는 것이다.

따라서 산술  연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 한다.

자바스크립트 엔진은 산술 연산자 표현식을 평가하기 위해 산술 연산자의 피연산자 중에서 숫자 타입이 

아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다. 이때 피연산자를 숫자 타입으로 변환할 수 없는 경우는

산술 연산을 수행할 수 없으므로 표현식의 평가 결과는 NaN이 된다.

 

또한 NaN은 자기 자신을 비교할 때 특별한 점이 있다.

typeof NaN

사진에서 NaN에 typeof 연산을 통해 NaN의 타입을 확인하면 number가 나오는 것을 확인 가능하다.

그렇다면 NaN과 NaN을 비교하면 어떻게 될까? 당연히 number로서 타입이 서로 같다는 것이 나오는 것을 예상했다.

 

NaN은 자신과 일치하지 않은 유일한 값이다.

따라서 숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN()을 사용해야 한다.

Number.isNaN()사용

사진과 같이 isNaN()을 사용하여 NaN을 비교하는 것이 가능하다.

 

이번 예제에서  자바스크립트의 위험성에 대해 좀 배워 보았다. 

자바스크립트가 널리 사용되는데 그 안에는 나름의 버그가 존재한다는 사실에

조금 놀랐다. 또한 그만큼 좀 재미도 있었다.

세상엔 완벽한 코드가 없다고 했다. 그 예시가 자바스크립트인 것 같다.

 

참고 사항

출처:https://hanamon.kr/javascript-undefined-null-%ec%b0%a8%ec%9d%b4%ec%a0%90/?unapproved=479&moderation-hash=f360eff9fcc7faa80029ce08fa1f0e6e#comment-479

책: 모던 자바스크립트 Deep Dive