[クリーンアップコードJavaScript]処理タイプ

3345 ワード
テキストリンク

Javascriptタイプチェック方法


:JSはダイナミックタイプの言語なので、タイプチェックが難しいです.いくつかの検査タイプの方法を紹介します.
typeof Something : returns string(string, boolean, number, object, function, undefined, symbol)

1.typeof演算子


PRIMITIVE vs REFERENCE


type ofを使用してPRIMITIVE valueをチェックすると元のタイプに戻りますが、REFERENCE valueの場合は別のタイプに戻ります.
  • typeof aFunction : returns 'function' 👍
  • typeof class : returns 'function' 👍
  • typeof new String : returns 'object' 😰
  • typeofnull:objectを返す(JSでの言語エラー)😱

    • JSはダイナミックタイプ言語


    ダイナミックタイプをチェックするのは難しいです.

    2. instanceof


    オブジェクトの属性タイプをチェックする演算子
    function Person(name, age) {
	this.name = name;
    this.age = age;
}
    
const coco = new Person('CoCo', 99)
coco instanceof Person  // returns true 👍

const lili = {
	name : 'coco',
    age : 99
}

lili instanceof Person // returns false 👍

    instanceofを使用する場合の注意

    const arr = []
const func = function() {
	do something..	
}
const date = new Date()
    arr instanceof Array  // returns true 👍
func instanceof Function  // returns true  👍
date instanceof Date  // returns true  👍

arr instanceof Object  // returns true 😰
func instanceof Object  // returns true  😰
date instanceof Object  // returns true  😰
// ---> Array, Function, Date 타입 모두 최상위는 Object이기 때문

    3. Object.prototype.toString.call('')


    :referenceオブジェクトの最上位レベルは、オブジェクトチェックタイプを逆方向に使用するための有用な方法です.
    Object.prototype.toString.call(new String(''))  // returns '[object String]' 👍
Object.prototype.toString.call(arr)  // returns '[object Array]' 👍
Object.prototype.toString.call(func)  // returns '[object Function]' 👍
Object.prototype.toString.call(date)  // returns '[object Date]' 👍

    undefined & null


    混乱...

    !null (flip value) // returns true
!!null (boolean으로 형변환) // returns false

null === false // returns false

!null === true // returns true

null + 123 // returns 123 (수학적으로 null = 0)

    不確定-混乱..。

    // 선언했지만 값은 정의되지 않고 할당되지 않은 상태
let varb;

varb // returns 'undefined'

undefined + 10 // returns NaN

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

    整理すると、


    未定義、null:値がないか、値が定義されていません.
    数字は.
  • 未定義:数学的にはNan
  • null:数学的には024579182
    タイプは、
  • 未定義:未定義タイプ
  • null:オブジェクトタイプ

    • 減少eqq


    :等しい演算子(==)

    等しい演算子(==)


    :成形移行が発生し、危険です.
    '1' == 1 // returns true
1 == true // returns true
    ex.id ticketNumとしての入力ウィンドウに0を入力した場合.
    const ticketNum = $('#ticketNum')
ticketNum.value // returns '0'
ticketNum.value === 0 // returns false (type이 서로 다르기 때문에 false 🥲)

// 때문에 아래처럼 일부러 느슨한 검사를 역이용하기도 하는데, 협업할 때 팀원들이 헷갈릴 수 있습니다.
ticketNum.value == 0 // returns true 
    // 안전하게 재작성하려면,
// 강제로 type을 비교하고자 하는 값과 일치시킨 후
// strict equality 체크를 해줍니다. 👍

Number(ticketNum.value) === 0
    キャッシュされたCache Assideモード
    TIL 12 JavaScript「関数」