[클린코드JS] 타입 다루기

해당 글은 유데미 클린코드 자바스크립트 강의를 정리한 내용입니다.

⬛ 타입 검사

typeof

• typeof는 문자열을 반환한다.

typeof '문자열'         // 'string'
typeof true           // 'boolean'
typeof undefined      // 'undefined'
typeof 123            // 'number'
typeof Symbol()       // 'symbol'

🙅‍♀️ 하지만 typeof 만으로 모든 타입을 검사하는 것은 불가능, Reference Type 불가능

자바스크립트에는 primitive와 reference 타입으로 나눌 수 있는데, 위의 typeof로 타입을 알아낼 수 있는 것들은 대부분 primitive에 속하고 Reference타입에 Array, function, date와 같은 객체들은 모두 object를 반환하기 떄문이다.

typeof _function()    // 'function' 
typeof _Myclass{}     // 'function' 문제

const str =new String('문자열')  
typeof str           // 'object'
typeof null          // 'object' -> 오류 

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

instanceof 연산자

• 객체의 프로토타입체인을 검사하는 연산자이다.

function Person(name, age) {
    this.name = name;
    this.age  = age;
}
const s = {
    name : 'soon',
    age  :  99
}

const soon = new Person ('soon', 99);

soon instanceof Person // true
s    instanceof Person // false

• 내장객체 검사하기

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

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

• 하지만 이도 reference타입이기 때문에 최상단은 Object이다. (프로토타입 체인)

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

Object.prototype.toString.call()

• 래퍼객체도 감지가 가능하다.

Object.prototype.toString.call()                   //'[object undefined]'
Object.prototype.toString.call(new String(''))     //'[object string]'
Object.prototype.toString.call(arr)                //'[object Array]'
Object.prototype.toString.call(func)               //'[object Function]'

 자바스크립트라는 언어는 동적인 타입을 갖는다. 따라서 타입검사가 어렵고 잘 찾아서 검사를 해야한다. (상황에 맞게 검색하기!) typeof로 모든 타입을 검사할 수 없다!

---

⬛ Undefined & null

• 왼쪽이 undefined, 오른쪽이 null

null

!null                //true
!!null               //false

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

// null은 수학적으로는 0을 의미한다
null + 13            //13

Undefined

• 선언은 했지만 할당은 되지 않은 상태

let varb ;              //'undefined'

undefined + 10          // NaN
!undefined              // true

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

💡 undefined는 값이 없거나 정의가 되지 않은 상태이다. null 값이 없는 것을 명시적으로 표현한 것이다. null 은 타입으로 봤을 때는 Object고 undefined는 undefined이다.

---

⬛ ’==’ 줄이고 엄격한 동등연산자(’===’) 사용

동등연산자 ==을 줄이고 엄격한 동등연산자 ===를 사용하자! 이는 엄청난 차이를 가지고 온다. 동등연산자를 사용하면 타입캐스팅이 일어나기 때문에, 엄격한 동등연산자를 사용하자!

'1' == 1          //true
1 == true         //true

'1' === 1         //false
1   === true      //false

만약 역으로 이용해야하고 싶다면? 그럼에도 불구하고 쓰지말자! 형변환을 하자!

---

⬛  형변환을 주의하자!

아래의 테이블을 보면, 느슨한 형변환을 사용했을 때, 암묵적으로 형변환이 된다는 것을 파악할 수 있다.

엄격한 형변환을 사용한다면, 문제를 많이 줄일 수 있다.

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

parseInt('9.99999', 10)     //두 번째 파라미터에 진수를 꼭 써주기

• 명시적으로 형 변환하므로써 예측할 수 있는 코드를 작성하자!

String(11 + '문자열')         //'11문자열'
Boolean('문자열')            // true
Boolean('')                // false

---

⬛  isNaN(느슨한 검사 )말고 Number.isNaN으로!

컴퓨터는 기본적으로 이진수를 이해할 수 있다. 하지만 사람은 10진수에 익숙하다. 이에 대한 간극이 생기게 되고 자바스트립트는 이러한 간극을 좁히기 위해서 부동소수점을 사용하여 해결하고 있다.

Number.MAX_SAFE_INTEGER 
Number.isInteger         //값이 정수인지 판단

isNaN ⇒ is Not A Number

isNaN(123)  //false 숫자가 아니지 않다! => 숫자다!
isNaN(123 + '테스트')     // true  

Number.isNaN(123 + '테스트')     // false