클린코드 자바스크립트: 타입 다루기

타입 검사

 

typeof

// primitive를 typeof로 검사하는 예시

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

 

• typeof로 검사하면 문자열로 반환됨

 

// reference value의 typeof 예시

function myFunction() {
	console.log('function');
};

const str = new String('문자열');


typeof myFunction // 'function'
typeof str // 'object'
typeof null // 'object'

 

• 단점: reference value의 경우 구분하기 어려움
• function은 확인되는데 class는 object로 구분함
• typeof null 은 object 나옴 -> 자바스크립트의 언어적 오류
• 자바스크립트는 동적인 언어라 타입도 동적, typeof로 구분하기 어려움

 

 

instanceof

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

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

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

poco instanceof Person // true
p instanceof Person // false

 

• instanceof로 reference value 검사 가능

 

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를 만나서 정확한 검사는 어려움

 

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

Object.prototype.toString.call(arr) // '[object Array]'
Object.prototype.toString.call(date) // '[object Date]'
Object.prototype.toString.call(func) // '[object Function]'

 

• 이를 역이용 하는 방법임

 

---

 

하나의 방법만 단순하게 외우고 있지 말고
적절한 타입 검사 방법을 찾아서 그때그때 적용할 것

 

 

 

 

 

 

 

 

 

 

 

undefined & null

null

// null의 혼란함

!null // true
!!null // false

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

// null => math => 0
null + 123 // 123

 

• !null은 값을 뒤집음 -> true
• !!null을 bollean으로 바꿈 -> false
• null은 수학 연산에서 0으로 취급됨
• null은 비어있는 값을 명시적으로 지정하는 방법이지만 매우 혼란하다고 볼 수 있음

 

 

 

undefined

 

• 아무것도 지정하지 않았을 때의 기본 값

 

// 선언했지만 값이 할당되지 않은 상태

let varb;
let a = null;

typeof varb; // undefined
typeof a; // object

undefined+ 10 // NaN

 

• undefined의 수학 연산은 NaN으로 처리됨
• undefined는 undefined 타입. null은 object 타입

 

!undefined // true

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

 

• 혼란 그 자체. 예측 불가

 

 

undefined와 null을 많이 사용하기 보다는
팀 차원에서 또는 스스로 convention 정립 후 사용하기

 

 

 

 

 

eqeq 줄이기

 

 

eqeq는 동등 연산자

 

동등 연산자(==) - JavaScript | MDN

 

 

 

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


tickeNum.value == 0; // true (위험한 방법)
Number(ticketNum.value) === 0; // true (형변환 후 사용하는 안전한 방법)
ticketNum.valueAsNumber === 0; // true

 

• 동등 연산자(==) 아닌 일치 연산자(===) 사용해야 정확한 피연산자 비교 가능함
• == 를 사용한다면 형변환을 한 후에 사용하기
• ESLint 사용해서 편하게 사용하는 방법도 있음

 

 

 

 

 

 

 

 

형변환 주의하기

 

 

JS Comparison Table

 

 

 

1 == '1' // true

11 + '문자와 결합' // '11 문자와 결합'
!!'문자열' // true
!!''	// false


// 10진수로 변경
// 꼭 써주는 것이 좋음 -> parseInt 로 변환했을 때 대부분 10진수로 기대하는데 값을 지정하지 않으면 
// 10진수가 기본값은 아님
parseInt('9.9999',10); // 9

 

• 느슨한 검사라고 생각할 수 있지만 사실 암묵적인 형변환이 일어나고 있는 상황임

 

 

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

 

 

• 명시적인 형변환 해주자

 

 

 

 

 

 

isNaN

 

• 사람이 생각하는 숫자는 10진수인데 컴퓨터는 2진수만 읽을 수 있어서 간극이 있음
• 특히 10진수와 2진수를 다루면서 소수점에 어려움이 있음
• 부동 소수점은 떠돌이 소수점

 

 

typeof123 !== 'number' // true
isNaN(11) // false 숫자가 숫자가 아니다 => 숫자라는 말 => 매우 헷갈림
isNaN(23 + '텍스트') // true

 

 

• is Not a Number => 숫자가 아니다
• isNaN은 값이 뒤집어져 귀결됨

 

 

// ES2015+

isNaN // 느슨한 검사
Numer.isNaN // 엄격한 검사(ES2015+)

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

 

• ES2015부터 엄격한 검사로 안전하게 검사 가능

 

 

 

 

 

참고: 유데미 클린코드 자바스크립트 강의