JavaScriptのtypeof演算子の使い方をわかりやすく解説！型判定のコツを学ぼう

JavaScriptを使ったプログラミングでは、変数のデータ型を正しく判定することがとても重要です。

数値の計算をしたいのに、文字列になっていたためにうまくいかない。
配列だと思って操作したら、実はオブジェクトだったためにエラーが出る。
こんな経験は、JavaScriptプログラマなら誰しもあるのではないでしょうか。

今回は、JavaScriptでデータ型を判定する方法であるtypeof演算子について、初心者向けにわかりやすく解説していきます。

コードサンプルをもとに丁寧に説明していくので、これからJavaScriptを学ぶ方も、型判定でお困りの方も、ぜひ参考にしてみてください。

この記事を書いた人

• 現役のフルスタックエンジニアとして活躍中
• 開発チームリーダーとして複数プロジェクトをリード
• 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
• プログラミングスクールのカリキュラム執筆経験あり

JavaScriptのデータ型の種類

まずはJavaScriptのデータ型について簡単に振り返っておきましょう。
JavaScriptには大きく分けて、プリミティブ型とオブジェクト型の2種類のデータ型があります。

プリミティブ型には、以下の7種類があります。

プリミティブ型以外は全てオブジェクト型になります。
代表的なオブジェクト型は以下の通りです。

プログラミングでは、これらのデータ型を適切に使い分けながら値を操作していきます。
そのため、データ型を意識してコードを書くことはとても重要なのです。

typeof演算子の基本的な使い方

では、typeofを使ってデータ型を判定する方法を見ていきましょう。
typeof演算子は、対象の値のデータ型を文字列で返してくれる演算子です。

使い方は簡単で、typeof 判定したい値のように記述するだけです。

プリミティブ型の判定

まずはプリミティブ型に対してtypeofを使った例を見てみましょう。

// 数値
console.log(typeof 1);  // "number"
console.log(typeof 1.41); // "number"
console.log(typeof Infinity);  // "number"
console.log(typeof NaN);  // "number"

// 文字列
console.log(typeof "Hello");  // "string"
console.log(typeof "123");  // "string"

// 長整数
console.log(typeof 1n); // "bigint"

// 真偽値
console.log(typeof true);  // "boolean"
console.log(typeof false); // "boolean"

// undefined
console.log(typeof undefined);  // "undefined"

// null
console.log(typeof null);  // "object"

// シンボル
console.log(typeof Symbol()); // "symbol"

このように、プリミティブ型に対してtypeofを使うと、期待通りの文字列が返ってきます。

ただし、nullに対してtypeofを使うと”object”と返ってくる点には注意が必要です。
これはJavaScriptの言語仕様によるものですが、nullはオブジェクトではないので直感的ではありません。

オブジェクト型の判定

次に、オブジェクト型に対してtypeofを使った例を見てみましょう。

// 配列
console.log(typeof [1, 2, 3]);  // "object"

// オブジェクト
console.log(typeof {id:1, name:'Tarou'}); // "object"

// 関数
function hello(){ console.log('Hello'); }
console.log(typeof hello); // "function"

// 日時
console.log(typeof new Date());  // "object"

関数以外のオブジェクト型は全て”object”と判定されるのがわかります。
typeofでは配列とオブジェクトの区別がつかないので注意が必要です。

typeofの返り値は文字列

typeof演算子が返す値は常に文字列です。
なので、文字列と比較して判定を行うことができます。

let num = 10;
if (typeof num === 'number') {
  console.log('numは数値です');
}
// "numは数値です"

このように、typeofと===演算子を組み合わせることで型チェックができるわけです。

配列やオブジェクトの判定方法

前述の通り、typeofでは配列とオブジェクトの区別がつきません。
両者を区別したい場合は、専用のメソッドを使う必要があります。

配列かどうかを判定するには、Array.isArray()メソッドが使えます。

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({id:1, name:'Tarou'})); // false

Array.isArray()は配列の場合はtrue、そうでない場合はfalseを返します。

一方、オブジェクトかどうかを判定する汎用的な方法はありません。
代わりに、オブジェクトのtypeofが”object”になることと、nullでないことをチェックする方法がよく使われます。

function isObject(obj) {
  return typeof obj === "object" && obj !== null;
}

console.log(isObject({id:1, name:'Tarou'})); // true
console.log(isObject([1, 2, 3])); // true
console.log(isObject(null)); // false

ただし、この方法だと配列もtrueになってしまうので、配列を除外したい場合は別途チェックが必要です。

また、クラスのインスタンスがどのクラスのものかを判定したい場合は、instanceof演算子を使うのが一般的です。

class Dog {}
const dog = new Dog();

console.log(dog instanceof Dog); // true
console.log(dog instanceof Object); // true
console.log([] instanceof Array); // true
console.log([] instanceof Object); // true

instanceofはインスタンスが指定したクラスのものかどうかを判定します。
また、継承関係にあるスーパークラスに対してもtrueを返します。

型判定でよくあるミスと注意点

JavaScriptで型判定を行う際によくある間違いと、注意すべき点をいくつか紹介します。

等価演算子(==)を使った比較

JavaScriptの==演算子は、両辺の型が異なる場合に型変換を行ってから比較します。
そのため、直感に反する比較結果になることがあります。

console.log(1 == "1"); // true
console.log(0 == false); // true
console.log("" == false); // true

厳密に型をチェックしたい場合は、常に===演算子を使うようにしましょう。

undefinedとnullの混同

undefinedとnullはどちらも”値が存在しない”ことを表す特殊な値ですが、意味合いが異なります。

undefinedは、変数が宣言されているが値が代入されていない場合などに自動的に設定されます。
一方、nullは存在しないオブジェクトを表現するために使われ、意図的に代入して使います。

typeofの結果はundefinedが”undefined”、nullが”object”と異なるので、両者を混同しないように気をつけましょう。

数値としてのtrue/falseの評価

JavaScriptでは、true/falseを数値と演算した場合、trueは1、falseは0として評価されます。

console.log(true + 1); // 2
console.log(false + 1); // 1

意図しない結果にならないよう、真偽値を数値と直接演算することは避けた方が無難です。

まとめ

今回は、JavaScriptのtypeof演算子について詳しく解説しました。
ポイントをおさらいしておきましょう。

typeofは型判定の基本中の基本です。しかし、そこから一歩踏み込んだ使い方のコツを掴むことで、より堅牢なコードが書けるようになります。

ぜひ今回紹介した内容を参考に、実際のコードを書く際の型判定に活かしてみてください。
きっとコードの品質も上がるはずです。

JavaScriptを効率的に身につける勉強法は？

JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。

• JavaScript を身に付けてエンジニアになるには何をすればいい？
• 何から勉強すればいいんだろう？
• 効率よく勉強するには？

JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？

Muscle Coding

【初心者向け】JavaScriptの勉強法3選を現役エンジニアが比較・解説！ | Muscle Coding JavaScriptの効果的な学習方法を現役エンジニアが解説！本、動画教材（Udemy）、プログラミングスクールの特徴を比較し、最適な方法を提案します。初心者でも理解しやすい…