[클린코드 자바스크립트] 타입 다루기 (undefined, null, eqeq, 형변환 주의, isNaN

 

* 클린코드 자바스크립트 강의를 정리하고자 작성한 게시글입니다.

undefined 와 null

• 값이 없거나 정의가 되지 않은 표현
• undefined 와 nulll 의 쓰임을 조심해서 사용해야 한다.
• undefined: 데이터 타입이자 값을 나타내며 값이 할당되지 않은 상태를 말한다. 변수는 선언했지만 값을 할당하지 않은 경우 undefined를 기본적으로 가지게된다.
• null: 값이 비어있음을 나타낸다.
• 두 값을 비교하려면 엄격한 일치연산자를 사용하도록 한다. (===)

 

undefined 와 null 을 이해할 수 있는 사진

 

!null // true 
!!null // false

null === false // false
!null === true // true

// null 은 숫자와 연산에서는 0으로 취급
null + 123 // 123

let testVar;
typeof testVar // 'undefined'

let testNull = null;
typeof testNull // 'object'

undefined + 10 // NaN 

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

 

eqeq 줄이기

• == 보다 === 를 사용한다.
• === 를 사용하여 타입까지 검사하여 추후 발생되는 버그를 줄일 수 있도록 한다.

# 타입 캐스팅이 이루어져 true를 반환한다. 
'1' == 1 // true 
1 == true // true 

<input type="number" id="money"> 

let money = $('#money');

money.value == 0  // 문제가 생길 수 있는 코드
Nunmber(money.value) === 0   // 안전하게 타입도 변경하여 비교하도록 한다.

 

형변환 주의

• 안전하게 형변환을 해서 사용하도록 한다.

String(10 + 'test');   // '10test'
Boolean('테스트');       // true
Boolean('');           // false
Number('123');         // 123
parseInt('9.999', 10); // 9

 

isNaN

• Number.isNaN()을 활용해서 엄격한 검사를 하도록 한다.

Number.isInteger(); // 정수형인지 검사 
isNaN(); // is Not A Number => 숫자가 아니다.
isNaN(123); // false => 숫자가 숫자가 아니다 => 숫자가 맞다.
isNan(123 + 'test') // true 
Number.isNaN(123 + 'test') // false