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

当サイトでは一部リンクに広告が含まれています
アイキャッチ

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

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

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

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

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

JavaScriptのデータ型の種類

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

プリミティブ型オブジェクト型
単一の値を持つ
値は変化しない
複数の値を持つ
値は変化する
例:数値の10、文字列の’Hello’例:配列の[‘dog’, ‘cat’, ‘bird’]

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

プリミティブ型typeof特徴
数値number整数または浮動小数点数5, 3.14
文字列string0文字以上の文字の集まり‘Hello’
長整数bigint数値で扱えない大きな整数1n
真偽値boolean真か偽であるかを判断するtrue, false
undefinedundefined値が未定義であることを示すundefined
nullobject意図的に値が存在しないことを表すnull
シンボルsymbol唯一無二のユニークな値を作るSymbol()

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

オブジェクト型typeof特徴
配列object複数の値をリストとして管理する[1, 2, 3]
オブジェクトobject複数の値をプロパティとして管理する{id:1, name: ‘Tarou’}
関数function複数の手続きを1つの処理として管理するfunction(){}
日時object日時を扱うnew Date()

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

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演算子は値のデータ型を表す文字列を返す
  • 配列もオブジェクトもtypeofでは”object”と判定される
  • 等価演算子(==)による比較は型変換に注意。===を使おう
  • undefinedとnullの違いを理解する

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

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

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

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

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

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

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

目次