1.Type을 다루기

■ 순서

1.typeof

2.undefined & null

3.eqeq(==)줄이기

4.형 변환 주의하기

5.isNaN

 

---

 

1.typeof

typeof를 사용하면 해당되는 타입을 문자열로 표현해준다.

//PRIMITIVE
typeof '문자열' // >> 'String'
typeof true   // >> 'boolean'
typeof undefined // >> 'undefined'
typeof 123 // >> 'number'
typeof Symbol() // >> 'symbol'

 

typeof로 감별하기 힘든 대상들

: PRIMITIVE는 감별하기 쉽지만 REFERENCE 대상들은 typeof로 판단이 힘들다.

" 자바스크립트는 동적으로 변하는 언어이기 때문에 타입 또한 동적이다.

//REFERENCE(object(Array, function, date))


function myFunction() {}

typeof myFunction // 'function'


class MyClass {} 

typeof MyClass // 'function'


const str = new String('문자열')
typeof str // 'object'



typeof null // 'object' 언어적인 오류이다. 수정할수가 없다고 판단하고 인정하였다.

 

그래서 typeof 대신에 instanceof 연산자를 사용하는게 좋다.

객체의 프로토타입을 이것으로 검사를 한다.

function Person(name, age) {
  this.name = name;
  this.name = age;
}

const p = {
  name : 'test',
  age : 99
}

const poco = new Person('poco', 99)

poco instanceof Person //true  Person을 통해서 poco가 맞는지 확인함

p instanceof Person //false Person을 통해 p가 만들어지지 않음

 

아래와 같이 구현이 가능하지만, Object가 최상이이기때문에 Object 또한 true가 나와 버린다.

const arr = []
const func = function() {}
const date = new Date()

arr instanceof Array //true
func instanceof Function //true
date instanceof Date //true

arr instanceof Object //true
func instanceof Object //true
date instanceof Object //true

 

그래서 아래와 같이 검사를 할수도 있다.

Object.prototype.toString.call(date)  // '[object Date]'

 

요약

: 자바스크립트는 동적인 타입을 주는 언어라서 타입검사가 어려움 >> 상황에 맞게 잘 찾아야 한다.

: 일일히 외우는 것보다 하나씩 잘 찾아서 적용하는 것이 더 효과적이다.

: privitive 와 refrence의 차이를 잘 생각을 해보고 typeof는 오류가 많고 instanceof가 더 효과적이다. 

 

 

---

2.undefined & null 

 

undefined & null 는 둘다 없다는 뜻이다.

헷갈릴수가 있는 대상이다.

 

■ null

: 없다는 것을 명시적으로 표현

!null  // true
!!null // false

//수학적으로는 0이다.
null + 123 // 123

 

■ undefined

: 아무것도 지정하지 않았을때 무언가의 기본값

//선언했지만 값은 정의되지 않고 할당 X
let varb;
varb 
typeof varb // 'undefined'
undefined + 10 // NaN
!undefined  // true 이건 또 true로 된다.

undefined == null // true   //이상하게 true
undefined === null // false //이상하게 false
!undefined === !null //true //이건 또 true

 

정리

: undefined와 null은 값이 없거나 정의되지 않은 것이다.

: null은 값이 없다는 것을 명시적으로 표현 한 것이다.

: null은 숫자로는 0, undefined는 NaN이다.

: type은 null은 object, undefined는 undefined이다.

: 결론적으로 둘의 쓰임은 헷갈린 점이 많기 때문에 항상 조심해야 한다.

 

 

---

3.eqeq(==)줄이기

 

eqeq는 자바스크립트에서 동등연산자를 eq라고 말한다.

 

(==)를 동등연산자라고 생각한다.

 

MDN 문서는 (===) Strict equality라고 표현을 하고 있다.

두개는 그냥 동등연산자, 세개는 엄격한 동등연산자이다.

 

동등연산자를 활용하면 type casting이 일어난다.

// 두개를 쓰면 typecast가 발생한다.
'1' == 1 //true
1 == true //true

//그래서 ===를 활용해서 엄격한 동등연산자를 쓴다.

//ticketNum.value가  만약 '0'일때
ticketNum.value === 0 // false
ticketNum.value == 0 // true 이렇게 사용은 가능하지만 위험하다.

//어떻게든 형 변환을 해서 활용하는 것이 좋다.
Number(ticketNum.value) === 0
ticketNum.valueAsNumber === 0

 

혼자 개발하는 것이 아니라면, eqeqeq는 준수하는 것이 좋다~!

 

 

---

4.형변환(type cast) 조심하기

 

암묵적인 형 변환이 발생한다.

'1' == 1 // true, 형변환 발생
1 == true // true
0 == false // true

 

암묵적인 변환과 명시적인 변환

//암묵적인 변환
11 + '문자와 결합' // '11 문자와 결합'

!!'문자열' // true
!!'' //false

//명시적인 변환
parseInt('9.9999', 10); //9  참고로 두번째는 진수 지정한다, 두번째 지정을 안하면 10진수가 지정되지 않음

String(11 + '문자와 결합')

Boolean('문자열') // true
Boolean('') // false
Number('11') 11

 

결론

: 사용자가 변환을 하면 명시적인 변환(타입)

: JS가 판단을 하면 암묵적인 변환(타입)이 일어난다.

: 사람이 보고 명시적으로 변환할 수 있는 방법을 선택하는 것이 중요하다.

 

 

---

5.isNaN

 

자바스크립트에서 숫자가 판별하기 어렵기 때문에

isNaN(is Not A Number) ==> 숫자가 아니다라는 소리다.

 

typeof 123 //'Number'

isNaN(123) //false >> 숫자다(숫자가 아닌지에 검사하는 것에 false가 나왔다.)

isNaN(123 + '테스트') //true 숫자가 아니다.
Number.isNaN(123 + '테스트') //false

//isNaN은 느슨한 검사를 한다.
//Number.isNaN 을 하면 더 엄격한 검사를 한다.