JavaScriptでの変数の型チェック

変数の型チェックの重要性

JavaScriptは動的型付け言語であるため、
JavaやC#などの静的型付け言語と違い変数の型を宣言する必要はありません。

いちいち型宣言する必要がないのでとても使い易い一方で
変数の型に気をつけていないと
プログラムの実行時に意図しない挙動が起こってしまうというとても厄介な側面があります。

 
例えば下記の例をとって見ましょう。

const calc = (hoge, fuga) => {
    return hoge + fuga;
};

上記の関数では受け取った二つの引数の加算を行なっています。

それではこの関数を

• 1. 引数が二つとも数値であった場合
• 1. 引数の片方が数値で、もう片方が文字列であった場合
• 1. 引数が二つとも文字列型であった場合

の条件で実行してみた場合、実行結果は以下の通りになります。

1) 引数が二つとも数値であった場合 : 3
2) 引数の片方が数値で、もう片方が文字列であった場合 : 12
3) 引数が二つとも文字列型であった場合 : 12

1)の場合は加算処理、
2)、3)では文字列結合を行なっています。

もし実装者がこの関数を数値の加算処理を想定していた場合、
2)と3)の挙動は意図しない挙動になってしまいます。

それでは
意図しない挙動を避けるためにはどのようにすれば良いのでしょうか？

typeofを使った型チェック

JavaScriptには

• typeof演算子

というものがあります。

この演算子を使うと
とても簡単に変数の型チェックを行うことができます。

typeofを使って先ほどの関数に型チェックを行うと以下のようになります。

const calc = (hoge, fuga) => {
    if(typeof hoge !== 'number' || typeof fuga !== 'number'){
        return `引数が二つとも数値ではありません。`
    }
    return hoge + fuga;
};

上記の関数では
引数が二つとも数値型ではない場合は
文字列結合を行なわないように処理を変更してあります。

実際に
この関数を実行してみると

1) 引数が二つとも数値であった場合 : 3
2) 引数の片方が数値で、もう片方が文字列であった場合 : 引数が二つとも数値ではありません。
3) 引数が二つとも文字列型であった場合 : 引数が二つとも数値ではありません。

となります。

このように
typeof演算子を使って変数の型チェックを行うことにより
プログラム実行の際の意図しない挙動を未然に防ぐことができます。