JavaScript - 클린코드 자바스크립트, 타입 다루기

타입 다루기

타입 검사

• JavaScript Type

  • primitive Type
    • boolean
    • number
    • string
    • undefined
    • symbol
    • null
  • reference Type
    • array
    • object
    • function
    • map
    • set

• JavaScript는 동적으로 변하는 언어이기 때문에, 타입도 동적으로 변함

  • 동적으로 변하는 타입을 검사하기 어려움

typeof

• typeof 연산자
  • 피연산자의 타입을 검사해서 문자열로 반환함

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

• typeof 연산자만으로 모든 타입을 검사할 수 없음

• reference type은 typeof 연산자만으로 판단하기 어려움

function myFunction(){}
class MyClass {}
const str = new String('문자열'); // wrapper 객체로 갑싸져 있는 경우

typeof myFunction // 'function'
typeof MyClass // 'function'
typeof str // 'object'

• null의 경우
  • typeof 연산 결과 'obect'가 나오는데, 언어적 오류임

typeof null // 'object'

instanceof

• instanceof 연산자
  • 객체의 프로토타입 체인을 검사하여 피연산자가 프로토타입 체인 상에 있는지 확인함

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

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

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

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

• instanceof 연산자를 사용해서 타입을 검사할 수 있음

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

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

• 프로토타입 체인의 최상위에 Obect가 있으므로, instanceof Object를 하면 항상 true가 나옴

arr instanceof Obect // true
func instanceof Obect // true
date instanceof Obect // true

• Object.prototype.toString.call()을 사용하여 반환한 문자열을 통해 타입을 검사할 수 있음

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

undefined & null

null

• null

  • 의도적으로 비어있음을 나타내는 값
  • type : object

• null은 불리언 연산에서 falsy로 취급함

!null // true
!!null // false

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

• null은 수학적 연산에서는 0으로 취급함

null + 123 // 123

undefined

• undefined
  • 값이 정의되지 않음
  • 아무것도 할당되지 않은 기본값
  • type : undefined

let varb;

typeof varb // 'undefined'

• undefined는 불리언 연산에서 falsy로 취급함

!undefined // true
!!undefined // false

• undefined는 수학적 연산을 하면 NaN이 나옴

undefined + 10 // NaN

• undefined와 null을 equality 연산자로 비교하면 다음과 같음

// equality operator(동등 연산자)
undefined == null // true
// strict equality operator(엄격한 동등 연산자)
undefined === null // false
// undefined, null 모두 boolean으로 변환하면 falsy 값
!undefined === !null // true 

eqeq(equality operator, ==) 줄이기

• equality operator
  • 값이 같은지 비교할 때, 형변환(type casing)이 일어남

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

• strict equality operator

  • 값이 같은지 비교할 때, 형 변환이 일어나지 않음

• eqeq 줄이는 방법

  • 가능하면 strict equality operator를 사용하기
  • ESLint의 eqeqeq 룰을 적용해서 도움 받기

형변환 주의하기

• equality operator를 사용하면, 암묵적인 형변환이 일어남

// equality operator : 암묵적인 형변환 후 비교
'1' == 1 // true
1 == true // true
0 == false // true

// 암묵적인 형변환
11 + ' 문자와 결합' // '11 문자와 결합'
!!'문자열' // true
!!'' // false

• JavaScript가 암묵적으로 형변환하는 것보다 사용자가 명시적으로 형변환하는 것이 예측하기 쉬움

String(11 + ' 문자와 결합') // '11 문자와 결합'
Boolean('문자열') // true
Boolean('') // false
Number('11') // 11
parseInt('9,9999', 10); // 9

• 암묵적인 형변환보다 명시적인 형변환 사용하기

isNaN

• isNaN
  • 'is Not A Number'의 축약어
  • 숫자가 아닌 값을 판별하는 연산자

typeof 123 === 'number' // true
// isNaN(123)은 typeof 123 !== 'number'과 같음
isNaN(123) // false

• isNaN과 Number.isNaN
  • isNaN : 느슨한 검사
  • Number.isNaN : 엄격한 검사

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

• isNaN보다 Number.isNaN으로 검사하기