JavaScriptで、変数や値の型を確認することができるtypeof演算子について書いています。
typeof演算子を変数や値の前につけることで、文字列で型を返してくれます。
最初に、typeof演算子の使い方を書いています。
その後に、typeof演算子に色々な型を指定して、動作を検証してみました。
typeof演算子の使い方
typeof演算子は変数の先頭につけて、スペースを1行開けて使います。
そうすると、型情報の文字列が返ってきます。
例えば、下記のように使うことが可能です。
const number = 77
const typeNumber = typeof number
console.log(typeNumber) // number
const fruit = "apple"
const typeString = typeof fruit
console.log(typeString) // string
最初にnumber変数を定義して、数値「77」を格納しています。
typeof演算子をnumber変数に使用して、返り値をtypeNumber変数に受け取っています。
typeNumber変数をconsole.logで出力すると、「number」型の文字列が出力されました。
このように、typeof演算子は値の型を「文字列」で返してくれます。
その次の処理では、同様にして文字列の型を確認しています。
fruit変数に文字列の「apple」を入れています。
そして、typeof演算子を使って、fruit変数の型(文字列)をtypeString変数に代入しました。
console.logで出力すると、文字列なので「string」型の文字列が出力されました。
型判定して、処理を分岐したい
文字列で返ってくるので、型判定をして処理を分岐したい場合には、このように文字列で判定処理を書くと良いです。
const data = "apple"
switch(typeof data)
{
case "string":
console.log("型はstringです。");
break;
case "number":
console.log("型はnumberです。");
break;
case "object":
console.log("型はobjectです。");
break;
}
data変数に文字列の「apple」を代入しています。
switch文を使って、data変数の型を判定します。
switch文には、typeof演算子を使って、data変数の型の文字列を渡しています。
今回はdata変数には文字列が入っているので、「型はstringです。」が出力されて処理が終了します。
このように文字列で判定することが可能です。
typeof演算子の検証10パターン
色々な型のデータを渡して、返ってくる内容を検証してみました。
undefined
undefinedは、文字列の「undefined」が返ってきます。
console.log(typeof undefined) // undefined
null
nullは、文字列の「object」が返ってきます。
console.log(typeof null) // object
NaN
NaNは、文字列の「number」が返ってきます。
console.log(typeof NaN) // number
Infinity
Infinityは、文字列の「number」が返ってきます。
console.log(typeof Infinity) // number
数値
数値は、文字列の「number」が返ってきます。
console.log(typeof 77) // number
小数
少数も、文字列の「number」が返ってきます。
console.log(typeof 77.7) // number
文字列
文字列は、文字列の「string」が返ってきます。
console.log(typeof "javascript") // string
論理値
論理値は、文字列の「boolean」が返ってきます。
console.log(typeof true) // boolean
配列
配列は、文字列の「object」が返ってきます。
console.log(typeof [1, 2, 3]) // object
オブジェクト
オブジェクトは、文字列の「object」が返ってきます。
console.log(typeof {text:"abc"}) // object
typeof演算子で返ってくる文字列の表
最後に検証した内容を表にまとめてみました。
| 指定する内容 | 返ってくる文字列 |
|---|---|
| undefined | “undefined” |
| null | “object” |
| NaN | “number” |
| Infinity | “number” |
| 77 | “number” |
| 77.7 | “number” |
| “javascript” | “string” |
| true | “boolean” |
| [1, 2, 3] | “object” |
| {text:”abc”} | “object” |
null・NaN・Inifinityは、そのまま返ってくるわけではないので注意したいところです。
また、配列もarrayではなく”object”になるので、気をつけておきたいですね。
コメント