JavaScript【 typeof 】 ～ 型の判定

typeof 演算子は、式のデータ型が何であるかを判定するための演算子です。
JavaScript は、他の言語と比べると、データ型についての取扱いが緩やかですが、ある変数のデータ型の種類によって 後続処理に影響を及ぼす場面などで、typeof 演算子を使用します。
今回は、このような typeof 演算子の使い方について紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. typeof 演算子

　
typeof 演算子は、引数に指定した値のデータ型を識別する文字列を返す演算子です。

次のように記述して、使用します。

typeof( 式 );

引数には、型情報を取得するための任意の式を指定します。
引数を指定するための カッコ は省略できます。

typeof 演算子は、型情報を次の文字列で返します。

返り値	型情報
number	数値型
string	文字列型
boolean	真偽値型
object	オブジェクト
function	Function
null	Null
undefined	Undefined

　
　
typeof 演算子を使用して、データ型を判定します。
判定ボタンをクリックしてみて下さい。

　
判定結果が「 number 」などの文字列で返るのが確認できます。

上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
function disp() {
    document.getElementById("dat").value = typeof("あいう");
}
function disp2() {
    document.getElementById("dat2").value = typeof(1.23);
}
function disp3() {
    document.getElementById("dat3").value = typeof(true);
}
function disp4() {
    document.getElementById("dat4").value = typeof([1,2,3]);
}
function disp5() {
    document.getElementById("dat5").value = typeof(new Function(""));
}
</script>

<div style="background-color : #CCC; padding : 20px 20px 10px;">
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:350px;">typeof("あいう")</nobr>　
        <nobr><input type="button" value="判定" onClick="disp()"></nobr>　　
        <input type="text" id="dat" size="7">　
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:350px;">typeof(1.23)</nobr>　
        <nobr><input type="button" value="判定" onClick="disp2()"></nobr>　　
        <input type="text" id="dat2" size="7">　
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:350px;">typeof(true)</nobr>　
        <nobr><input type="button" value="判定" onClick="disp3()"></nobr>　　
        <input type="text" id="dat3" size="7">　
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:350px;">typeof([1,2,3])</nobr>　
        <nobr><input type="button" value="判定" onClick="disp4()"></nobr>　　
        <input type="text" id="dat4" size="7">　
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:350px;">typeof(new Function(""))</nobr>　
        <nobr><input type="button" value="判定" onClick="disp5()"></nobr>　　
        <input type="text" id="dat5" size="7">　
    </div>
</div>

▲目次へ戻る

　

2. ラッパーオブジェクトの判定

　
JavaScriptのデータ型は、大きくプリミティブ型とオブジェクトに分けられます。

そして、プリミティブ型に分類される 真偽値型、数値型、文字列型 には、それぞれ対応するオブジェクトが存在します。

例えば、文字列型に対応するオブジェクトは Stringオブジェクトです。

この Stringオブジェクトを new することで、Stringオブジェクトのインスタンスを作ることができます。

let str = new String("あいう");

このようにインスタンス化されたものは、プリミティブ型の値を包んだ（ラップした）オブジェクトということで、プリミティブ型の値に対しての ラッパーオブジェクト といいます。

プリミティブ型とラッパーオブジェクトとの対応は次の通りです。

プリミティブ型	ラッパーオブジェクト
数値型	Number
文字列型	String
真偽値型	Boolean

　
ラッパーオブジェクトは、名前の通り「 オブジェクト 」ですので、typeof 演算子でラッパーオブジェクトを判定すると、判定結果は下記の通りとなります。
判定ボタンをクリックしてみて下さい。

　

このように、typeof 演算子でラッパーオブジェクトを判定すると「 object 」という文字列が返ります。

typeof 演算子を使用してデータ型の判定を行う際には、同じデータでも 違う判定結果（「 string 」と「 object 」等 ）が出る場合があることに注意が必要です。

typeof 演算子を使用する場面でもそうですが、一般的に、明確な必要性がない場合は、文字列型、数値型、真偽値型 のコンストラクタは使用しない方が賢明です。

一方で、この相違点を利用して、typeof 演算子でプリミティブ型かオブジェクトかの判定をすることも可能です。

▲目次へ戻る