JavaScript 입문 : undefined, null, 비교 연산표

본 글은 제로초 TV, 모던 자바스크립트, JavaScript MDN을 기본으로 하고 있습니다.

지금까지 코딩을 들어가지는 않고 자료형에 대해 공부를 해 보았습니다. 문자열 (string), 숫자형 (number), 불린 값 (boolean)을 연습해 보았는데 빈 값(empty value)을 나타내는 undefined 와 null 에 대해 공부하는 시간을 갖도록 해 보겠습니다. 

 

 

1. undefined 

 

자바스크립트에서는 반환할 값이 없을 때 undefined 라는 값이 나옵니다. 정의가 안되었다라는 뜻이겠죠. 처음 이 카테고리를 공부하면서 무작정 따라했던 console.log에서 다음과 같이 한번 본 적이 있습니다. 

 

여기서도 반환값이 undefined 밖에 없다는 이야기입니다. 그리고 이제부터는 쎄미콜론을 붙히는 습관을 들이도록 하겠습니다. 

 

① undefined 자료형

 

undefined는 undefined 자료형입니다.  이제 4번째 자료형을 알게 되었네요.

 

 

② undefined 의 불린 값

 

undefined 는 기본적으로 false값을 가지고 있습니다. 지난 시간 3가지 ' ', 0, NaN에 한가지 더 undefined 도 false입니다.  그런데 좀 더 세분할 필요성이 있어 졌습니다. 중요한 사항이니 반드시 이 부분은 외우는게 좋을 듯 합니다. 

 

약간 성질이 다르다고 이해를 하면 될 것 같습니다. 

 

보통 지금까지는 다음과 같이 이헤를 하고 왔습니다. 

 

 

그래서 편의상 0이나 ''나 NaN이나 undefined 는 기본적으로 false고 그 외에는 전부 true다라고 이해 했습니다. 틀린말은 아닌데 좀 더 성질을 따져서 구분을 할 필요성이 느껴졌습니다. 즉, 0과 ''는 같은 성질을 가지고 있다고 구분하면 될 듯 합니다. 다음을 보면서 이해를 하도록 하죠.

 

위 그림에서 !!을 붙히니 전부 false로 같은 값을 가지는데 !!을 없애고 본 불린 값은 0하고 ''만 같은 성질을 가지네요.

 

 

즉, NaN 과 undefined 는 어떠한 경우에도 false가 나옵니다. 이 값을 true로 만들기 위해서는 같지않다의 뜻을 가진 !=를 사용해야 합니다. 

 

 

따라서 다음과 같은 경우는 전부 false라고 이해하면 됩니다. 

 

 

2. null

 

빈 값의 두번째인 null에 대해 알아 보겠습니다. !!를 두개 붙히면 false가 되는 또 다른 자료형입니다. 

 

 

null의 자료형을 보니 'object'형으로 나오네요. !!null 은 false로 나오네요. 이제 총 5개를 외울 수 있습니다. 0, '', NaN, undefined, null 입니다. 그 중에 0과 ''만 같은 성질을 가지고 있다라고 이해하면 됩니다. 

 

 

참고로 null과 undefined 는 같은 빈 값을 나타냅니다. 하지만 자료형 자체가 다르기 때문에 다음과 같은 결과값을 가집니다. 

 

 

☞ typeof null 

 

위에서 언급했듯이 typeof null은 'object'로 나옵니다. 원래는 null의 지료형은 null이어야 하는데 object로 나오는 것은 자바스크립트의 아주 유명한 버그(Bug)라고 합니다. 이미 수십년간 잘 못 사용되어 왔지만 고치기에는 이미 늦어버린 셈이죠.

 

☞ == 이 사용되는 연관성

 

아무리 규칙을 찾아보고 외워보고 해도 헷갈릴 수 밖에 없네요. 비교연산 논리연산 비교표를 가지고 해당 사항이 있을때마다 참고하는게 낳을 듯 합니다. 외울 수 없어요. 다음표는 ==의 경우와 ===의 경우가 정리된 표입니다. 이제 자바스크립트에서는 ===을 사용하는게 훨씬 편하다고 합니다. 

 

출처: http://dorey.github.io/JavaScript-Equality-Table/

 

 

출처: http://dorey.github.io/JavaScript-Equality-Table/